Skip to content
Less Rails Bootstrap Test Project
Ruby JavaScript
Find file
Pull request Compare This branch is even with metaskills:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Less Rails Bootstrap Test Project

Simple integration test project for both less-rails and the less-rails-bootstrap gems.

The Setup

The Gemfile for this project has the latest less-rails and less-rails-bootstrap versions specified. It also has optional environment variables so you can specify a source path to a local checkout of each project.

You can run rake assets:precompile to make sure all the stylesheets and javascript manifest files are generated too for production use. The test suite files have their own names, remember that you have to set config.assets.precompile in production.rb like so to make this happen. I have already done this here though.

config.assets.precompile += [

CSS Tests Suites

A review of our basic CSS test cases and different ways to use less-rails and less-rails-bootstrap.

Basic Bootstrap


Does not get any more simple, require the entire bootstrap code. This does not give you access to any of the variables or mixins, just a final processed file.

 *= require twitter/bootstrap

Basic Less Bootstrap


Requires a Less file which uses an @import to to bring in bootstrap.

 *= require basic_less/index

Unlike using a sprockets manifest, this gives you access to the variables and mixins in the basic_less/index.css.less files.

@import "twitter/bootstrap";

#foo {

Full Control & Customization


This is the end all method for any "I need..." type of request. That could include customizing variables, mixins to anything else. Honestly. Just like the Less method above your main asset manifest requires a delegate Less file.

 *= require full_control/index

However, in the full control method it is up to you to duplicate the imports of the main bootstrap.less file found in the less-rails-bootstrap gem. If you look at the full_control/index.css.less file you will see something like this.

@import "twitter/bootstrap/reset";
@import "twitter/bootstrap/variables";
@import "full_control/variables";                 // Your own variable overrides.
@import "twitter/bootstrap/mixins";
@import "full_control/mixins";                    // Your own mixin.
@import "twitter/bootstrap/scaffolding";

Notice how that file imports the entire bootstrap files and your own in a few key spots? This is how you override things. The full_control/variables.less sets the @linkColor to #121212 and it works. You can aso build out your own framework on top of bootstrap using this simple structure too. The possibilities are endless.

Something went wrong with that request. Please try again.