css pattern libraries

Download CSS pattern libraries

Post on 17-Aug-2014

5.786 views

Category:

Engineering

2 download

Embed Size (px)

DESCRIPTION

CSS pattern libraries, and important tool for any front end web developer

TRANSCRIPT

  • 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 (banking 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 relevant pages.
  • More recently, the focus has shifted from full page layouts to re-usable components.
  • 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 a pullquote.
  • 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 needed.
  • The terms style guide and pattern library are often used interchangeably.
  • 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 application.
  • 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 available today.
  • 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://www.muellergridsystem.com/ http://www.responsivegridsystem.com/ http://responsive.gs/ http://lessframework.com/ http://960.gs/ http://susy.oddbird.net/ https://github.com/malarkey/320andup
  • Others are considered full frameworks that oer a wide range of components.
  • These can include: ! Reset styles Grid systems Typography styles Browser xes Common user-interface component styles
  • Complex CSS libraries Bootstrap Foundation Skeleton YAML Inuit Kraken GumbyFramework http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://www.getskeleton.com/ http://www.yaml.de/ https://github.com/csswizardry/inuit.css/ https://github.com/cferdinandi/kraken http://gumbyframework.com/
  • There are some great benets to using an existing framework: ! ready-to-use solution can pick & choose components easy implementation quick prototyping great for teams
  • There may also be some downsides: ! may not suit your project no need for a complex library someone elses conventions generic look
  • Bootstrap
  • Bootstrap vs. mid-range website
  • Bootstrap vs. University data site
  • Bootstrap vs. Banking application
  • Should you use a pre-existing framework? It depends on the needs of the site and your team. There is no one answer.
  • Assuming you want to create your own CSS pattern library, how do you go about it?
  • abstraction Understanding
  • Abstraction is essential to any CSS pattern library.
  • The process involves: ! looking for components that may be repeated within the layout dening their characteristics creating HTML/CSS patterns for them 1. ! 2. 3.
  • An example: coloured boxes
  • These boxes look like they have similar characteristics. If they were resolved into a pattern, this would make our HTML and CSS more ecient.
  • What are the key things to keep in mind when creating any pattern?
  • Avoid using IDs
  • All patterns needs to be class- based so they can appear as many times as needed within an HTML document.
  • /* avoid */! #signup-box { }!
  • Avoid naming based on content
  • We should avoid naming patterns based on the content, as we want to reuse these patterns often within the layout.
  • /* avoid */! .signup { }! .member { }! .member-news { }! .wiki { }! .support { }! .database { }! ! /* preferred */! .box { }
  • Avoid location- based styles
  • All patterns should work regardless of where theyre placed within the layout.
  • /* avoid */! .sidebar .box { }! .main .box { }! ! /* preferred */! .box { }
  • Avoid widths
  • Ideally, patterns should avoid dening widths. Patterns should be allowed to spread to the width of any parent container.
  • /* avoid */! .box-wide { width: 500px; }! .box-medium { width: 240px; }! .box-small { width: 120px; }! ! /* preferred */! .box { /* no width defined */ }
  • Keep patterns as simple as possible
  • Patterns should be dened as simply as possible. Otherwise they can become restrictive.
  • .box! {! ! border-bottom: 5px solid #C8C8C8;! ! background-color: #e6e6e6;! ! /* may not be suitable */! ! margin-bottom: 1em;! }
  • Dont undo
  • Patterns should not be written to undo other rules. For example, the element:
  • We could be tempted to style the element with a coloured background - as it looks like this is the default appearance for all elements.
  • /* default style */! h3! {! ! padding: 1em;! ! color: white;! ! background-color: red;! }
  • But what happens

Recommended

View more >