A modern, modular, flexible, semantic CSS framework.
Table of Contents
$ npm i bolster-css --save
Webpack / Browserify
// ES2015;// CommonJS;
Copy the distributed file to a folder you use:
$ cp node_modules/bolster-css/dist/bolster.min.css public/css/bolster.min.css
and then reference it in your
bolster uses the latest styling capabilites to provide a modern layout engine, and with the use of PostCSS to build the styles you can be assured of compatible support for all modern browsers. This support extends to:
- Safari 6.1+
- iOS Safari 7.1+
- Android Browser 4.1+
- IE Mobile 10+
While the total filesize of
bolster once gzipped and minified is only 6.6KB, you can easily reduce that by only bringing in the specific categories of styling that you want. For example, say you only wanted to bring in our flexible
Now your project has an even smaller footprint! One thing to note, however, is that the minified version of files are not available directly from the package, so if using a script tag instead of a build process you will need to minify them yourself.
Additionally, you can go one step farther in customization and apply your own custom variables to a variety of settings. The available variables (and their defaults) are:
// colors;;;;;;;;;;;;// base sizes;;;;;;;;;;;;;;;;;;;;;// spacing;;;;;;;;// responsive sizes;;;;;;;;;;;;
If you wish to override any of these variables, there are one of two ways you can do it.
The easiest way to override the variables is to create a separate file to set the variables you want to override:
and then import the scss files you want from the package:
Note that this is also an easy way to bring in only the scss files you need:
If using node-sass as part of your build process, you can provide global variables into the sass config and they will be respected by
bolster. Add a string with the various variables to your
data property in the
config file while compiling:
sassConfig:data: '$xl-size: 1800;'
Styles are set to be as low-specificity as possible, which allows for easy overrides in your own custom styling. No longer will you need to manually trace back the selector for
.nav.navbar ul > li > ul > li:first-child or anything ... a majority of the selectors in
bolster are either a single classname or for the element itself, which means adding a single classname will override it (assuming you place
bolster as the first CSS file imported).
Classname usage for CSS libraries is common, but
bolster tries to minimize the noise from "class stuffing" as much as possible. This means elements have default styling (
<table>, etc.), and that classnames are simple for context-based styling (for example,
primary class is all that is needed to make a
<button> styled as a primary button).
The element styling in particular can rub developers the wrong way because the "default styling of the browser is being masked". Technically this is true simply by applying `normalize.css, but the driving force behind this decision is that from a practical application perspective, the overwhelmingly-dominant use-case for using a styling library is that you don't plan to ever show the browser's default styling, instead use that library's styling for that element. As such, why make the developer's life more difficult and the DOM more cluttered than needed?
bolster has been tested on a variety of browsers, it is still very much in it's infancy and needs your help! Feel free to contribute fixes and / or enhancements so long as they follow the guiding principles:
- Modern (no IE7 hacks or anything)
- Modularity (all categories are separated into separate files that do not have interdependencies)
- Flexible (low-specificity selectors)
- Semantic (if creating default styling for an element, style the element rather than require an extra classname)
To contribute, clone the repo and
npm i to get the dependencies. npm scripts available:
build-docs=> Compiles the application in
DEV_ONLYand places the output JS file in the
compile-sass=> Compiles the SCSS files into CSS files in the
cssfolder, as well as complete files in
compile-with-docs=> runs the
dev=> runs the webpack dev server for the playground
lint=> runs ESLint against files in the
prepublish=> if in publish, runs