This is a collection of patterns that repeat across different projects and base styles that I have to set across most projects. This file is as an example of how to use some of the features and also how they render by default. It is also used for testing purposes.
Ignore style rules applied directly to elements, background colors and borders, and any other style that is defined outside default.css file, they are used to display elements structure while avoiding to create new classes that aren't part of default.css.
This file shares a few features, techniques and "philosophy" present on HTML5 Boilerplate, OOCSS, Blueprint CSS and many other CSS frameworks... some of them are pure coincidence, others are heavily inspired or even copied... - techniques borrowed from other people (and that aren't common knowledge) are credited on the source code.
This is a work in progress. Some techniques may not be recommended on specific scenarios. Make sure you understand how to use those classes properly and avoid using non-semantic markup whenever possible, some of the styles should be used only on very specific cases (.small, .big, .em, .b, .del, ...), use only if the display style isn't directly related with the semantic value.
[.big] Integer posuere lorem eu sem gravida porttitor euismod ipsum tempor. Sed viverra est vel ante mattis sagittis. Praesent in sapien tellus, ac fringilla ligula.
[p] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et massa id dui viverra tincidunt. Maecenas ornare urna imperdiet lacus consectetur sed dictum magna pharetra. In interdum luctus facilisis. Fusce vehicula tempor odio, ut accumsan tortor pharetra eu. Duis quis nunc ut sapien interdum tempus volutpat in nisl. Fusce sit amet nulla in ante rutrum bibendum. Aenean porttitor pharetra rutrum. Suspendisse lacinia scelerisque ligula quis varius. Sed in sem sem, ac porta elit. Sed eu nisi a nibh imperdiet fringilla eget sit amet urna. Cras porta mi ac lacus ultricies vulputate. Nullam egestas, nulla sed commodo varius, odio nulla bibendum nisi, nec pretium nisi nisl id massa. Suspendisse potenti. Sed id vehicula neque. Suspendisse lacinia venenatis dolor ut pretium. Aenean ultrices eros non mi adipiscing vel condimentum urna convallis. Donec volutpat fringilla lectus ac scelerisque. Aenean porta ante in est gravida faucibus. Ut vel ante non metus iaculis rutrum et ac magna. Cras ligula ante, ultricies at venenatis et, mattis non odio.
[.small] Quisque iaculis malesuada vestibulum. Pellentesque sit amet porttitor enim. Proin cursus elementum facilisis. Integer posuere lorem eu sem gravida porttitor euismod ipsum tempor. Sed viverra est vel ante mattis sagittis. Praesent in sapien tellus, ac fringilla ligula.
[.em] Nam ultrices, felis viverra porta vehicula, ligula quam sodales ligula, ut dignissim nibh libero eu nisi.
[.b] Donec id felis nec lectus sodales lobortis vel et odio.
[.del] Nulla vel quam dui, non posuere erat. Mauris pharetra dictum congue. Phasellus a ullamcorper erat. Nam justo est, accumsan sed bibendum in, pulvinar sit amet odio.
[.tlower] Nulla vel quam dui, non posuere erat. Mauris pharetra dictum congue. Phasellus a ullamcorper erat. Nam justo est, accumsan sed bibendum in, pulvinar sit amet odio.
[.tupper] Nulla vel quam dui, non posuere erat. Mauris pharetra dictum congue. Phasellus a ullamcorper erat. Nam justo est, accumsan sed bibendum in, pulvinar sit amet odio.
[.tcenter] Nulla vel quam dui, non posuere erat. Mauris pharetra dictum congue. Phasellus a ullamcorper erat. Nam justo est, accumsan sed bibendum in, pulvinar sit amet odio.
[.tleft] Nulla vel quam dui, non posuere erat. Mauris pharetra dictum congue. Phasellus a ullamcorper erat. Nam justo est, accumsan sed bibendum in, pulvinar sit amet odio.
[.tright] Nulla vel quam dui, non posuere erat. Mauris pharetra dictum congue. Phasellus a ullamcorper erat. Nam justo est, accumsan sed bibendum in, pulvinar sit amet odio.
Classes .h1-.h6 should be used only on header elements. It can help you keep proper semantic while changing visual style.
#BADA55!
*Width of centered element is required.
*Height of external container (.vcenter) is required.
Grid is basically a column system with a gutter between columns.
The default.css file comes with two grid presets that should be used as implementation reference. Column sizes and gutter should be tweaked to match actual design.
The class .gridholder when used together with .clearfix removes the need of adding classes like: .row, .alpha, .omega, .last, .first, etc. Rows are created automatically based on the gridholder and grid columns width.
The classes .grid-[n] can be used as a sizing unit for non-column items. Those classes doesn't contain any default margin/gutter.
The class .fgridholder when used together with .clearfix removes the need of adding classes like: .row, .alpha, .omega, .last, .first, etc. Rows are created automatically based on the gridholder and grid columns width.
It is important to note that fluid grid classes doesn't match same sizes when used outside .fgridholder. So they can't be used on a reliable way ourside .fgridholder - that happens because of negative margin on .fgridholder, it also wouldn't be reliable since width and gutter are relative to the parent element so .fgrid-[n] will always have different sizes if parent elements have different sizes... nesting may not work as expected because of that.