kobipana / bootstrap-sass-directional Goto Github PK

bootstrap-sass-directional is a directionalized (right-to-left (rtl) or left-to-right (ltr)) Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

It is simply made by introducing $dir variable (with 'rtl' as default or 'ltr' value) into code-generated asset files of Bootstrap for Sass.

Currently used version of Bootstrap for Sass or Bootstrap is v3.4.1.

• Bower.
• npm / Node.js.

$ bower install bootstrap-sass-directional

$ npm install bootstrap-sass-directional

See upstream project Bootstrap for Sass for more information.

By default all of Bootstrap is imported.

You can also import components explicitly. To start with a full list of modules copy _bootstrap.scss file into your assets as _bootstrap-custom.scss. Then comment out components you do not want from _bootstrap-custom. In the application Sass file, replace @import 'bootstrap' with:

@import 'bootstrap-custom';

bootstrap-sass requires minimum Sass number precision of 8 (default is 5).

Precision can be set by --precision NUMBER_OF_DIGITS option of sass command, or precision option of node-sass.

Bootstrap requires the use of Autoprefixer. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.

To match upstream Bootstrap's level of browser compatibility, set Autoprefixer's browsers option to:

[
  "Android 2.3",
  "Android >= 4",
  "Chrome >= 20",
  "Firefox >= 24",
  "Explorer >= 8",
  "iOS >= 6",
  "Opera >= 12",
  "Safari >= 6"
]

assets/javascripts/bootstrap.js contains all of Bootstrap's JavaScript, concatenated in the correct order.

You can also load individual modules, provided you also require any dependencies. You can check dependencies in the Bootstrap JS documentation.

//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown

The fonts are referenced as:

"#{$icon-font-path}#{$icon-font-name}.eot"

$icon-font-path defaults to bootstrap/ if asset path helpers are used, and ../fonts/bootstrap/ otherwise.

Import Bootstrap into a Sass file (for example, application.scss) to get all of Bootstrap's styles, mixins and variables!

@import "bootstrap";

You can also include optional Bootstrap theme:

@import "bootstrap/theme";

The full list of Bootstrap variables can be found here. You can override these by simply redefining the variable before the @import directive, e.g.:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Special thanks to both bootstrap contributors and Bootstrap for Sass contributors.

Also Thanks Tyson Matanich for his useful Directional-SCSS Sass functions and mixins.