Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Understanding Bootstrap

Hi a all,

I've been having a lot of fun with the CSS Frameworks course in the last few days., particularly with Bootstrap which has been my focus. Thanks to Treehouse, I feel like I have a good understanding of what Bootstrap is and how to use it.

But I have a few questions about how it is compiled and deployed if I may,

  1. When I click for a download of my customised Bootstrap theme, it seems to give me 2 versions of Bootstrap on CSS. Bootstrap and Bootstrap-theme. Is one of the default version of Bootstrap deployed along with my version?

  2. Bootstrap seems to be presented according to component type, e.g. typography, colour etc, Above each setting is something like this, .@gray-darker in the color section.

Is this just another way of specifying the class name you need to select the style?

Also in @gray-darker there seems to be value of lighten(#000, 13.5%). What does this mean? Can this be substituted for a standard rga or hexadecimial value?

Thanks

4 Answers

Yoram Barzilai
Yoram Barzilai
4,357 Points
Yoram Barzilai
Yoram Barzilai
4,357 Points

not an answer, but in which track did you findCSS Frameworks?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It's not in a track. You'll find it in the library as a CSS project.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

A track is just a list of courses in a specific order. Those are just the major courses on Treehouse there are a lot of others you cna think of as electives.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

So to answer your questions

1) Bootstrap.css is going to be your custom bootstrap download, ready to go. This file is required for bootstrap to work. Bootstrap-theme.css is an additional theme that makes bootstrap "less-flat", meaning it adds back in some texture, highlights, gradients, etc. It would be loaded after your bootstrap file, and would override these elements. Any example of what the bootstrap-theme.css file does is here. http://getbootstrap.com/examples/theme/

2) .@gray-darker is not a way to set class names. Bootstrap was built on the CSS Processor LESS http://lesscss.org/. What .@gray-darker actually is, is a variable. It comes with a default value. In this case it would be lighten(#000, 13.5%). You can override this value by putting in your own rga or hexadecimal color value. So when you put in your own value, Bootstrap compiles it's boostrap.less file with all of these functions, mixins, and variables into vanilla CSS, which is what you actually get. Less and Sass both have built in functions. One is this "lighten(#000, 13.5%)" function you saw. Basically when Less compiles, it takes the color pure black, and lightens it by 13.5%, producing a hex value color the browser can understand. This function is very useful in using one dominate color, and than quickly and easily creating shades of that color by percentages, instead of having to calculate the hex value the hard way.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Thanks Kevin I think I understand now. :)

Is there a list somewhere of the (many) different class attributes in bootstrap or is it all on the website. My main point was does @gray-darker become .gray-darker to work on your page?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

The short answer to does @grey-darker become .gray-darker to work with on a page is no.

The boostrap documentation http://getbootstrap.com/getting-started/ has everything you'll need, including class names that can be used.

@gray-darker is LESS variable. In this case it is a variable that holds a color. Either a color you define, or by default it holds the color function lighten(#000, 13.5%).

When you download bootstrap, you get the compiled version. It's just vanilla CSS. When the LESS version of boostrap runs through the LESS compiler, variables like @gray-darker become a CSS value. The LESS compiler also turns lighten(#000, 13.5%) into the hex color #222.

There is no way to create custom class names in bootstrap, even if you download a customized version. The class names never change. Just don't confused LESS variables with the compiled CSS version.

If you wanted to assign boostrap values to custom classes, you can by using either LESS or Sass and extending the boostrap class to a custom class. Since bootstrap was written in LESS, it's a little easier to do. But it's certainly possible with Sass.

Here are some examples.

Using LESS variables. http://codepen.io/kevink/pen/GKmDi

Extending bootstrap classes with LESS http://codepen.io/kevink/pen/lsvcw

Extending boostrap classes with Sass http://codepen.io/kevink/pen/FAnKf

Does that help at all?