Twitter Bootstrap
Is a responsive design framework. Somewhere between a canned CMS and a site built from raw CSS.
Install Emmet (optional)
Examples
ExpoBootstrap Sites noticed by developers of bootstrap.
In Class
Build a Contact Page Simple
- Work through steps.txt
- Work through steps2.txt
Then if you can
Build a More Complete Contact Page
Built with LESS
Competitors
- Zurb Foundation
- Built with SASS
Pros
-
Some of the work is already done for you.
-
Customizable
Doesn't NEED to look like all the other sites that use bootstrap.
-
Mobile first approach. Think about design on small devices, phones.
-
No more sprite icons. Could not scale up or change color of sprites. Because they are built with raster images.
Replaced by vector icons that can scale up fonts. Because they are with vector images.
-
Good Browser Support Need some hack to get I.E 8 to work otherwise works on I.E 9 and above.
Cons
-
Code "bloat"
More code that if this was developed for one app using custom CSS/HTML/JS.
-
Built with LESS
Rails uses SASS/SCSS by default. But, there is a gem that works around this problem.
Downloads
###Avoid customization in the download.
Will have to remember all the choices in this version if you have get a more recent version.
Only need the css, fonts and js directories.
You will get the minified and plain files.
Fonts
Series of icons you can use. All vector based, as opposed to raster based.
Javascript.
Bootstrap javascript depends on JQuery. Add jquery to the bottom of the body, the footer. This will make sure that the HTML is loaded before the javascript.
Add bootstrap.js after jquery
Basic Template
Grid
- 12 column grid
- 4 sizes, extra small
- extra small (col-xs) < 768 pixels
- small (col-sm) >= 768 pixels
- medium (col-md) >= 992 pixels
- large (col-lg) >= 1200px