bootstrap-classmixer v1.0.6
Bootstrap Mixer
This is addition to bootstrap, includes mixing classes and easy way to style blocks. It helps to improve using repetitive styles.
Instalation
npm install bootstrap-classmixer or bower install bootstrap-classmixer
Compiling sources
Installing Koala (github project), or Download sass compiler:
Windows Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast. The installer will also install a Ruby command line powershell application that will let you use the Ruby libraries.
Then open prompt console(
Win+R > cmd.exe
) and install ssas.gem install sass
Linux If you're using a distribution of Linux, you'll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm. Then
sudo gem install sass
After that compile sources: see sass documentation
sass --watch bootstrap-classmixer.scss:bootstrap-classmixer.css --style compressed
Using and information
padding-left-50
-> added padding-left 50 pixels;
padding-left-50pr
-> added padding-left 50 procent;
padding-left-50vw
-> added padding-left 50 vw;
<div class="padding-top-50 background-color-black">
Example text
</div>
You may use multi screens classes: lg-*
, md-*
, sm-*
, xs-*
<div class="lg-padding-top-150 md-padding-top-100 sm-padding-top-50 xs-padding-top-0">
Example text
</div>
Using default web colors:
<div class="lg-color-red md-color-silver sm-color-pink xs-color-black">
Example text
</div>
Using font size:
<div class="lg-font-26pt md-font-23pt sm-font-18 xs-font-16">
Example text
</div>
Full example
<div class="row">
<div class="col-xs-12">
<div class="lg-padding-top-30 lg-padding-bottom-30 xs-padding-0">
Example Padding top (large window: top/bottom 30px, other 0px)
</div>
</div>
<div class="col-xs-12">
<div class="lg-color-black md-color-gay sm-color-silver xs-color-white sm-backgroun-white xs-background-black">
Example color styling
</div>
</div>
<div class="lg-font-28pt md-font-26pt sm-font-22pt xs-font-18pt">
Font size styling
</div>
</div>