CSS Review

Today is Sunday, a bit of a slower day...didn't get off the floor too quick, watched some videos about CSS and mainly reviewing the Bootstrap framework for CSS.


Honestly I did not even know what a bootstrap really was until I saw this image, I always thought it was like boot ties to keep the boots tighter on the feet? Anyways there you go a bootstraps is for putting the boots on the feet, I don't have boots like this so that's my best guess.

Obv start with importing the bootstrap framework in the html or you can reference it, frankly I like loading it from source, however I haven't really thought about if their site goes down my site will lose all the CSS, which can be bad.

Here is some of the take away I got from reviewing...

1. ".container" class is sweet

container class will responsively add margins, center and wrap our content
container-fluid allow for stretching on larger screens(I like this one...the most)

2. using grid offsets

col-md-offset-1, a better way to add offset not using just an empty offset

Responsive grid-ing
Using the xs is cool but make sure it looks good in all different kind of devices
md is for laptops
sm is for tablets
xs is for phones

3. position-ing

In term of positioning
an element with absolute position is still fixed to it's parent element
so a relative element can have an absolute element inside of it, and that element is still relative to it's parent.

What you need to watch out for is that when the page is width is resized you will have to deal with the absolute position not playing nice, and moving. For me I just hide it with col when the size changes to a sm or xs

4. use the free stuff bootstrap give you

.well .well-lg
adds some more styling to the text

.btn .btn-lg
with these button styles it's a quick and easy way to add button styling

very easy to apply to the divs and add the style nice and easy

5. some stuff only works as well as you might want...

Navigation doesn't rely on grid
.navbar-nav .navbar-left
styles the navigation text

but the issue is that it does the navigation bar in it's own way I needed to over write some of the stuff it is doing and force it to make it function the way I wanted to, which can be a pain in the rear.

Overall Bootstrap still the way to go when CSS and until I review SASS I won't be posting too much of CSS stuff, I like to hack on the CSS until it works...




Comments

Popular posts from this blog

Hash Table