hop add some elements

This commit is contained in:
Mathieu Jaumotte 2022-11-07 16:01:04 +01:00
parent 9217d88792
commit 48ae7c4eb6
6 changed files with 137 additions and 81 deletions

View File

@ -6,3 +6,8 @@ Serveur web avec sass et bootstrap
## Lancer le serveur de dev (parcel) ## Lancer le serveur de dev (parcel)
`bash docker-node.sh yarn dev` `bash docker-node.sh yarn dev`
## Conventions HTML/CSS
* pas de div sans classes

View File

@ -1,11 +1,9 @@
div#mon-panier {
div.coucou { background-color: $green-200;
margin: 1em; .intro {
padding: 2em; background-color: $green-100;
background-color: cyan; }
.resume {
span { background-color: $green-300;
padding: 1em;
background-color: yellow;
} }
} }

View File

@ -1,2 +1,5 @@
$primary: pink;
$enable-shadows: true; //$primary: pink;
$enable-shadows: false;
$enable-rounded: true;
$enable-negative-margins: true;

61
app/scss/bootstrap.scss vendored Normal file
View File

@ -0,0 +1,61 @@
/// ------------------------------------
/// Option A: Include all of Bootstrap
/// ------------------------------------
//@import "../node_modules/bootstrap/scss/bootstrap";
/// ------------------------------------
/// Option B: Include parts of Bootstrap
/// ------------------------------------
@import "../node_modules/bootstrap/scss/mixins/banner";
@include bsBanner("");
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
@import "variables";
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
// 5. Add additional custom code here
@import "custom";

View File

@ -1,61 +1,17 @@
/// ------------------------------------ div.panier {
/// Option A: Include all of Bootstrap margin-top: 1em;
/// ------------------------------------ .intro {
//@import "../node_modules/bootstrap/scss/bootstrap"; }
.resume {
}
}
/// ------------------------------------ div.coucou {
/// Option B: Include parts of Bootstrap padding: 2em;
/// ------------------------------------ background-color: #b1d9d9;
@import "../node_modules/bootstrap/scss/mixins/banner"; span {
@include bsBanner(""); padding: 1em;
background-color: #fff;
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) }
@import "../node_modules/bootstrap/scss/functions"; }
// 2. Include any default variable overrides here
@import "variables";
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
// 5. Add additional custom code here
@import "custom";

View File

@ -3,20 +3,53 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../scss/bootstrap.scss">
<link rel="stylesheet" href="../scss/styles.scss"> <link rel="stylesheet" href="../scss/styles.scss">
</head> </head>
<body> <body>
<nav class="navbar navbar-light bg-light">
<button type="button" name="button" class="btn btn-primary btn-lg m-4"> <div class="container-fluid">
hello Marcel <a class="navbar-brand">Navbar</a>
</button> <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="coucou"> <div class="coucou">
<h2>Bim</h2> <h2 class="display-3">Bim bam</h2>
<p>bam</p> <p>Mes propres styles</p>
<span>boum</span> <span>boum</span>
</div> </div>
<div class="container panier" id="mon-panier">
<div class="row">
<div class="col intro">
<h2>Column</h2>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-6">
<h2>Column</h2>
<p>Non tellus orci ac auctor augue mauris augue neque gravida. Sit amet risus nullam eget felis eget nunc lobortis. Urna neque viverra justo nec ultrices dui sapien. Arcu dictum varius duis at consectetur lorem donec. Neque ornare aenean euismod elementum nisi quis eleifend quam. Habitasse platea dictumst quisque sagittis purus.</p>
</div>
<div class="col resume">
<h2>Column</h2>
<button type="button" name="button" class="btn btn-primary btn-lg">
hello Marcel
</button>
</div>
</div>
</div>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>