Week 2 Day 3

Box-sizing: Border-box

Border-box is an alternative to the normal box model. Instead of calculating an element’s total width as the sum of the width, padding, and border properties, the total width is always equal to the width property and any border or padding are subtracted from the width property.

To read about this please go to the CSS page

Google Fonts and Web Fonts

Google Fonts are a collection of about (at the time of this writing) 700 fonts that Google has made available for designers to use on their websites. Google Fonts is also a tool for selecting those fonts.

Basically, to use Google’s fonts, a designer can select the fonts they want and place them in a ‘collection’. That collection is then available through a remote css file. The remote file serves the font to a site so that the fonts can be used to style text.

Reset.css

Reset.css is designed to remove all of the default styling from browsers. This wipes out margins, padding and font sizing on all typographic elements, as well as sets many of the HTML5 elements to block level elements. This can mean that default styling takes a bit more work, but you won’t spend as much time trying to figure out how the browser is jacking your layout.

A complete description can be found at Eric Meyers’ website.

Normalize.css

Normalize.css is a CSS library that attempts to make all browsers behave as similarly as possible. Unlike reset.css, normalize doesn’t just wipe out all the default browser styles and leave all of the default styling to the site author. Instead, normalize fixes browser inconsistencies and implements sensible defaults that work everywhere.

Published by

giodif

I am the UI Design Instructor at The Iron Yard Academy in Columbia. I am also the Creative Director for UnmatchedStyle.com, ConvergeSE, BD Conf, and SOCO.