reactive-bootstrap

Yet Another Twitter SAss bootsTRAP


Keywords
bootstrap, sass
License
Apache-2.0
Install
bower install reactive-bootstrap

Documentation

YATSATRAP!

Yet Another Twitter SAss bootsTRAP

(yeah, i know...)

This is a stripped down fork of thomas-mcdonald/bootstrap-sass, without all the rails/compass install/build/integration superbloated toolkit. Just plain SASS and JS.

Version

3.0.2

Semver tags map to actual Twitter Bootstrap versions. Custom suffixes may appear for maintenance.

Installation and usage

You can clone/download the repo or use Bower

bower install yatsatrap

The CSS

Just simple as:

@import path/to/yatsatrap/sass/bootstrap

The Javascript

The js sources are provided uncompressed, both in the single file js/bootstrap-full.js and divided by component. You can delve into using only some components, but you'll have to deal with dependencies by yourself (see the official docs).

For reference, here is the order by which the components are loaded in the single file:

  • bootstrap-transition.js
  • bootstrap-alert.js
  • bootstrap-button.js
  • bootstrap-carousel.js
  • bootstrap-collapse.js
  • bootstrap-dropdown.js
  • bootstrap-modal.js
  • bootstrap-tooltip.js
  • bootstrap-popover.js
  • bootstrap-scrollspy.js
  • bootstrap-tab.js
  • bootstrap-affix.js

ZF2 AssetManager

Since my whole aim for this package is to use minimal sources with my asset manager of choice, here is a snippet that provides some basic configuration for RWOverdijk/AssetManager

return [
    'asset_manager' => [
        'resolver_configs' => [
            'collections' => [
                'css/bootstrap.css' [
                    'sass/bootstrap.scss',
                ],
                'js/bootstrap.js' => [
                    'js/bootstrap-transition.js',
                    'js/bootstrap-alert.js',
                    'js/bootstrap-button.js',
                    'js/bootstrap-carousel.js',
                    'js/bootstrap-collapse.js',
                    'js/bootstrap-dropdown.js',
                    'js/bootstrap-modal.js',
                    'js/bootstrap-tooltip.js',
                    'js/bootstrap-popover.js',
                    'js/bootstrap-scrollspy.js',
                    'js/bootstrap-tab.js',
                    'js/bootstrap-affix.js',
                ],
            ],
            'paths' => [
                'path/to/yatsatrap',
            ],
        ],
        'filters' => [
            'css/bootstrap.css' => [
                [ 'filter' => 'ScssFilter' ],
            ],
            'js/bootstrap.js' => [
                [ 'filter' => 'UglifyJs2' ]
            ],
        ],
    ],
];

Your mileage may of course vary.

Customize

You can override variables by redefining them before the @import directive.

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

@import "path/to/yatsatrap/sass/bootstrap";