Updated project for bootstrap 4, alpha 2

* Added support for postcss and tether for Bootstrap 4.
shakacode · Feb 28, 2016 · 145c3db · 145c3db
1 parent 55a6e31
commit 145c3db
Show file tree

Hide file tree

Showing 22 changed files with 539 additions and 71 deletions.
diff --git a/.bootstraprc-4-default b/.bootstraprc-4-default
@@ -12,6 +12,7 @@ useFlexbox: true
 styleLoaders:
   - style
   - css
+  - postcss
   - sass
 
 # Extract styles to stand-alone css file

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
 # Change Log
+All notable changes to this project will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version.
 
-See [GitHub Releases section](https://github.com/shakacode/bootstrap-loader/releases).
+Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
+## [Unreleased]
+
+## [1.0.9] - 2016-02-28
+##### Fixed
+- Updated to support Bootstrap 4, Alpha 2, including examples. See [#56](https://github.com/shakacode/bootstrap-loader/pull/56) by [justin808](https://github.com/justin808).
+
+## [1.0.8]
+
+[Unreleased]: https://github.com/shakacode/bootstrap-loader/compare/1.0.9...master
+[1.0.9]: https://github.com/shakacode/bootstrap-loader/compare/1.0.8...1.0.9
+[1.0.8]: https://github.com/shakacode/bootstrap-loader/compare/1.0.7...1.0.8
diff --git a/README.md b/README.md
@@ -6,6 +6,11 @@
 
 Successor to [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader). Load Bootstrap styles and scripts in your Webpack bundle. This loader uses SASS to process CSS styles. Bootstrap 3 & 4 are supported.
 
+## NEWS
+
+2016-02-28: Released 1.0.9. Updated to support Bootstrap 4, alpha 2!
+
+
 ## Installation
 Get it via npm:
 
@@ -41,6 +46,8 @@ entry: [ 'bootstrap-loader', './app' ]
 
 Config is optional. It can be placed in root dir with name `.bootstraprc`. You can write it in `YAML` or `JSON` formats. Take a look at the default config files for [Bootstrap 3](.bootstraprc-3-default) and [Bootstrap 4](.bootstraprc-4-default). Note, we recommend using a configuration or else you might pick up unwanted upgrades, such as when we make Bootstrap 4 the default.
 
+Config is optional. It can be placed in root dir with name `.bootstraprc`. You can write it in `YAML` or `JSON` formats. Take a look at the default config files for [Bootstrap 3](.bootstraprc-3-default) and [Bootstrap 4](.bootstraprc-4-default). Note, we recommend using a configuration or else you might pick up unwanted upgrades, such as when we make Bootstrap 4 the default. Config options don't fall back on the defaults once a config file is present. Be sure not to delete config options. To start with a custom config, copy over a default config file as a starting point.
+
 ```yaml
 ---
 # You can use comments here
@@ -247,6 +254,28 @@ Enable / disable flexbox model.
 useFlexbox: true
 ```
 
+#### Tether
+Additionally, Bootstrap 4 requires Tether. You can add Tether per the examples in the `/examples` directory.
+
+1. Add tether to package.json: `npm i --save tether`
+2. Add tether as an entry point to your webpack config.
+3. Add this plugin to your webpack config:
+
+```
+  plugins: [
+    new ExtractTextPlugin('app.css', { allChunks: true }),
+    new webpack.ProvidePlugin({
+      "window.Tether": "tether"
+    }),
+  ],
+```
+
+#### PostCSS
+Bootstrap 4 seems to require postcss:
+
+1. Add postcss and the the postcss-loader: `npm i --save postcss postcss-loader`
+2. Put `postcss` before `sass` in the order of loaders in your `.bootstraprc` file.
+
 ## Additional configurations
 
 #### Paths to custom assets

diff --git a/examples/basic/.bootstraprc-4-example b/examples/basic/.bootstraprc-4-example
@@ -12,6 +12,7 @@ useFlexbox: true
 styleLoaders:
   - style
   - css
+  - postcss
   - sass
 
 # Extract styles to stand-alone css file

diff --git a/examples/basic/app/markup/bootstrap-dev.html b/examples/basic/app/markup/bootstrap-dev.html
@@ -8,33 +8,142 @@
 
   <body>
     <div id="app">
-
       <div class="jumbotron">
         <div class="container">
           <h1 class="display-3">Hello, world!</h1>
-          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling
+            extra attention to featured content or information.</p>
           <hr class="m-y-md">
-          <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+          <p>It uses utility classes for typography and spacing to space content out within the
+            larger container.</p>
           <p class="lead">
-            <a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal" data-target="#modal">
+            <a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal"
+               data-target="#modal">
               Learn more
             </a>
           </p>
         </div>
       </div>
 
-      <div class="row col-items">
-        <div class="col-md-4 col-item">
-          <span class="glyphicon glyphicon-headphones"></span>
-          <span class="text">It.</span>
+      <div class="container">
+        <h2>Glyphicons (not available for Bootstrap 4!)</h2>
+        <div class="row col-items">
+          <div class="col-md-4 col-item">
+            <span class="glyphicon glyphicon-headphones"></span>
+            <span class="text">It.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="glyphicon glyphicon-glass"></span>
+            <span class="text">Just.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="glyphicon glyphicon-thumbs-up"></span>
+            <span class="text">Works.</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="container">
+        <h2>Font Awesome using the font-awesome-loader</h2>
+        <div class="row col-items">
+          <div class="col-md-4 col-item">
+            <span class="fa fa-headphones"></span>
+            <span class="text">It.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="fa fa-glass"></span>
+            <span class="text">Just.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="fa fa-thumbs-up"></span>
+            <span class="text">Works.</span>
+          </div>
         </div>
-        <div class="col-md-4 col-item">
-          <span class="glyphicon glyphicon-glass"></span>
-          <span class="text">Just.</span>
+      </div>
+
+      <div class="container">
+        <h2>Bootstrap 4 card component</h2>
+        <div class="card">
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item">Cras justo odio</li>
+            <li class="list-group-item">Dapibus ac facilisis in</li>
+            <li class="list-group-item">Vestibulum at eros</li>
+          </ul>
         </div>
-        <div class="col-md-4 col-item">
-          <span class="glyphicon glyphicon-thumbs-up"></span>
-          <span class="text">Works.</span>
+      </div>
+
+      <div class="container">
+        <h2>Bootstrap 4 card columns</h2>
+        <div class="card-columns">
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">Card title that wraps to a new line</h4>
+              <p class="card-text">This is a longer card with supporting text below as a natural
+                lead-in to additional content. This content is a little bit longer.</p>
+            </div>
+          </div>
+          <div class="card card-block">
+            <blockquote class="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                ante.</p>
+              <footer>
+                <small class="text-muted">
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </small>
+              </footer>
+            </blockquote>
+          </div>
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">Card title</h4>
+              <p class="card-text">This card has supporting text below as a natural lead-in to
+                additional content.</p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+            </div>
+          </div>
+          <div class="card card-block card-inverse card-primary text-xs-center">
+            <blockquote class="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+              <footer>
+                <small>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </small>
+              </footer>
+            </blockquote>
+          </div>
+          <div class="card card-block text-xs-center">
+            <h4 class="card-title">Card title</h4>
+            <p class="card-text">This card has supporting text below as a natural lead-in to
+              additional content.</p>
+            <p class="card-text">
+              <small class="text-muted">Last updated 3 mins ago</small>
+            </p>
+          </div>
+          <div class="card">
+            <img class="card-img" data-src="..." alt="Card image">
+          </div>
+          <div class="card card-block text-xs-right">
+            <blockquote class="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                ante.</p>
+              <footer>
+                <small class="text-muted">
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </small>
+              </footer>
+            </blockquote>
+          </div>
+          <div class="card card-block">
+            <h4 class="card-title">Card title</h4>
+            <p class="card-text">This is a wider card with supporting text below as a natural
+              lead-in to additional content. This card has even longer content than the first to
+              show that equal height action.</p>
+            <p class="card-text">
+              <small class="text-muted">Last updated 3 mins ago</small>
+            </p>
+          </div>
         </div>
       </div>
 

diff --git a/examples/basic/app/markup/bootstrap-prod.html b/examples/basic/app/markup/bootstrap-prod.html
@@ -10,33 +10,142 @@
 
   <body>
     <div id="app">
-
       <div class="jumbotron">
         <div class="container">
           <h1 class="display-3">Hello, world!</h1>
-          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+          <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling
+            extra attention to featured content or information.</p>
           <hr class="m-y-md">
-          <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+          <p>It uses utility classes for typography and spacing to space content out within the
+            larger container.</p>
           <p class="lead">
-            <a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal" data-target="#modal">
+            <a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal"
+               data-target="#modal">
               Learn more
             </a>
           </p>
         </div>
       </div>
 
-      <div class="row col-items">
-        <div class="col-md-4 col-item">
-          <span class="glyphicon glyphicon-headphones"></span>
-          <span class="text">It.</span>
+      <div class="container">
+        <h2>Glyphicons (not available for Bootstrap 4!)</h2>
+        <div class="row col-items">
+          <div class="col-md-4 col-item">
+            <span class="glyphicon glyphicon-headphones"></span>
+            <span class="text">It.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="glyphicon glyphicon-glass"></span>
+            <span class="text">Just.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="glyphicon glyphicon-thumbs-up"></span>
+            <span class="text">Works.</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="container">
+        <h2>Font Awesome using the font-awesome-loader</h2>
+        <div class="row col-items">
+          <div class="col-md-4 col-item">
+            <span class="fa fa-headphones"></span>
+            <span class="text">It.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="fa fa-glass"></span>
+            <span class="text">Just.</span>
+          </div>
+          <div class="col-md-4 col-item">
+            <span class="fa fa-thumbs-up"></span>
+            <span class="text">Works.</span>
+          </div>
         </div>
-        <div class="col-md-4 col-item">
-          <span class="glyphicon glyphicon-glass"></span>
-          <span class="text">Just.</span>
+      </div>
+
+      <div class="container">
+        <h2>Bootstrap 4 card component</h2>
+        <div class="card">
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item">Cras justo odio</li>
+            <li class="list-group-item">Dapibus ac facilisis in</li>
+            <li class="list-group-item">Vestibulum at eros</li>
+          </ul>
         </div>
-        <div class="col-md-4 col-item">
-          <span class="glyphicon glyphicon-thumbs-up"></span>
-          <span class="text">Works.</span>
+      </div>
+
+      <div class="container">
+        <h2>Bootstrap 4 card columns</h2>
+        <div class="card-columns">
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">Card title that wraps to a new line</h4>
+              <p class="card-text">This is a longer card with supporting text below as a natural
+                lead-in to additional content. This content is a little bit longer.</p>
+            </div>
+          </div>
+          <div class="card card-block">
+            <blockquote class="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                ante.</p>
+              <footer>
+                <small class="text-muted">
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </small>
+              </footer>
+            </blockquote>
+          </div>
+          <div class="card">
+            <div class="card-block">
+              <h4 class="card-title">Card title</h4>
+              <p class="card-text">This card has supporting text below as a natural lead-in to
+                additional content.</p>
+              <p class="card-text">
+                <small class="text-muted">Last updated 3 mins ago</small>
+              </p>
+            </div>
+          </div>
+          <div class="card card-block card-inverse card-primary text-xs-center">
+            <blockquote class="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+              <footer>
+                <small>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </small>
+              </footer>
+            </blockquote>
+          </div>
+          <div class="card card-block text-xs-center">
+            <h4 class="card-title">Card title</h4>
+            <p class="card-text">This card has supporting text below as a natural lead-in to
+              additional content.</p>
+            <p class="card-text">
+              <small class="text-muted">Last updated 3 mins ago</small>
+            </p>
+          </div>
+          <div class="card">
+            <img class="card-img" data-src="..." alt="Card image">
+          </div>
+          <div class="card card-block text-xs-right">
+            <blockquote class="card-blockquote">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                ante.</p>
+              <footer>
+                <small class="text-muted">
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </small>
+              </footer>
+            </blockquote>
+          </div>
+          <div class="card card-block">
+            <h4 class="card-title">Card title</h4>
+            <p class="card-text">This is a wider card with supporting text below as a natural
+              lead-in to additional content. This card has even longer content than the first to
+              show that equal height action.</p>
+            <p class="card-text">
+              <small class="text-muted">Last updated 3 mins ago</small>
+            </p>
+          </div>
         </div>
       </div>