Transcript
Page 1: CSS pattern libraries

PATTERN LIBRARIES

CSSPATTERN

LIBRARIES

Page 2: CSS pattern libraries

Whois this guy?

Page 3: CSS pattern libraries

Began in the web in 1995Full CSS sites in 2002 Skills: UX, front-end dev, trainingRecently: CSS pattern libraries

Page 4: CSS pattern libraries

I have helped develop HTML/CSS pattern libraries for very large sites (media and university sites) and complex applications (banking applications).

Page 5: CSS pattern libraries

In some cases, there are literally hundreds of CSS, SCSS or LESS files to review and optimise as part of the process.

Page 6: CSS pattern libraries

pages

Moving away from

Page 7: CSS pattern libraries

A few years ago, many front end developers approached websites and web applications as a series of “pages”.

Page 8: CSS pattern libraries

Pages were often designed and built as complete entities. This meant that page components were often closely tied to their relevant pages.

Page 9: CSS pattern libraries

More recently, the focus has shifted from full page layouts to re-usable components.

Page 10: CSS pattern libraries

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.

Page 11: CSS pattern libraries

pattern libraries HTML/CSS

Page 12: CSS pattern libraries

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.

Page 13: CSS pattern libraries

The terms “style guide” and “pattern library” are often used interchangeably.

Page 14: CSS pattern libraries

A style guide is a set of standards for implementing the overall design, and can include corporate branding, color schemes, layout and more.

Page 15: CSS pattern libraries

Style guides are used to ensure uniformity of the design or “brand” across all aspects of the website or application.

Page 16: CSS pattern libraries

On the other hand, HTML/CSS pattern libraries generally document code components for all aspects of the website or application.

Page 17: CSS pattern libraries

On larger web projects, style guides and HTML/CSS pattern libraries are generally separate entities.

Page 18: CSS pattern libraries

For smaller web projects, style guides and pattern libraries are often combined into one overall entity.

Page 19: CSS pattern libraries

cons?

Pros and

Page 20: CSS pattern libraries

Why use a pattern library at all?!

Easier to build sitesEasier to maintain sitesEasier to hand overBetter workflowShared vocabularyPromotes consistency

Page 21: CSS pattern libraries

What are the downsides?!

Time-consuming to writeOften done post-projectServe current need only

Page 22: CSS pattern libraries

Pre-existingpattern libraries

Page 23: CSS pattern libraries

There are a wide range of pre-existing pattern libraries available today.

Page 24: CSS pattern libraries

Some of these pattern libraries have a simple purpose - such as responsive grid systems.

Page 25: CSS pattern libraries

Grid-based CSS libraries

1140 CSS Grid Mueller Grid System

Responsive Grid SystemResponsive Grid System

Less Framework960 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

Page 26: CSS pattern libraries

Others are considered full “frameworks” that offer a wide range of components.

Page 27: CSS pattern libraries

These can include:!

Reset stylesGrid systemsTypography stylesBrowser fixesCommon user-interface component styles

Page 28: CSS pattern libraries

Complex CSS libraries

BootstrapFoundation

SkeletonYAML

InuitKraken

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/krakenhttp://gumbyframework.com/

Page 29: CSS pattern libraries

There are some great benefits to using an existing framework:!

ready-to-use solutioncan pick & choose componentseasy implementationquick prototyping great for teams

Page 30: CSS pattern libraries

There may also be some downsides:!

may not suit your projectno need for a complex librarysomeone else’s conventions generic look

Page 31: CSS pattern libraries

Bootstrap

Page 32: CSS pattern libraries

Bootstrap vs. mid-range website

Page 33: CSS pattern libraries

Bootstrap vs. University data site

Page 34: CSS pattern libraries

Bootstrap vs. Banking application

Page 35: CSS pattern libraries

Should you use a pre-existing framework? It depends on the needs of the site and your team. There is no one answer.

Page 36: CSS pattern libraries

Assuming you want to create your own CSS pattern library, how do you go about it?

Page 37: CSS pattern libraries

abstractionUnderstanding

Page 38: CSS pattern libraries

Abstraction is essential to any CSS pattern library.

Page 39: CSS pattern libraries

The process involves:!

looking for components that may be repeated within the layoutdefining their characteristics creating HTML/CSS patterns for them

1. !

2. 3.

Page 40: CSS pattern libraries

An example: coloured boxes

Page 41: CSS pattern libraries
Page 42: CSS pattern libraries
Page 43: CSS pattern libraries

These boxes look like they have similar characteristics. If they were resolved into a pattern, this would make our HTML and CSS more efficient.

Page 44: CSS pattern libraries

What are the key things to keep in mind when creating any pattern?

Page 45: CSS pattern libraries

Avoid using IDs

Page 46: CSS pattern libraries

All patterns needs to be class-based so they can appear as many times as needed within an HTML document.

Page 47: CSS pattern libraries

/* avoid */!#signup-box { }!

Page 48: CSS pattern libraries

Avoid naming based on content

Page 49: CSS pattern libraries

We should avoid naming patterns based on the content, as we want to reuse these patterns often within the layout.

Page 50: CSS pattern libraries

/* avoid */!.signup { }!.member { }!.member-news { }!.wiki { }!.support { }!.database { }!!/* preferred */!.box { }

Page 51: CSS pattern libraries

Avoid location-based styles

Page 52: CSS pattern libraries

All patterns should work regardless of where they’re placed within the layout.

Page 53: CSS pattern libraries

/* avoid */!.sidebar .box { }!.main .box { }!!/* preferred */!.box { }

Page 54: CSS pattern libraries

Avoid widths

Page 55: CSS pattern libraries

Ideally, patterns should avoid defining widths. Patterns should be allowed to spread to the width of any parent container.

Page 56: CSS pattern libraries

/* avoid */!.box-wide { width: 500px; }!.box-medium { width: 240px; }!.box-small { width: 120px; }!!/* preferred */!.box { /* no width defined */ }

Page 57: CSS pattern libraries

Keep patterns as simple as possible

Page 58: CSS pattern libraries

Patterns should be defined as simply as possible. Otherwise they can become restrictive.

Page 59: CSS pattern libraries

.box!{!! border-bottom: 5px solid #C8C8C8;!! background-color: #e6e6e6;!! /* may not be suitable */!! margin-bottom: 1em;!}

Page 60: CSS pattern libraries

Don’t undo

Page 61: CSS pattern libraries

Patterns should not be written to undo other rules. For example, the <h3> element:

Page 62: CSS pattern libraries
Page 63: CSS pattern libraries

We could be tempted to style the <h3> element with a coloured background - as it looks like this is the “default” appearance for all <h3> elements.

Page 64: CSS pattern libraries

/* default style */!h3!{!! padding: 1em;!! color: white;!! background-color: red;!}

Page 65: CSS pattern libraries

But what happens if we needed to use an <h3> element later, and it doesn’t have a background-color? We might have to write a rule to undo our previous one.

Page 66: CSS pattern libraries

/* default style */!h3!{!! padding: 1em;!! color: white;!! background-color: red;!}!!/* undoing default style */!.no-background !{!! padding: 0;!! color: #000;!! background-color: none;!}!

Page 67: CSS pattern libraries

It is best to avoid over-styling elements or patterns so that they do not have to be undone later.

Page 68: CSS pattern libraries

/* default style */!h3!{!}!!/* only when background needed */!.class-name!{!! padding: 1em;!! color: white;!! background-color: red;!}!

Page 69: CSS pattern libraries

Avoid dependency on HTML structure

Page 70: CSS pattern libraries

Patterns should not rely on the HTML structure. What happens if the structure changes in some instances - like a different heading level being used?

Page 71: CSS pattern libraries

<div class="box">!! <h3></h3>!<div>!!<div class="box">!! <h4></h4>!<div>!!!/* avoid if possible */!.box h3, .box h4!{!! padding: 10px; !! background-color: orange; !}!!

Page 72: CSS pattern libraries

It is always better to create a class-based pattern for any specific styling needs.

Page 73: CSS pattern libraries

<div class="box">!! <h3 class="box-heading"></h3>!<div>!!<div class="box">!! <h4 class="box-heading"></h4>!<div>!!!/* preferred */!.box-heading!{!! padding: 10px; !! background-color: orange; !}!

Page 74: CSS pattern libraries

Modules,modifiers & descendants

Page 75: CSS pattern libraries

How can we let developers know that our new class called “box-heading” relates to the “box” class?

Page 76: CSS pattern libraries

<div class="box">!! <h3 class="box-heading"></h3>!<div>!

Page 77: CSS pattern libraries

We could use a naming convention that was originally defined as part of BEM:!http://bem.info/

Page 78: CSS pattern libraries

And then extended by Nicolas Gallagher:!http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Page 79: CSS pattern libraries

And then modified slightly again by Harry Roberts:!http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Page 80: CSS pattern libraries

This naming convention is based on the idea that page layouts can be broken down into a series of re-usable “modules”.

Page 81: CSS pattern libraries

If a module needs to be modified or extended, a “module modifier” would be used.

Page 82: CSS pattern libraries

If a module has child elements that need to be styled, a “module descendant” could be used.

Page 83: CSS pattern libraries

These different types of class names need to be relatable and recognisable.

Page 84: CSS pattern libraries

/* Module */!.module-name {}!!/* Module modifier*/!.module-name--modifier-name {}!!/* Module descendant*/!.module-name__descendant-name {}!!/* Module descendant modifier*/!.module-name__descendant--modifier {}!

Page 85: CSS pattern libraries

<!-- Module -->!<div class="box"></div>!!<!-- Module modifier -->!<div class="box box--alt"></div>!!<!-- Module descendant -->!<div class="box">!! <h3 class="box__heading"></h3>!</div>!!<!-- Module descendant modifier -->!<div class="box">!! <h3 class="box__content box__content--alt"></h3>!</div>!

Page 86: CSS pattern libraries

Module descendants

Page 87: CSS pattern libraries

With this naming convention, we can now add two “module descendants” to our HTML markup:

Page 88: CSS pattern libraries

<!-- Module -->!<div class="box">!!! <!-- Module descendant -->!! <h3 class="box__heading"></h3>!!! <!-- Module descendant -->!! <div class="box__content"></div>!</div>!

Page 89: CSS pattern libraries

.box!{!! margin-bottom: 1em;!! border-bottom: 5px solid #C8C8C8;!! background-color: #e6e6e6;!}!!.box__heading!{!! margin: 0;!! padding: 10px 15px;!! text-transform: uppercase;!}!!.box__content { margin: 15px; }!

Page 90: CSS pattern libraries

Module modifiers

Page 91: CSS pattern libraries

But what about the boxes that are very similar, but have some unique characteristics - like the decorative cog image?

Page 92: CSS pattern libraries
Page 93: CSS pattern libraries

If we needed to modify or extend the original module, we would create a modifier class name.

Page 94: CSS pattern libraries

<!-- Module modifier -->!<div class="box box--alt">!! <h3 class="box__heading"></h3>!! <div class="box__content"></div>!</div>!

Page 95: CSS pattern libraries

However, in this case, we need to modify the “box__content” class. We need to create a “module descendant modifier”.

Page 96: CSS pattern libraries

<!-- Module modifier -->!<div class="box">!! <h3 class="box__heading"></h3>!! <div class="box__content box__content—cog"></div>!</div>!

Page 97: CSS pattern libraries

.box__content--cog!{!! padding-right: 100px;!! background-image: url(cog.png);!! background-repeat: no-repeat;!! background-position: 100% 0;!}!

Page 98: CSS pattern libraries

Helperclasses

Page 99: CSS pattern libraries

In one of the boxes, there is a piece of text that is aligned to the right. How do we solve this?

Page 100: CSS pattern libraries
Page 101: CSS pattern libraries

We could make it another module descendant - and apply this to the link.

Page 102: CSS pattern libraries

.box__link {}!!!!<div class="box">!! <h3 class="box__heading"></h3>!! <div class="box__content">!! ! <p class="box__link"></p>!! </div>!</div>!!

Page 103: CSS pattern libraries

Or we could use a different type of class, called a “helper” or “utility” class.

Page 104: CSS pattern libraries

Nicolas Gallagher’s SUIT CSS includes a set of classes called “utilities”.!https://github.com/suitcss/suit

Page 105: CSS pattern libraries

/* Utility classes */!.u-utilityName {}!!!<!-- example markup --> !<article class="Tweet">!! <a class="u-floatRight"></a>!! <div class="u-sizeFill">!! ! <a class="u-linkComplex"></a>!! </div>!</article>!

Page 106: CSS pattern libraries

Bootstrap also uses these types of classes, but calls them “helper” classes.!http://getbootstrap.com/css/#helper-classes

Page 107: CSS pattern libraries

/* Utility classes */!.text-muted { color: #777; } !.text-primary { color: #428bca; }!.text-success { color: #3c763d; }!!!<!-- example markup --> !<p class="text-muted">...</p>!<p class="text-primary">...</p>!<p class="text-success">...</p>

Page 108: CSS pattern libraries

These types of classes are designed to be added to elements where needed, without having to resort to styling elements individually.

Page 109: CSS pattern libraries

/* Helper classes */!.h-text-right { text-align: right; }!!!!!<!-- example markup --> !<p class="h-text-right">!! <a href="#">More</a>!</p>!

Page 110: CSS pattern libraries

For front-end developers who grew up in the “keep your markup clean” era, these classes could be considered the work of Satan.

Page 111: CSS pattern libraries

I’ve found them to be invaluable - when you need to add a single function to an element without having to create a specific class.

Page 112: CSS pattern libraries

Theme classes

Page 113: CSS pattern libraries

In 2011, Jonathan Snook introduced SMACSS. One of the key principles is to categorise CSS rules into five different categories.!https://smacss.com/

Page 114: CSS pattern libraries

Base - HTML elementsLayout - gridsModule - reusable componentsState - states of modules etcTheme - theming modules etc

Page 115: CSS pattern libraries

These categories are a great way to break up huge chunks of CSS rules into manageable sections.

Page 116: CSS pattern libraries

We could use one of these categories - theme styles - to define the background-colors on our headings.

Page 117: CSS pattern libraries
Page 118: CSS pattern libraries

<h3 class="box__heading bgcolor-red"></h3>!<h3 class="box__heading bgcolor-blue"></h3>!<h3 class="box__heading bgcolor-orange"></h3>!<h4 class="box__heading bgcolor-grey"></h4>!

Page 119: CSS pattern libraries

.bgcolor-red, .bgcolor-blue, .bgcolor-orange, .bgcolor-grey { color: #fff; }!!.bgcolor-red !{ background-color: #B21F24; }!!.bgcolor-blue !{ background-color: #1D5980; }!!.bgcolor-orange !{ background-color: #C56F00; }!!.bgcolor-grey !{ background-color: #444445; }

Page 120: CSS pattern libraries

TipsPattern library

Page 121: CSS pattern libraries

Here are some tips on the overall approach to CSS pattern libraries.

Page 122: CSS pattern libraries

Smallest to largest

Page 123: CSS pattern libraries

In mid 2013, Brad Frost introduced Atomic Design - a methodology for creating design systems with five distinct levels in atomic design.!http://bradfrostweb.com/blog/post/atomic-web-design/

Page 124: CSS pattern libraries

Atoms - HTML elementsMolecules - groups of atomsOrganisms - groups of moleculesTemplates - groups of organismsPages - instances of templates

Page 125: CSS pattern libraries

Atomic design defines the process as starting from smallest components and building to largest.

Page 126: CSS pattern libraries

Ideally, large components should not need to be defined in a pattern library as they should be build up, like lego, from smaller components.

Page 127: CSS pattern libraries

Class names

Page 128: CSS pattern libraries

Establish a class naming convention as early as possible in the process. Then document this convention and enforce it!

Page 129: CSS pattern libraries

Intuitive class names

Page 130: CSS pattern libraries

Make sure any class naming convention is easy for others to follow. I have worked on projects where teams are constantly changing, so quick take-up is critical.

Page 131: CSS pattern libraries

Keep it simple

Page 132: CSS pattern libraries

I’ve worked on projects where the LESS architecture needs to be mapped out in spreadsheets in order for teams to understand. In almost all cases, this was unnecessary. Keep it as simple as possible.

Page 133: CSS pattern libraries

Finalthoughts?

Page 134: CSS pattern libraries

Bottom line: HTML/CSS pattern libraries are an important tool for anyone doing CSS today no matter how large or small your website. Get out there and get busy!

Page 135: CSS pattern libraries

Russ WeakleyMax Design!Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley


Top Related