diff options
Diffstat (limited to 'custom/index.html')
| -rw-r--r-- | custom/index.html | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/custom/index.html b/custom/index.html new file mode 100644 index 0000000..79cddcd --- /dev/null +++ b/custom/index.html @@ -0,0 +1,22 @@ +<html> + <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> +</html> |