@benefex/styles NPM

Benefex Bootstrap overrides

Make sure you set the relative icon-font-path for sass, see below:

# import the entire stylesheet as less

// assuming a webpack build you need the ~ to import from node modules
$icon-font-path: "~@benefex/styles/dist/fonts/bootstrap/"
@import "~@benefex/styles/dist/scss/_bootstrap.scss"

# import individual components
@import "~@benefex/styles/dist/scss/bootstrap/_buttons.scss"

For IE8 Support

For IE8 you need to use the extract text plugin, to extract the css into a separate file and not load it inline with the JS.

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var browserList = require('browserslist');

var targetBrowsers = browserList('last 2 version, > 5%, ie > 7');

// Webpack config
 
config: {
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
    postcss: function(){
        return [autoprefixer({browsers: targetBrowsers})];
    },
    module: {
        loaders: [
            {
                test: /\.(scss|sass)$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
            },
            { test: /\.(png|jpg|gif|svg)$/, loader: 'url?limit=2000'},
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=1000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=1000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=1000&mimetype=image/svg+xml'}
        ]
    }
}

// make sure common chunks is specific and does not include the respond.js and html5 shiv
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({name: 'vendor', chunks: ['app', 'vendor'], minChunks: Infinity}))

You should create a base style and import the bootstrap less file. Note the ~.

// basestyles.less 
@import "~@benefex/styles/dist/less/bootstrap.scss";

Bundle respond and html5shiv together into a ie8.js file

// ie8.ts
require('imports?this=>window!html5shiv');
require('imports?this=>window!@benefex/respond.js');

Sample setup. Be sure to include the ie8.js file after your extracted styles:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="path/yourCreatedCssFile.css" rel="stylesheet">

    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="ie8.js"></script>
    <![endif]-->
  </head>
  <body ng-app>
    <div hello-directive>Hello, world!</hello-directive>

    <!-- Include webpack build as needed -->
    <script src="app.js"></script>
  </body>
</html>

Development

The original bootstrap is loaded via NPM so to update it just install a newer version in package.json.

To override existing bootstrap styles just create a file of the same name in the overrides folder.

See the folder structure in node_modules/bootstrap-sass. It should match.

overides/
├── _bootstrap.scss
├── _bootstrap-compass.scss
│   ├── bootstrap/
│      ├── _alerts.scss
│      ├── _etc.scss

Will be output to

dist/
├── scss/
│   ├── _bootstrap.scss
│   ├── _bootstrap-compass.scss
│   ├── bootstrap/
│      ├── _alerts.scss
│      ├── _etc.scss
|      ├── mixins/
|           ├── _alerts.scss
└── fonts/
    ├── bootstrap/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

Fonts

You must register for an icomoon account and import the SVG file which is under fonts/**/icomoon. You can then generate a new font with the updated icons if you added one. Make sure the existing class names are maintained or updated. e.g .icon-female

Replace

Files with named: name.replace.scss will replace the entire bootstrap file

Concat

Other files will have the overrides concatenated onto the end of the original file

Install

npm i @benefex/styles@X.X.X --save-dev --exact

Webpack loaders

# include in webpack.config.js
module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  }
};