CSS Frameworks:Faster Layout, Consistent Results

by Steve Hong (@st3v3hong)Senior Web DeveloperCrossComm, Inc.

http://slideshare.net/stevehong/

Benefits.

•Developers don't need to learn CSS layout techniques.

•CSS resets provide a common foundation across browsers.

•Prototyping and site production can be faster with pre-made solutions.

•Common standards and documentation allow others to pick up your work later.

Drawbacks.

•There is a learning curve before you see productivity gains.

•Sometimes they contribute to code bloat.

•Designers may have to be on board to use grid systems and common widths.

•They mix presentation and content with non-semantic class names.

CSS frameworks for resetting browsers.

YUI.

•yhoo.it/yui3framework

•"YUI 3 is Yahoo!'s next-generation JavaScript and CSS library. It powers the new Yahoo! homepage and incorporates what we've learned in five years of dedicated library development."

Tripoli.

•bit.ly/tripolicss

•"Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects."

SenCSs.

•bit.ly/sencss

•"SenCSs... doesn't include a layout system littered with silly classes and pre-set grids... SenCSs does everything else: baseline, fonts, paddings, margins... All the stuff that's almost the same in every project..."

Elements.

•bit.ly/elementscss

•"Elements is a collection of folders and files that help you work faster. It was made to fit into your exsisting workflow, or be its own workflow. From client files to design to code to getting out on the web"

CSS frameworks for layout.

960gs.

•bit.ly/960gs

•The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Blueprint.

•bit.ly/blueprintcss

•"Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing."

YUI grids.

•yhoo.it/yui2grids

•"The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations."

CSS frameworks for specific needs.

Formy.

•bit.ly/formycss

•“Formy is CSS Framework for better form management. [Formy is] universal CSS for forms who will interact in the simple natural way with HTML form and HTML form will work decently well even without CSS."

Hartija CSS Print.

•bit.ly/hartijacss

•"I decided to make universal Cascading Style Sheets for web printing by uniting all best CSS printing practises into one."

CSS Drop-Down Menu.

•bit.ly/cssdropdownmenu

•"Modular, with themes. Easily deployable. Easily transformable. Cross browser. Javascript only for IE. Super fast. Continuous development. iPhone OS [compatible]."

Contact me.

•Steve Hong, Senior Web Developer, CrossComm

•contact@stevehong.com

•linkedin.com/in/stevehong

•www.crosscomm.net

•@st3v3hong

Find this online.

•SlideShare: 

•http://slideshare.net/stevehong/