hop add some elements
This commit is contained in:
parent
9217d88792
commit
48ae7c4eb6
@ -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
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
61
app/scss/bootstrap.scss
vendored
Normal 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";
|
||||||
@ -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";
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user