Merge pull request #56 from shakacode/update-bootstrap4-alpha-2

Updated project for bootstrap 4, alpha 2

.bootstraprc-4-default

@@ -12,6 +12,7 @@ useFlexbox: true
 styleLoaders:
   - style
   - css
+  - postcss
   - sass
 
 # Extract styles to stand-alone css file

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

README.md

@@ -6,6 +6,19 @@
 
 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.
 
+**NOTE:** [Bootstrap 4](http://v4-alpha.getbootstrap.com/), (twbs/bootstrap)[https://github.com/twbs/bootstrap] is currently in alpha right now. Bootstrap 4 definitely worked when we first released this package. The parent company of this product, [ShakaCode](http://www.shakacode.com) had originally planned to use it for our upcoming commercial product, but we decided that Bootstrap 4 was changing to fast for a production product. Thus, we're still using Bootstrap 3, and we're not actively developing with Bootstrap 4. Consequently, for Bootstrap 4 issues, we need one of:
+
+1. Community support to help us with Bootstrap 4 issues and pull requests.
+2. We'd be thrilled to have another maintainer join us to help with Bootstrap 4 issues.
+3. We'd also be thrilled if any companies are open to sponsoring the development of features and issues regarding Bootstrap 4.
+
+That being said, Bootstrap 4 probably works just fine!
+
+## NEWS
+
+2016-02-28: Released 1.0.9. Updated to support Bootstrap 4, alpha 2!
+
+
 ## Installation
 Get it via npm:
 
@@ -41,6 +54,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 +262,31 @@ 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.
+
+#### Glyphicons
+Glyphicons have been removed from Bootstrap 4. The examples demonstrate how to use the font-awesome-loader
+
 ## Additional configurations
 
 #### Paths to custom assets

examples/basic/.bootstraprc-4-example

@@ -12,6 +12,7 @@ useFlexbox: true
 styleLoaders:
   - style
   - css
+  - postcss
   - sass
 
 # Extract styles to stand-alone css file

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>