metaskills / less-rails-bootstrap-test Goto Github PK

Less Rails Bootstrap Test Project

Ruby 96.63% JavaScript 3.37%

less-rails-bootstrap-test's Introduction

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 += [
  'basic.css', 
  'basic_less.css',
  'full_control.css'
]

CSS Tests Suites

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

Basic Bootstrap

http://localhost:3000/assets/basic.css

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

http://localhost:3000/assets/basic_less.css

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 {
  .border-radius(4px);
}

Full Control & Customization

http://localhost:3000/assets/full_control.css

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.

less-rails-bootstrap-test's People

Contributors

Stargazers

Watchers

Forkers

hkelsey jjp bbhoss awesome wuhaof117 narutosanjiv bertomartin mikerobinson ryno1234 beneddy bigblue digideskio

less-rails-bootstrap-test's Issues

rake precompile doesn't include bootstrap javascript (or css) with rails 3.1.3

I checked out current master, changed the Gemfile to use rails 3.1.3 (to match my project), removed Gemfile.lock and reran bundle install. Then I ran "rails server" and did wget http://localhost:3000/assets/applicaiton.js to see it generate the code and download the file. All good.

Then I ran a "rake assets:precompile" (I had to comment out the css changes in environments/production.rb first due to n error, 'twitter/bootstrap/labels.less' wasn't found. ) and I compared the generated application.js to the compiled version. Surprisingly they were not the same.

-rw-rw-r--. 1 warlord warlord 341469 Oct 24 14:21 /tmp/application.js
-rw-rw-r--. 1 warlord warlord 125513 Oct 24 14:21 public/assets/application.js

The public/assets/application.js is missing all the twitter/bootstrap javascript. I can upload the two files if you want to see them, or uploading a diff if you prefer?

overriding variables in full_control does not change anything

Hi,

I have try full_control and don't understand how it should works.
If I override @linkColor, color of Bootstrap links does not change. Same issue with with @baseFontSize ...

Is there a special config?

Here is my variables.less

// test color
@textColor: #F00;
@linkColor: #00FF00;
@grayDark:              #EEE333;
@baseFontSize:          2px;

.foo {color: @linkColor; font-size: @baseFontSize;}

And here is the generated CSS :

.foo {
    color: #0088CC;
    font-size: 14px;
}

.container-fluid not loading/available

Updated to the latest version, but still can't find styles for '.container-fluid' which is part of new bootstrap 3.1.1.

Question

I'm sure there is no issue but I'm struggling with following your full index example. I've updated my project based on everything in your test example (including the precompile piece). Question though, should your full control file be added manually or is this something that should be generated? I'm a noob so I apologize if I've missed the obvious.

I also get a dns error trying to click this link under the Full Control and Customization section.
http://less-rails-bootstrap-test.dev/assets/full_control.css

Thanks so much in advance!
Dan

Using bootstrap variables in variables.less breaks precompile

Using bootstrap variables in variables.less breaks rake assets:precompile

To test, change app/assets/stylesheets/full_control/variables.less to:

@linkColor: @grayDarker;

metaskills / less-rails-bootstrap-test Goto Github PK

less-rails-bootstrap-test's Introduction

Less Rails Bootstrap Test Project

The Setup

CSS Tests Suites

Basic Bootstrap

Basic Less Bootstrap

Full Control & Customization

less-rails-bootstrap-test's People

Contributors

Stargazers

Watchers

Forkers

less-rails-bootstrap-test's Issues

Recommend Projects

Recommend Topics

Recommend Org