CSS pattern libraries, and important tool for any front end web developer
Text of CSS pattern libraries
PATTERN LIBRARIES CSSPATTERN LIBRARIES
Who is this guy?
Began in the web in 1995 Full CSS sites in 2002 Skills: UX,
front-end dev, training Recently: CSS pattern libraries
I have helped develop HTML/ CSS pattern libraries for very
large sites (media and university sites) and complex applications
In some cases, there are literally hundreds of CSS, SCSS or
LESS les to review and optimise as part of the process.
pages Moving away from
A few years ago, many front end developers approached websites
and web applications as a series of pages.
Pages were often designed and built as complete entities. This
meant that page components were often closely tied to their
More recently, the focus has shifted from full page layouts to
A re-usable component could be a layout grid structure, a
button, an input, a drop-down, a menu, a heading, a table, or even
pattern libraries HTML/CSS
HTML/CSS pattern libraries are used to resolve commonly used
interface components. These components are created as HTML and CSS
code and documented, so that they can be easily re-used as
The terms style guide and pattern library are often used
A style guide is a set of standards for implementing the
overall design, and can include corporate branding, color schemes,
layout and more.
Style guides are used to ensure uniformity of the design or
brand across all aspects of the website or application.
On the other hand, HTML/CSS pattern libraries generally
document code components for all aspects of the website or
On larger web projects, style guides and HTML/CSS pattern
libraries are generally separate entities.
For smaller web projects, style guides and pattern libraries
are often combined into one overall entity.
cons? Pros and
Why use a pattern library at all? ! Easier to build sites
Easier to maintain sites Easier to hand over Better workow Shared
vocabulary Promotes consistency
What are the downsides? ! Time-consuming to write Often done
post-project Serve current need only
Pre-existing pattern libraries
There are a wide range of pre-existing pattern libraries
Some of these pattern libraries have a simple purpose - such as
responsive grid systems.
Grid-based CSS libraries 1140 CSS Grid Mueller Grid System
Responsive Grid System Responsive Grid System Less Framework 960
Grid System Susy 320 and up http://cssgrid.net/
http://lessframework.com/ http://960.gs/ http://susy.oddbird.net/
Others are considered full frameworks that oer a wide range of
These can include: ! Reset styles Grid systems Typography
styles Browser xes Common user-interface component styles