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 --exactWebpack 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