mathieu
/
start_sass-bootstrap_project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

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

16
app/scss/_custom.scss
View File

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

7
app/scss/_variables.scss
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";

74
app/scss/styles.scss
View File

@ -1,61 +1,17 @@
/// ------------------------------------
/// Option A: Include all of Bootstrap
/// ------------------------------------
//@import "../node_modules/bootstrap/scss/bootstrap";
div.panier {
margin-top: 1em;
.intro {
}
.resume {
}
}
/// ------------------------------------
/// Option B: Include parts of Bootstrap
/// ------------------------------------
div.coucou {
padding: 2em;
background-color: #b1d9d9;
@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";
span {
padding: 1em;
background-color: #fff;
}
}

55
app/src/index.html
View File

@ -1,22 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../scss/bootstrap.scss">
<link rel="stylesheet" href="../scss/styles.scss">
</head>
<body>
<button type="button" name="button" class="btn btn-primary btn-lg m-4">
hello Marcel
</button>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<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">
<h2>Bim</h2>
<p>bam</p>
<span>boum</span>
<h2 class="display-3">Bim bam</h2>
<p>Mes propres styles</p>
<span>boum</span>
</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>
</body>
</body>
</html>