New CSS Goodness; Skeleton, Normalize, Gridless
Posted by Dion Almaer about a year ago on css
A web developer walked into a bar. But quickly left when he saw the table layout. #RimShot
We had YUI grids, and then 960 and friends…. but we seem to have a new burst of activity around CSS frameworks in various shapes and forms. Here are some that have tickled my fancy:
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles:
- Responsive Grid Down To Mobile: Skeleton has a familiar, lightweight 960 grid as it’s base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait).
- Fast to Start: Skeleton is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.
- Style Agnostic: Skeleton is not a UI framework. It’s a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.
Normalize.css is a customizable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
What does it do?
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle improvements.
- Explains what code does using detailed comments.
Gridless is an awesome HTML5 and CSS3 framework for making responsive, cross-browser websites with beautiful typography. Gridless has a simple approach on markup and styles. There aren’t any pre-made grid systems and the CSS isn’t littered with silly classes. Gridless is only a starting point, that should be edited to suit each project’s needs.
Features
- Responsive (responds to the user’s device screen width with the adequate CSS)
- Progressive enhancement and mobile first
- Cross-browser compatible (even IE6 and 7)
- CSS normalization instead of CSS reset
- Beautiful typography with a vertical rhythm
- Print styles optimized for performance
- Optimal caching
- HTML5 and CSS3 ready
- Safe CSS hacks instead of conditional classnames/stylesheets
- Micro clearfix hack
- A well-organized folder structure
What CSS frameworks are tickling your fance?