Expand-o-matic

A mobile-first CSS grid framework based on Skeleton and Foundation

Expand-o-matic is based on two wonderful CSS responsive grid systems, namely Skeleton and the mobile-first version of Foundation. It is also much simpler (or more basic, if you prefer) and consequentially may have less of a learning curve. Based on a mobile-first responsive grid, you should be able to quickly develop websites that look beautiful at any size and on any device.

Preview page: http://cr0ybot.github.com/Expand-o-matic

The CSS Files

base.css

Contains base styles applied site-wide.

• CSS Reset: Uses Normalize.css
• Basic Styles: Default font, color, background
• Typography: Heading fonts, blockquotes, and a handy hyphenate class
• Links: Yup, links
• Lists: Some nested list styling
• Images: Scale images with the grid
• Buttons: Ready-made button styles
• Forms: Ready-made form styles
• Misc: Handy classes for floating, aligning text, and adding/removing margins

grid.css

Contains grid definitions (based on Foundation) and Nicholas Gallagher's Micro Clearfix Hack.

• Mobile-First Base
• Larger than 480 (481 -> 768)
• Larger than 768 (769 -> 1024)
• Larger than 1024 (1025 -> ?)
• Clearing

styles.css

Contains your custom styles!

• Base Styles: Styles that apply to all devices or are overridden by the next section
• Media Queries: "Standard" width breakpoints (320, 480, 768, 1024) - You are encouraged to create new breakpoints based on where your design breaks when you resize the window
• Font-Face: @font-face definitions