Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 applicatio...
In some cases, there are literally
hundreds of CSS, SCSS or
LESS files 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
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
ev...
pattern libraries
HTML/CSS
HTML/CSS pattern libraries are
used to resolve commonly used
interface components. These
components are created as
HTML an...
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...
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
applica...
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 workflow
...
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
...
Others are considered full
“frameworks” that offer a wide
range of components.
These can include:

!
Reset styles

Grid systems

Typography styles

Browser fixes

Common user-interface
component styles
Complex CSS libraries
Bootstrap

Foundation

Skeleton

YAML

Inuit

Kraken

GumbyFramework

http://twitter.github.com/boot...
There are some great benefits to
using an existing framework:

!
ready-to-use solution

can pick & choose components

easy ...
There may also be some
downsides:

!
may not suit your project

no need for a complex library

someone else’s conventions
...
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

defining their characteristics
crea...
An example:
coloured boxes
These boxes look like they have
similar characteristics. If they
were resolved into a pattern,
this would make our HTML an...
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 they’re
placed within the layout.
/* avoid */!
.sidebar .box { }!
.main .box { }!
!
/* preferred */!
.box { }
Avoid widths
Ideally, patterns should avoid
defining 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 */!
...
Keep patterns as
simple as possible
Patterns should be defined as
simply as possible. Otherwise
they can become restrictive.
.box!
{!
! border-bottom: 5px solid #C8C8C8;!
! background-color: #e6e6e6;!
! /* may not be suitable */!
! margin-bottom: ...
Don’t undo
Patterns should not be written
to undo other rules. For
example, the <h3> element:
We could be tempted to style
the <h3> element with a
coloured background - as it
looks like this is the “default”
appearan...
/* default style */!
h3!
{!
! padding: 1em;!
! color: white;!
! background-color: red;!
}
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...
/* default style */!
h3!
{!
! padding: 1em;!
! color: white;!
! background-color: red;!
}!
!
/* undoing default style */!
...
It is best to avoid over-styling
elements or patterns so that
they do not have to be undone
later.
/* default style */!
h3!
{!
}!
!
/* only when background needed */!
.class-name!
{!
! padding: 1em;!
! color: white;!
! ba...
Avoid dependency
on HTML structure
Patterns should not rely on the
HTML structure. What happens
if the structure changes in some
instances - like a different
...
<div class="box">!
! <h3></h3>!
<div>!
!
<div class="box">!
! <h4></h4>!
<div>!
!
!
/* avoid if possible */!
.box h3, .box...
It is always better to create a
class-based pattern for any
specific styling needs.
<div class="box">!
! <h3 class="box-heading"></h3>!
<div>!
!
<div class="box">!
! <h4 class="box-heading"></h4>!
<div>!
!
...
Modules,
modifiers & descendants
How can we let developers
know that our new class called
“box-heading” relates to the
“box” class?
<div class="box">!
! <h3 class="box-heading"></h3>!
<div>!
We could use a naming
convention that was originally
defined as part of BEM:

!
http://bem.info/
And then extended by Nicolas
Gallagher:

!
http://nicolasgallagher.com/about-html-semantics-
front-end-architecture/
And then modified slightly
again by Harry Roberts:

!
http://csswizardry.com/2013/01/mindbemding-
getting-your-head-round-b...
This naming convention is based
on the idea that page layouts
can be broken down into a
series of re-usable “modules”.
If a module needs to be modified
or extended, a “module
modifier” would be used.
If a module has child elements
that need to be styled, a
“module descendant” could be
used.
These different types of class
names need to be relatable and
recognisable.
/* Module */!
.module-name {}!
!
/* Module modifier*/!
.module-name--modifier-name {}!
!
/* Module descendant*/!
.module-n...
<!-- Module -->!
<div class="box"></div>!
!
<!-- Module modifier -->!
<div class="box box--alt"></div>!
!
<!-- Module desc...
Module
descendants
With this naming convention, we
can now add two “module
descendants” to our HTML
markup:
<!-- Module -->!
<div class="box">!
!
! <!-- Module descendant -->!
! <h3 class="box__heading"></h3>!
!
! <!-- Module desc...
.box!
{!
! margin-bottom: 1em;!
! border-bottom: 5px solid #C8C8C8;!
! background-color: #e6e6e6;!
}!
!
.box__heading!
{!
...
Module modifiers
But what about the boxes that
are very similar, but have some
unique characteristics - like the
decorative cog image?
If we needed to modify or extend
the original module, we would
create a modifier class name.
<!-- Module modifier -->!
<div class="box box--alt">!
! <h3 class="box__heading"></h3>!
! <div class="box__content"></div>...
However, in this case, we need
to modify the “box__content”
class. We need to create a
“module descendant
modifier”.
<!-- Module modifier -->!
<div class="box">!
! <h3 class="box__heading"></h3>!
! <div class="box__content box__content
—co...
.box__content--cog!
{!
! padding-right: 100px;!
! background-image: url(cog.png);!
! background-repeat: no-repeat;!
! back...
Helper
classes
In one of the boxes, there is a
piece of text that is aligned to
the right. How do we solve this?
We could make it another
module descendant - and
apply this to the link.
.box__link {}!
!
!
!
<div class="box">!
! <h3 class="box__heading"></h3>!
! <div class="box__content">!
! ! <p class="box_...
Or we could use a different type
of class, called a “helper” or
“utility” class.
Nicolas Gallagher’s SUIT CSS
includes a set of classes called
“utilities”.

!
https://github.com/suitcss/suit
/* Utility classes */!
.u-utilityName {}!
!
!
<!-- example markup --> !
<article class="Tweet">!
! <a class="u-floatRight"...
Bootstrap also uses these types
of classes, but calls them
“helper” classes.

!
http://getbootstrap.com/css/#helper-classes
/* Utility classes */!
.text-muted { color: #777; } !
.text-primary { color: #428bca; }!
.text-success { color: #3c763d; }...
These types of classes are
designed to be added to
elements where needed,
without having to resort to
styling elements ind...
/* Helper classes */!
.h-text-right { text-align: right; }!
!
!
!
!
<!-- example markup --> !
<p class="h-text-right">!
! ...
For front-end developers who
grew up in the “keep your
markup clean” era, these
classes could be considered
the work of Sa...
I’ve found them to be invaluable
- when you need to add a single
function to an element without
having to create a specific...
Theme classes
In 2011, Jonathan Snook
introduced SMACSS. One of the
key principles is to categorise
CSS rules into five different
categori...
Base - HTML elements

Layout - grids

Module - reusable components

State - states of modules etc

Theme - theming modules...
These categories are a great way
to break up huge chunks of
CSS rules into manageable
sections.
We could use one of these
categories - theme styles - to
define the background-colors
on our headings.
<h3 class="box__heading bgcolor-red"></h3>!
<h3 class="box__heading bgcolor-blue"></h3>!
<h3 class="box__heading bgcolor-o...
.bgcolor-red, .bgcolor-blue, .bgcolor-
orange, .bgcolor-grey { color: #fff; }!
!
.bgcolor-red !
{ background-color: #B21F2...
Tips
Pattern library
Here are some tips on the
overall approach to CSS pattern
libraries.
Smallest to largest
In mid 2013, Brad Frost
introduced Atomic Design - a
methodology for creating design
systems with five distinct levels
in a...
Atoms - HTML elements

Molecules - groups of atoms

Organisms - groups of molecules

Templates - groups of organisms

Page...
Atomic design defines the
process as starting from
smallest components and
building to largest.
Ideally, large components should
not need to be defined in a
pattern library as they should
be build up, like lego, from
sm...
Class names
Establish a class naming
convention as early as possible
in the process. Then document
this convention and enforce it!
Intuitive class
names
Make sure any class naming
convention is easy for others to
follow. I have worked on
projects where teams are
constantly c...
Keep it simple
I’ve worked on projects where
the LESS architecture needs to
be mapped out in spreadsheets
in order for teams to understan...
Final
thoughts?
Bottom line:
HTML/CSS pattern libraries are
an important tool for anyone
doing CSS today no matter how
large or small your...
Russ Weakley

Max Design

!
Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesi...
/* Utility classes */! .u-utilityName
/* Utility classes */! .u-utilityName
/* Utility classes */! .u-utilityName
/* Utility classes */! .u-utilityName
/* Utility classes */! .u-utilityName
/* Utility classes */! .u-utilityName
Nächste SlideShare
Wird geladen in …5
×

von

CSS pattern libraries Slide 1 CSS pattern libraries Slide 2 CSS pattern libraries Slide 3 CSS pattern libraries Slide 4 CSS pattern libraries Slide 5 CSS pattern libraries Slide 6 CSS pattern libraries Slide 7 CSS pattern libraries Slide 8 CSS pattern libraries Slide 9 CSS pattern libraries Slide 10 CSS pattern libraries Slide 11 CSS pattern libraries Slide 12 CSS pattern libraries Slide 13 CSS pattern libraries Slide 14 CSS pattern libraries Slide 15 CSS pattern libraries Slide 16 CSS pattern libraries Slide 17 CSS pattern libraries Slide 18 CSS pattern libraries Slide 19 CSS pattern libraries Slide 20 CSS pattern libraries Slide 21 CSS pattern libraries Slide 22 CSS pattern libraries Slide 23 CSS pattern libraries Slide 24 CSS pattern libraries Slide 25 CSS pattern libraries Slide 26 CSS pattern libraries Slide 27 CSS pattern libraries Slide 28 CSS pattern libraries Slide 29 CSS pattern libraries Slide 30 CSS pattern libraries Slide 31 CSS pattern libraries Slide 32 CSS pattern libraries Slide 33 CSS pattern libraries Slide 34 CSS pattern libraries Slide 35 CSS pattern libraries Slide 36 CSS pattern libraries Slide 37 CSS pattern libraries Slide 38 CSS pattern libraries Slide 39 CSS pattern libraries Slide 40 CSS pattern libraries Slide 41 CSS pattern libraries Slide 42 CSS pattern libraries Slide 43 CSS pattern libraries Slide 44 CSS pattern libraries Slide 45 CSS pattern libraries Slide 46 CSS pattern libraries Slide 47 CSS pattern libraries Slide 48 CSS pattern libraries Slide 49 CSS pattern libraries Slide 50 CSS pattern libraries Slide 51 CSS pattern libraries Slide 52 CSS pattern libraries Slide 53 CSS pattern libraries Slide 54 CSS pattern libraries Slide 55 CSS pattern libraries Slide 56 CSS pattern libraries Slide 57 CSS pattern libraries Slide 58 CSS pattern libraries Slide 59 CSS pattern libraries Slide 60 CSS pattern libraries Slide 61 CSS pattern libraries Slide 62 CSS pattern libraries Slide 63 CSS pattern libraries Slide 64 CSS pattern libraries Slide 65 CSS pattern libraries Slide 66 CSS pattern libraries Slide 67 CSS pattern libraries Slide 68 CSS pattern libraries Slide 69 CSS pattern libraries Slide 70 CSS pattern libraries Slide 71 CSS pattern libraries Slide 72 CSS pattern libraries Slide 73 CSS pattern libraries Slide 74 CSS pattern libraries Slide 75 CSS pattern libraries Slide 76 CSS pattern libraries Slide 77 CSS pattern libraries Slide 78 CSS pattern libraries Slide 79 CSS pattern libraries Slide 80 CSS pattern libraries Slide 81 CSS pattern libraries Slide 82 CSS pattern libraries Slide 83 CSS pattern libraries Slide 84 CSS pattern libraries Slide 85 CSS pattern libraries Slide 86 CSS pattern libraries Slide 87 CSS pattern libraries Slide 88 CSS pattern libraries Slide 89 CSS pattern libraries Slide 90 CSS pattern libraries Slide 91 CSS pattern libraries Slide 92 CSS pattern libraries Slide 93 CSS pattern libraries Slide 94 CSS pattern libraries Slide 95 CSS pattern libraries Slide 96 CSS pattern libraries Slide 97 CSS pattern libraries Slide 98 CSS pattern libraries Slide 99 CSS pattern libraries Slide 100 CSS pattern libraries Slide 101 CSS pattern libraries Slide 102 CSS pattern libraries Slide 103 CSS pattern libraries Slide 104 CSS pattern libraries Slide 105 CSS pattern libraries Slide 106 CSS pattern libraries Slide 107 CSS pattern libraries Slide 108 CSS pattern libraries Slide 109 CSS pattern libraries Slide 110 CSS pattern libraries Slide 111 CSS pattern libraries Slide 112 CSS pattern libraries Slide 113 CSS pattern libraries Slide 114 CSS pattern libraries Slide 115 CSS pattern libraries Slide 116 CSS pattern libraries Slide 117 CSS pattern libraries Slide 118 CSS pattern libraries Slide 119 CSS pattern libraries Slide 120 CSS pattern libraries Slide 121 CSS pattern libraries Slide 122 CSS pattern libraries Slide 123 CSS pattern libraries Slide 124 CSS pattern libraries Slide 125 CSS pattern libraries Slide 126 CSS pattern libraries Slide 127 CSS pattern libraries Slide 128 CSS pattern libraries Slide 129 CSS pattern libraries Slide 130 CSS pattern libraries Slide 131 CSS pattern libraries Slide 132 CSS pattern libraries Slide 133 CSS pattern libraries Slide 134 CSS pattern libraries Slide 135
Nächste SlideShare
Atomic design
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

75 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

/* Utility classes */! .u-utilityName CSS pattern libraries

Herunterladen, um offline zu lesen

/* 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>!

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • BrandiHernandez7

    Nov. 23, 2021
  • SnehalJapkar

    Sep. 4, 2021
  • GabrielHenrique613

    Jul. 26, 2021
  • liuliufor

    Jul. 28, 2018
  • StephaneDenis

    May. 14, 2018
  • 62kyaw

    Feb. 18, 2018
  • JeanPhilippePAPILLON

    Dec. 25, 2016
  • williammdavis

    Dec. 3, 2016
  • AlexMaday

    Aug. 5, 2016
  • MdMahafuzurRahaman

    Jun. 21, 2016
  • AshrafChu

    Jun. 6, 2016
  • owthamanrooben

    May. 11, 2016
  • jason2506

    Mar. 22, 2016
  • Spiralogy

    Mar. 8, 2016
  • ThatGuyCND

    Mar. 4, 2016
  • wistone

    Mar. 1, 2016
  • jeffhuangus

    Feb. 9, 2016
  • fawzywassel

    Feb. 1, 2016
  • moobok

    Dec. 8, 2015
  • DmitryOvchinnikov2

    Oct. 10, 2015

/* 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>!

Aufrufe

Aufrufe insgesamt

78.388

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

2.664

Befehle

Downloads

248

Geteilt

0

Kommentare

0

Likes

75

×