diff options
| author | Mark Otto <markdotto@gmail.com> | 2018-07-21 03:55:32 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2018-07-21 03:55:32 +0300 |
| commit | e3cc011bc77656b5c43883554d571a26d5a190ea (patch) | |
| tree | 43817525249244077b9fc9fa0200a76bf8da22f7 | |
| parent | 61a5025aa365ffef4f80bbd52d37c29a69a31066 (diff) | |
Update custom build with clearer docs, snippets, code comments, and more
| -rw-r--r-- | custom/custom.scss | 27 | ||||
| -rw-r--r-- | custom/index.html | 57 |
2 files changed, 61 insertions, 23 deletions
diff --git a/custom/custom.scss b/custom/custom.scss index e43892b..d87847e 100644 --- a/custom/custom.scss +++ b/custom/custom.scss @@ -4,16 +4,29 @@ * Licensed MIT */ +// Functions, variables, and mixins must come first. +// +// - Variables and mixins are dependant on functions +// - In order to override Sass's default variables, those default variables must +// come first @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; +// Override variable defaults +// +// Here is where we customize the variables from Bootstrap's `variables.scss`. +// We copy-pasta variables we need from that source file, remove the `!default` +// flag, and finally change their values. +$body-bg: $gray-200; +$code-color: $danger; + // @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/code"; -// @import "node_modules/bootstrap/scss/grid"; +@import "node_modules/bootstrap/scss/code"; +@import "node_modules/bootstrap/scss/grid"; // @import "node_modules/bootstrap/scss/tables"; // @import "node_modules/bootstrap/scss/forms"; // @import "node_modules/bootstrap/scss/buttons"; @@ -42,14 +55,14 @@ // @import "node_modules/bootstrap/scss/print"; html { - background-color: $gray-200; + // background-color: $gray-200; } @media (min-width: 768px) { body { - max-width: 48rem; - margin-right: auto; - margin-left: auto; - background-color: transparent; + // max-width: 48rem; + // margin-right: auto; + // margin-left: auto; + // background-color: transparent; } } diff --git a/custom/index.html b/custom/index.html index 79cddcd..297426a 100644 --- a/custom/index.html +++ b/custom/index.html @@ -2,21 +2,46 @@ <head> <link rel="stylesheet" href="custom.css"> </head> - <body class="p-5"> - <h2 class="pb-2 mb-3 border-bottom">Custom CSS with Bootstrap</h2> - <p>This demonstrates building a custom CSS file with Bootstrap's source Sass files, managed via npm. It's not a complete solution, and skips compiling Bootstrap's JavaScript.</p> - <p><strong>This demo includes:</strong></p> - <ul> - <li><code class="text-danger">index.html</code> — the page you're looking at.</li> - <li><code class="text-danger">custom.scss</code> — a customized version of <code>bootstrap.scss</code> where we normally import every Sass file.</li> - </ul> - <p>The normal import stack is commented out, save for a handful of components:</p> - <ul> - <li><code class="text-danger">functions</code>, <code class="text-danger">variables</code>, and <code class="text-danger">mixins</code> — useful tools for interacting with and customizing Bootstrap's default styles.</li> - <li><code class="text-danger">reboot</code> — our opinionated browser normalization styles.</li> - <li><code class="text-danger">type</code> — our default typography styles.</li> - <li><code class="text-danger">utilities</code> — all our utility classes for quick prototyping.</li> - </ul> - <p>You can <strong>compile this CSS</strong> with <code class="text-danger">npm run custom</code>.</p> + <body> + <div class="p-3 p-md-5 text-white bg-primary"> + <div class="col-md-7 mx-auto py-md-5"> + <h1>Custom CSS with Bootstrap via npm</h1> + <p>This demonstrates building a custom CSS file with Bootstrap's source Sass files, managed via npm. While not a complete solution, this demo highlights how to change default variables, create a custom stylesheet, and choose specific parts of CSS to include.</p> + <p class="text-white-50">Note: This demo doesn't include compiling Bootstrap's JavaScript.</p> + </div> + </div> + + <div class="p-3 p-md-5 border-top border-white"> + <div class="col-md-7 mx-auto"> + <h2>Included files</h2> + <p>In addition to our <code>package.json</code>, this demo includes two key files:</p> + <ul> + <li><code>index.html</code> — the page you're looking at</li> + <li><code>custom.scss</code> — a new Sass stylesheet for modifying and compiling Bootstrap's CSS</li> + </ul> + <p>Bootstrap's source Sass code is spread across dozens of smaller <code>.scss</code> files. By default, we include every one of these files in what we call our "import stack," a series of <code>@import</code> statements. For demonstration purposes, the full Bootstrap import stack has been commented out in our <code>custom.scss</code> file, save for a handful of components:</p> + <ul> + <li><code>functions</code>, <code>variables</code>, and <code>mixins</code> — useful tools for interacting with and customizing Bootstrap's default styles.</li> + <li><code>reboot</code> — our opinionated browser normalization styles.</li> + <li><code>type</code> — our default typography styles.</li> + <li><code>code</code> — our inline and block code styles.</li> + <li><code>grid</code> — our layout and grid system styles.</li> + <li><code>utilities</code> — all our utility classes for rapid prototyping.</li> + </ul> + + <h2>Compiling</h2> + <p>Built into npm is the ability to run scripts or tasks, like compiling CSS, via the command line. The `package.json` in any npm package typically includes scripts unique to that project. Here's how to use our this demo's npm scripts to compile a custom Bootstrap build.</p> + + <ol> + <li>From the command line, navigate to this demo's root directory, <code>bootstrap-npm</code>.</li> + <li>When ready, enter <code>npm start</code> to compile the CSS and watch for changes.</li> + <li>Open the <code>custom/index.html</code> file in any browser to see a styled page using your freshly compiled, custom CSS.</li> + </ol> + + <p>When using <code>npm start</code>, any changes you make to your <code>custom.scss</code> will automatically cause the Sass file to recompile. Refresh your HTML page to see those changes in action.</p> + + <p>Those just getting started with Bootstrap and npm may wish to build on this project's <code>package.json</code> by adding new dependencies and scripts. Please do!</p> + </div> + </div> </body> </html> |