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