diff options
| author | Mark Otto <markdotto@gmail.com> | 2018-07-21 04:34:04 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2018-07-21 04:34:04 +0300 |
| commit | e06124758794edc7fd829f7976ab21b842106e96 (patch) | |
| tree | 694c809e1187423d734cd79468a2bcf0c1e7f4eb | |
| parent | f004a9f14df0c9b0ead9df52494b9dda43cf8608 (diff) | |
reorganize the entire thing, focus on customizing
| -rw-r--r-- | bootstrap-custom.scss (renamed from custom/custom.scss) | 0 | ||||
| -rw-r--r-- | custom/index.html | 47 | ||||
| -rw-r--r-- | default/default.scss | 1 | ||||
| -rw-r--r-- | index.html (renamed from default/index.html) | 43 | ||||
| -rw-r--r-- | index.js | 0 | ||||
| -rw-r--r-- | package.json | 13 |
6 files changed, 43 insertions, 61 deletions
diff --git a/custom/custom.scss b/bootstrap-custom.scss index d87847e..d87847e 100644 --- a/custom/custom.scss +++ b/bootstrap-custom.scss diff --git a/custom/index.html b/custom/index.html deleted file mode 100644 index 297426a..0000000 --- a/custom/index.html +++ /dev/null @@ -1,47 +0,0 @@ -<html> - <head> - <link rel="stylesheet" href="custom.css"> - </head> - <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> diff --git a/default/default.scss b/default/default.scss deleted file mode 100644 index 7649c53..0000000 --- a/default/default.scss +++ /dev/null @@ -1 +0,0 @@ -@import "node_modules/bootstrap/scss/bootstrap.scss" diff --git a/default/index.html b/index.html index e764295..f837942 100644 --- a/default/index.html +++ b/index.html @@ -1,12 +1,46 @@ <html> <head> - <link rel="stylesheet" href="default.css"> + <link rel="stylesheet" href="bootstrap-custom.css"> </head> <body> <div class="p-3 p-md-5 text-white bg-primary"> - <div class="py-md-5" style="max-width: 768px;"> - <h1>Bootstrap with npm</h1> - <p>Success, you've installed Bootstrap via npm! This demo page is the "kitchen sink" of Bootstrap, a place to see all our layout, styles, and components for you to quickly visualize any changes you wish to test.</p> + <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>bootstrap-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> @@ -313,6 +347,5 @@ <div class="p-5 border-bottom"> <h2>Progress</h2> </div> - </body> </html> diff --git a/index.js b/index.js deleted file mode 100644 index e69de29..0000000 --- a/index.js +++ /dev/null diff --git a/package.json b/package.json index 9a6500e..aa55331 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,12 @@ { "name": "bootstrap-npm", "version": "1.1.0", - "description": "Example project for including Bootstrap via npm and customizing it.", - "style": "style.css", - "sass": "style.scss", - "main": "index.js", + "description": "Example project for including and customizing Bootstrap's Sass and CSS via npm.", + "style": "bootstrap-custom.css", + "sass": "bootstrap-custom.scss", "scripts": { - "start": "npm run css && npm run custom && open default/index.html", - "test": "echo \"Error: no test specified\" && exit 1", - "css": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 default/default.scss default/default.css", - "custom": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 custom/custom.scss custom/custom.css" + "start": "npm run sass -- -w", + "sass": "node-sass --output-style compressed bootstrap-custom.scss bootstrap-custom.css" }, "author": "mdo", "license": "MIT", |