bootstrap-shortify
v2.0.1
Published
simplify and shorify the long unclear bootstrap classes that relate to columns, offsets, pulls and pushes.
Downloads
8
Maintainers
Readme
##Bootstrap Shortify
Installation
First, install it from npm:
npm install bootstrap-shortify
Then, require it as a CommonJs module or import it in ES6 - I recommend some short names for the functions, to keep the code as clear as possible:
const _c = require('bootstrap-shortify').bColumn();
const _o = require('bootstrap-shortify').bOffset();
const _ps = require('bootstrap-shortify').bPush();
const _pl = require('bootstrap-shortify').bPull();
###Basic usage
Bootstrap shortify is designed to help you use bootstrap classes related to different media queries in a more succinct manner. Futhermore, it makes dynamic chages to the classes very easy. It is particurally useful when you use it with React.js components or while rendering html markup on the server side.
Imagine writing:
col-xs-12 col-sm-12 col-md-6 col-lg-6
A bit long and confusing, isn't it?
How about:
_c(12,12,6,6)
The function _c
takes four number or string arguments _c(xs, sm, md, lg)
and returnes related bootstrap classes.
You can also use one argument that is an array:
var arr = [12,12,6,6]
console.log( _c(arr) );
Or an object:
var obj = {xs:12, sm:12, md: 6, lg: 6}
console.log( _c(obj) );
You can mix string and number arguments:
console.log( _c([12,"12",6,"6"]) );
###Default values
You can add default values while requireing the module like so:
_c = require(bootstrap-shortify).bColumn(12,12,6,6);
Now, if you use _c()
with no arguments, by default, it will return col-xs-12 col-sm-12 col-md-6 col-lg-6
If you don't specify the default values bootstrap-shortify will assume that they are all 12 for columns, and all 0 for push, pull and offset.
###Omitting Classes
To omit a class for one of the viewports simply put 0 as its value, like so:
_c(12,0,0,6);
It wil produce:
col-xs-12 col-lg-6