Moved OOCSS from using plain CSS and HTML to Sass and Handlebars
Folder structure changes
src
Contains all the source files that are needed to build the components and the library
- Components are now in
components
. Files that are related to the components are kept within their own component folder. - Handlebars that are needed to create the component library are in
docs
- Elements that needed to be included across multiple pages (e.g. header, footer) are in
includes
- 3rd party libraries such as HTML5 Shiv are in
libs
- Template for the library is in
template
start
Contains files for starting and stopping Vagrant
tools
Contains scripts that are needed to build the library
CSS changes
Base
- Using normalize CSS
Media block
.img
is now.mediaImg
imgExt
is nowmediaImgExt
Grid
- Instead of 2, 3, 4 and 5 columns, it is now by default 12 columns
- Added first try of responsive grid
Heading
- Now grouped heading component under typography
Template
- Added
.container
for centering the page - Removed column classes
Module
- Changed to "Box" component.
New components
Box head and box foot
- Used as part of the box component
Divider
- Just a
hr
Form
- Form structure and form elements
Icon
- Using Compass to generate icon sprite
- Some classes to control spacing between icon and element next to it
Link
- Just the link styles :)
List
- Bunch of list styles: ordered list, bullet list, inline list, inline list with divider, list with horizontal divider
- Added list spacing classes
Media inline
- Media block but inline
Utils
- Various mixin:
- Various clearfix methods
- Inline block fix for IE7
- Font size mixin for converting px to rem
- Various functions:
- Convert px to em
- Various utilty classes
- Classes for hiding text and elements
- Classes for aligning text