Css Calc

So, I'm angry that I didn't know about this until now.

Check this out.

If you are using SASS or LESS, you can simply do this to make your grid:

.col-5 {
    width: calc((100% / 12) * 5);
}

.col-7 {
    width: calc((100% / 12) * 7);
}
    

That will create the proper calculation for your percentage based grid.

Also...did you realize there was a unit of measurement called "vw" that means "view-width"!?!

.css-12 {
    width: 100vw;
}
        

See? "vw" doesn't give a damn about your containing div! "vw" will do what you TELL it to do! It's 100% the width of the view, man!

A really good example of what you can do with this, is break an image out of the container where it lives! (as seen here: calc() lets you do some real CSS magic)

img.bigImg {
    max-width:100vw;
    margin: 0 calc(-50vw + 50%);
}

And even better? this is all just CSS. It's not LESS or SASS. It's just...CSS.

---