@benefex/styles

v0.4.2

Published

a month ago

Benefex Bootstrap override

Downloads

129

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/[email protected] --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'}
    ]
  }
};

Installing

npm install

NPM Tasks

npm build builds a version for distribution via npm npm prepublish used when publishing to npm

Publishing workflow

Run build and check that your styles have been updated in dist
Bump version in package.json following Semantic Versioning SemVer
Tag the release commit in git: git tag -a v0.1.5 -m "Published v0.1.5"
Push the tags up to github: git push origin --tags
Push the repo git push
Publish npm publish