css pattern libraries
Post on 17-Aug-2014
5.810 views
Embed Size (px)
DESCRIPTION
CSS pattern libraries, and important tool for any front end web developerTRANSCRIPT
- 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