I read bootstrap’s 3 code and here I will factor out some of the main concepts that I have found at their stylesheet(css).
I read their stylesheet for educational purposes, and because after all I don’t like overriding their sheet, or have 200 classes that I will never use for my projects. I also don’t like including their js files, and it seems that many css classes have connections with the js code.
By reading bootstrap’s code for the first time I narrowed down the code from 6 thousand lines to 1.5 thousand. And here’s the most interesting teqniques they use:
Normalazation
At the beginning they normalize html elements in order to be consistent across browser differences. Here are some normalazation the make:
Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Remove margins in all browsers
body {
margin: 0;
}
Correct the font size and margin on h1 elements within section and article contexts in Chrome, Firefox, and Safari.
h1 {
margin: .67em 0;
font-size: 2em;
}
Some very basic stuff
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Setting defaults on typography:
/*Why font-size changes? html font-size is for the html title element?*/
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
They give default font-size to all header(h1-h6) elements, they fix links (<a> element), and they style many more html elements that I never use(so I deleted all these selectors).
They also have a print media query for printing your webpages more smoothly.
GRID
And then comes the grid part. They use 3 media queries for the sm,md,lg classes and before them is the default xs class.
//.container-fluid has always 100% width
//default xs classes go here
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Both .container and .container-fluid classes have these styles attached:
.container-fluid,
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
The rows have these rules so the margin of the outer rows matches with the padding of the containers and the fit correctly :
.row {
margin-right: -15px;
margin-left: -15px;
}
All the containers and rows have also clearings:
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after{
display: table;
content: " ";
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
All columnus have these styles so they don’t clear themselves and to fit correctly with the outer rows:
.col-*{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
}
And finally here are the grid column-related classes. Each column has 4 classes. For example:
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
I usually keep these classes but If you don’t want the offsets for example you can easially remove 4*12 classes or 144 lines of code!
I also deleted all the classes associated whith js(carousels, tooltips, alerts etc) these are hundrends and hundrends of lines all of which I can implement by myself and you should to whith a little practice(and jquery!).
What code should I keep?
This question should be answered according to your skills and your needs. Don’t delete code you’ll find usefull later! But, wait a minute, you can go back and grab the code excerpt whenever you like!
I usually keep:
The normalized elements that I need. And them maybe make some changes.
The grid classes.
The form associated classes.
The visibility hidden classes which I find usefull.
The prind media query, if is printable content.
referances
Bootstrap’s official site