SlideShare une entreprise Scribd logo
1  sur  135
Télécharger pour lire hors ligne
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 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
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 workflow

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 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/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 benefits 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 else’s 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

defining their characteristics
creating HTML/CSS patterns
for them
1.
!
2.
3.
An example:
coloured boxes
CSS pattern libraries
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.
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 */!
.box { /* no width defined */ }
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: 1em;!
}
Don’t undo
Patterns should not be written
to undo other rules. For
example, the <h3> element:
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.
/* 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 a rule to undo our
previous one.
/* default style */!
h3!
{!
! padding: 1em;!
! color: white;!
! background-color: red;!
}!
!
/* undoing default style */!
.no-background !
{!
! padding: 0;!
! color: #000;!
! background-color: none;!
}!
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;!
! background-color: red;!
}!
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
heading level being used?
<div class="box">!
! <h3></h3>!
<div>!
!
<div class="box">!
! <h4></h4>!
<div>!
!
!
/* avoid if possible */!
.box h3, .box h4!
{!
! padding: 10px; !
! background-color: orange; !
}!
!
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>!
!
!
/* preferred */!
.box-heading!
{!
! padding: 10px; !
! background-color: orange; !
}!
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-bem-syntax/
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-name__descendant-name {}!
!
/* Module descendant modifier*/!
.module-name__descendant--modifier {}!
<!-- 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>!
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 descendant -->!
! <div class="box__content"></div>!
</div>!
.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; }!
Module modifiers
But what about the boxes that
are very similar, but have some
unique characteristics - like the
decorative cog image?
CSS pattern libraries
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>!
</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
—cog"></div>!
</div>!
.box__content--cog!
{!
! padding-right: 100px;!
! background-image: url(cog.png);!
! background-repeat: no-repeat;!
! background-position: 100% 0;!
}!
Helper
classes
In one of the boxes, there is a
piece of text that is aligned to
the right. How do we solve this?
CSS pattern libraries
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__link"></p>!
! </div>!
</div>!
!
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"></a>!
! <div class="u-sizeFill">!
! ! <a class="u-linkComplex"></a>!
! </div>!
</article>!
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; }!
!
!
<!-- example markup --> !
<p class="text-muted">...</p>!
<p class="text-primary">...</p>!
<p class="text-success">...</p>
These types of classes are
designed to be added to
elements where needed,
without having to resort to
styling elements individually.
/* Helper classes */!
.h-text-right { text-align: right; }!
!
!
!
!
<!-- example markup --> !
<p class="h-text-right">!
! <a href="#">More</a>!
</p>!
For front-end developers who
grew up in the “keep your
markup clean” era, these
classes could be considered
the work of Satan.
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.
Theme classes
In 2011, Jonathan Snook
introduced SMACSS. One of the
key principles is to categorise
CSS rules into five different
categories.

!
https://smacss.com/
Base - HTML elements

Layout - grids

Module - reusable components

State - states of modules etc

Theme - theming modules etc
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.
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>!
.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; }
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 atomic design.

!
http://bradfrostweb.com/blog/post/atomic-web-
design/
Atoms - HTML elements

Molecules - groups of atoms

Organisms - groups of molecules

Templates - groups of organisms

Pages - instances of templates
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
smaller components.
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 changing, so quick
take-up is critical.
Keep it simple
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.
Final
thoughts?
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!
Russ Weakley

Max Design

!
Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley

Contenu connexe

Tendances

Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기영우 박
 
Estructura De Los Plc
Estructura De Los PlcEstructura De Los Plc
Estructura De Los Plcmapaskarnaugh
 
우아한 모노리스
우아한 모노리스우아한 모노리스
우아한 모노리스Arawn Park
 
REST API 설계
REST API 설계REST API 설계
REST API 설계Terry Cho
 
우아한테크세미나-우아한멀티모듈
우아한테크세미나-우아한멀티모듈우아한테크세미나-우아한멀티모듈
우아한테크세미나-우아한멀티모듈용근 권
 
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular Jalpesh Vadgama
 
The Power of Composition (NDC Oslo 2020)
The Power of Composition (NDC Oslo 2020)The Power of Composition (NDC Oslo 2020)
The Power of Composition (NDC Oslo 2020)Scott Wlaschin
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous JavascriptGarrett Welson
 
Building a Distributed Build System at Google Scale
Building a Distributed Build System at Google ScaleBuilding a Distributed Build System at Google Scale
Building a Distributed Build System at Google ScaleAysylu Greenberg
 
Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자Kyoung Up Jung
 
RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)Tracy Lee
 
Manual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-E
Manual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-EManual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-E
Manual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-EMarco Enrique Ramos Castillo
 
004 Electroneumática y Neumática: Método de cascada
004 Electroneumática y Neumática: Método de cascada 004 Electroneumática y Neumática: Método de cascada
004 Electroneumática y Neumática: Método de cascada SANTIAGO PABLO ALBERTO
 
Reitit - Clojure/North 2019
Reitit - Clojure/North 2019Reitit - Clojure/North 2019
Reitit - Clojure/North 2019Metosin Oy
 
Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?FITC
 

Tendances (20)

React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기Django admin site 커스텀하여 적극적으로 활용하기
Django admin site 커스텀하여 적극적으로 활용하기
 
Estructura De Los Plc
Estructura De Los PlcEstructura De Los Plc
Estructura De Los Plc
 
우아한 모노리스
우아한 모노리스우아한 모노리스
우아한 모노리스
 
REST API 설계
REST API 설계REST API 설계
REST API 설계
 
우아한테크세미나-우아한멀티모듈
우아한테크세미나-우아한멀티모듈우아한테크세미나-우아한멀티모듈
우아한테크세미나-우아한멀티모듈
 
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular
 
The Power of Composition (NDC Oslo 2020)
The Power of Composition (NDC Oslo 2020)The Power of Composition (NDC Oslo 2020)
The Power of Composition (NDC Oslo 2020)
 
React.js vs node.js
React.js vs node.jsReact.js vs node.js
React.js vs node.js
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
 
Building a Distributed Build System at Google Scale
Building a Distributed Build System at Google ScaleBuilding a Distributed Build System at Google Scale
Building a Distributed Build System at Google Scale
 
Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자Django로 쇼핑몰 만들자
Django로 쇼핑몰 만들자
 
RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)
 
Manual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-E
Manual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-EManual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-E
Manual de Practica Rslogix5000 para Programadores Nivel I _ LOT-SP004A-ES-E
 
004 Electroneumática y Neumática: Método de cascada
004 Electroneumática y Neumática: Método de cascada 004 Electroneumática y Neumática: Método de cascada
004 Electroneumática y Neumática: Método de cascada
 
Reitit - Clojure/North 2019
Reitit - Clojure/North 2019Reitit - Clojure/North 2019
Reitit - Clojure/North 2019
 
Jsp java bean
Jsp   java beanJsp   java bean
Jsp java bean
 
Why TypeScript?
Why TypeScript?Why TypeScript?
Why TypeScript?
 
62999778 el-grafcet-practica-y-aplicaciones
62999778 el-grafcet-practica-y-aplicaciones62999778 el-grafcet-practica-y-aplicaciones
62999778 el-grafcet-practica-y-aplicaciones
 
Saltstack with Zabbix
Saltstack with ZabbixSaltstack with Zabbix
Saltstack with Zabbix
 

Similaire à CSS pattern libraries

Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS FrameworksMike Crabb
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
Joes sass presentation
Joes sass presentationJoes sass presentation
Joes sass presentationJoeSeckelman
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss Weakley
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)Harshita Yadav
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practicesguest3ebcca
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practicessachin9737
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceRachel Andrew
 
Advance Css
Advance CssAdvance Css
Advance Cssvijayta
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5dharshyamal
 

Similaire à CSS pattern libraries (20)

Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
Joes sass presentation
Joes sass presentationJoes sass presentation
Joes sass presentation
 
CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
CSS3
CSS3CSS3
CSS3
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
SCSS Styleguide
SCSS StyleguideSCSS Styleguide
SCSS Styleguide
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practices
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practices
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP ConferenceThe New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
 
Old Dog, New Tricks
Old Dog, New TricksOld Dog, New Tricks
Old Dog, New Tricks
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Advance Css
Advance CssAdvance Css
Advance Css
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
 

Plus de Russ Weakley

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windowsRuss Weakley
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptionsRuss Weakley
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible namesRuss Weakley
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?Russ Weakley
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI componentsRuss Weakley
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?Russ Weakley
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design SystemsRuss Weakley
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletesRuss Weakley
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loaderRuss Weakley
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryRuss Weakley
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messagesRuss Weakley
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and ErrorsRuss Weakley
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern LibrariesRuss Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Russ Weakley
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-completeRuss Weakley
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labelsRuss Weakley
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdownRuss Weakley
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 

Plus de Russ Weakley (20)

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and glory
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 

Dernier

ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchrohitcse52
 
EPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxEPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxJoseeMusabyimana
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Apollo Techno Industries Pvt Ltd
 
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Amil baba
 
Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...sahb78428
 
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdfsdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdfJulia Kaye
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsYusuf Yıldız
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....santhyamuthu1
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Amil baba
 
Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...
Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...
Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...Gaurav Singh Rajput
 
Pioneering Process Safety Management: The Future Outlook
Pioneering Process Safety Management: The Future OutlookPioneering Process Safety Management: The Future Outlook
Pioneering Process Safety Management: The Future Outlooksoginsider
 
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxSAJITHABANUS
 
Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesDIPIKA83
 
Dev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingDev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingMarian Marinov
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxwendy cai
 
GENERAL CONDITIONS FOR CONTRACTS OF CIVIL ENGINEERING WORKS
GENERAL CONDITIONS  FOR  CONTRACTS OF CIVIL ENGINEERING WORKS GENERAL CONDITIONS  FOR  CONTRACTS OF CIVIL ENGINEERING WORKS
GENERAL CONDITIONS FOR CONTRACTS OF CIVIL ENGINEERING WORKS Bahzad5
 

Dernier (20)

ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
 
EPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptxEPE3163_Hydro power stations_Unit2_Lect2.pptx
EPE3163_Hydro power stations_Unit2_Lect2.pptx
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
 
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
Popular-NO1 Kala Jadu Expert Specialist In Germany Kala Jadu Expert Specialis...
 
Lecture 4 .pdf
Lecture 4                              .pdfLecture 4                              .pdf
Lecture 4 .pdf
 
計劃趕得上變化
計劃趕得上變化計劃趕得上變化
計劃趕得上變化
 
Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...Clutches and brkesSelect any 3 position random motion out of real world and d...
Clutches and brkesSelect any 3 position random motion out of real world and d...
 
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdfsdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
sdfsadopkjpiosufoiasdoifjasldkjfl a asldkjflaskdjflkjsdsdf
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovations
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
 
Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...
Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...
Lifting Plan | Lifting Plan for Different Process Equipment | Gaurav Singh Ra...
 
Pioneering Process Safety Management: The Future Outlook
Pioneering Process Safety Management: The Future OutlookPioneering Process Safety Management: The Future Outlook
Pioneering Process Safety Management: The Future Outlook
 
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptxIT3401-WEB ESSENTIALS PRESENTATIONS.pptx
IT3401-WEB ESSENTIALS PRESENTATIONS.pptx
 
Présentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdfPrésentation IIRB 2024 Marine Cordonnier.pdf
Présentation IIRB 2024 Marine Cordonnier.pdf
 
Graphics Primitives and CG Display Devices
Graphics Primitives and CG Display DevicesGraphics Primitives and CG Display Devices
Graphics Primitives and CG Display Devices
 
Dev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingDev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & Logging
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptx
 
Lecture 2 .pptx
Lecture 2                            .pptxLecture 2                            .pptx
Lecture 2 .pptx
 
GENERAL CONDITIONS FOR CONTRACTS OF CIVIL ENGINEERING WORKS
GENERAL CONDITIONS  FOR  CONTRACTS OF CIVIL ENGINEERING WORKS GENERAL CONDITIONS  FOR  CONTRACTS OF CIVIL ENGINEERING WORKS
GENERAL CONDITIONS FOR CONTRACTS OF CIVIL ENGINEERING WORKS
 

CSS pattern libraries

  • 3. Began in the web in 1995 Full CSS sites in 2002 Skills: UX, front-end dev, training Recently: CSS pattern libraries
  • 4. I have helped develop HTML/ CSS pattern libraries for very large sites (media and university sites) and complex applications (banking applications).
  • 5. In some cases, there are literally hundreds of CSS, SCSS or LESS files to review and optimise as part of the process.
  • 7. A few years ago, many front end developers approached websites and web applications as a series of “pages”.
  • 8. Pages were often designed and built as complete entities. This meant that page components were often closely tied to their relevant pages.
  • 9. More recently, the focus has shifted from full page layouts to re-usable components.
  • 10. 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.
  • 12. 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.
  • 13. The terms “style guide” and “pattern library” are often used interchangeably.
  • 14. A style guide is a set of standards for implementing the overall design, and can include corporate branding, color schemes, layout and more.
  • 15. Style guides are used to ensure uniformity of the design or “brand” across all aspects of the website or application.
  • 16. On the other hand, HTML/CSS pattern libraries generally document code components for all aspects of the website or application.
  • 17. On larger web projects, style guides and HTML/CSS pattern libraries are generally separate entities.
  • 18. For smaller web projects, style guides and pattern libraries are often combined into one overall entity.
  • 20. Why use a pattern library at all? ! Easier to build sites Easier to maintain sites Easier to hand over Better workflow Shared vocabulary Promotes consistency
  • 21. What are the downsides? ! Time-consuming to write Often done post-project Serve current need only
  • 23. There are a wide range of pre-existing pattern libraries available today.
  • 24. Some of these pattern libraries have a simple purpose - such as responsive grid systems.
  • 25. 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
  • 26. Others are considered full “frameworks” that offer a wide range of components.
  • 27. These can include: ! Reset styles Grid systems Typography styles Browser fixes Common user-interface component styles
  • 29. There are some great benefits to using an existing framework: ! ready-to-use solution can pick & choose components easy implementation quick prototyping great for teams
  • 30. There may also be some downsides: ! may not suit your project no need for a complex library someone else’s conventions generic look
  • 34. Bootstrap vs. Banking application
  • 35. Should you use a pre-existing framework? It depends on the needs of the site and your team. There is no one answer.
  • 36. Assuming you want to create your own CSS pattern library, how do you go about it?
  • 38. Abstraction is essential to any CSS pattern library.
  • 39. The process involves: ! looking for components that may be repeated within the layout defining their characteristics creating HTML/CSS patterns for them 1. ! 2. 3.
  • 43. These boxes look like they have similar characteristics. If they were resolved into a pattern, this would make our HTML and CSS more efficient.
  • 44. What are the key things to keep in mind when creating any pattern?
  • 46. All patterns needs to be class- based so they can appear as many times as needed within an HTML document.
  • 49. We should avoid naming patterns based on the content, as we want to reuse these patterns often within the layout.
  • 50. /* avoid */! .signup { }! .member { }! .member-news { }! .wiki { }! .support { }! .database { }! ! /* preferred */! .box { }
  • 52. All patterns should work regardless of where they’re placed within the layout.
  • 53. /* avoid */! .sidebar .box { }! .main .box { }! ! /* preferred */! .box { }
  • 55. Ideally, patterns should avoid defining widths. Patterns should be allowed to spread to the width of any parent container.
  • 56. /* avoid */! .box-wide { width: 500px; }! .box-medium { width: 240px; }! .box-small { width: 120px; }! ! /* preferred */! .box { /* no width defined */ }
  • 57. Keep patterns as simple as possible
  • 58. Patterns should be defined as simply as possible. Otherwise they can become restrictive.
  • 59. .box! {! ! border-bottom: 5px solid #C8C8C8;! ! background-color: #e6e6e6;! ! /* may not be suitable */! ! margin-bottom: 1em;! }
  • 61. Patterns should not be written to undo other rules. For example, the <h3> element:
  • 63. 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.
  • 64. /* default style */! h3! {! ! padding: 1em;! ! color: white;! ! background-color: red;! }
  • 65. 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.
  • 66. /* default style */! h3! {! ! padding: 1em;! ! color: white;! ! background-color: red;! }! ! /* undoing default style */! .no-background ! {! ! padding: 0;! ! color: #000;! ! background-color: none;! }!
  • 67. It is best to avoid over-styling elements or patterns so that they do not have to be undone later.
  • 68. /* default style */! h3! {! }! ! /* only when background needed */! .class-name! {! ! padding: 1em;! ! color: white;! ! background-color: red;! }!
  • 70. Patterns should not rely on the HTML structure. What happens if the structure changes in some instances - like a different heading level being used?
  • 71. <div class="box">! ! <h3></h3>! <div>! ! <div class="box">! ! <h4></h4>! <div>! ! ! /* avoid if possible */! .box h3, .box h4! {! ! padding: 10px; ! ! background-color: orange; ! }! !
  • 72. It is always better to create a class-based pattern for any specific styling needs.
  • 73. <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; ! }!
  • 75. How can we let developers know that our new class called “box-heading” relates to the “box” class?
  • 76. <div class="box">! ! <h3 class="box-heading"></h3>! <div>!
  • 77. We could use a naming convention that was originally defined as part of BEM: ! http://bem.info/
  • 78. And then extended by Nicolas Gallagher: ! http://nicolasgallagher.com/about-html-semantics- front-end-architecture/
  • 79. And then modified slightly again by Harry Roberts: ! http://csswizardry.com/2013/01/mindbemding- getting-your-head-round-bem-syntax/
  • 80. This naming convention is based on the idea that page layouts can be broken down into a series of re-usable “modules”.
  • 81. If a module needs to be modified or extended, a “module modifier” would be used.
  • 82. If a module has child elements that need to be styled, a “module descendant” could be used.
  • 83. These different types of class names need to be relatable and recognisable.
  • 84. /* Module */! .module-name {}! ! /* Module modifier*/! .module-name--modifier-name {}! ! /* Module descendant*/! .module-name__descendant-name {}! ! /* Module descendant modifier*/! .module-name__descendant--modifier {}!
  • 85. <!-- 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>!
  • 87. With this naming convention, we can now add two “module descendants” to our HTML markup:
  • 88. <!-- Module -->! <div class="box">! ! ! <!-- Module descendant -->! ! <h3 class="box__heading"></h3>! ! ! <!-- Module descendant -->! ! <div class="box__content"></div>! </div>!
  • 89. .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; }!
  • 91. But what about the boxes that are very similar, but have some unique characteristics - like the decorative cog image?
  • 93. If we needed to modify or extend the original module, we would create a modifier class name.
  • 94. <!-- Module modifier -->! <div class="box box--alt">! ! <h3 class="box__heading"></h3>! ! <div class="box__content"></div>! </div>!
  • 95. However, in this case, we need to modify the “box__content” class. We need to create a “module descendant modifier”.
  • 96. <!-- Module modifier -->! <div class="box">! ! <h3 class="box__heading"></h3>! ! <div class="box__content box__content —cog"></div>! </div>!
  • 97. .box__content--cog! {! ! padding-right: 100px;! ! background-image: url(cog.png);! ! background-repeat: no-repeat;! ! background-position: 100% 0;! }!
  • 99. In one of the boxes, there is a piece of text that is aligned to the right. How do we solve this?
  • 101. We could make it another module descendant - and apply this to the link.
  • 102. .box__link {}! ! ! ! <div class="box">! ! <h3 class="box__heading"></h3>! ! <div class="box__content">! ! ! <p class="box__link"></p>! ! </div>! </div>! !
  • 103. Or we could use a different type of class, called a “helper” or “utility” class.
  • 104. Nicolas Gallagher’s SUIT CSS includes a set of classes called “utilities”. ! https://github.com/suitcss/suit
  • 105. /* 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>!
  • 106. Bootstrap also uses these types of classes, but calls them “helper” classes. ! http://getbootstrap.com/css/#helper-classes
  • 107. /* 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>
  • 108. These types of classes are designed to be added to elements where needed, without having to resort to styling elements individually.
  • 109. /* Helper classes */! .h-text-right { text-align: right; }! ! ! ! ! <!-- example markup --> ! <p class="h-text-right">! ! <a href="#">More</a>! </p>!
  • 110. For front-end developers who grew up in the “keep your markup clean” era, these classes could be considered the work of Satan.
  • 111. 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.
  • 113. In 2011, Jonathan Snook introduced SMACSS. One of the key principles is to categorise CSS rules into five different categories. ! https://smacss.com/
  • 114. Base - HTML elements Layout - grids Module - reusable components State - states of modules etc Theme - theming modules etc
  • 115. These categories are a great way to break up huge chunks of CSS rules into manageable sections.
  • 116. We could use one of these categories - theme styles - to define the background-colors on our headings.
  • 118. <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>!
  • 119. .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; }
  • 121. Here are some tips on the overall approach to CSS pattern libraries.
  • 123. 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/
  • 124. Atoms - HTML elements Molecules - groups of atoms Organisms - groups of molecules Templates - groups of organisms Pages - instances of templates
  • 125. Atomic design defines the process as starting from smallest components and building to largest.
  • 126. Ideally, large components should not need to be defined in a pattern library as they should be build up, like lego, from smaller components.
  • 128. Establish a class naming convention as early as possible in the process. Then document this convention and enforce it!
  • 130. 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.
  • 132. 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.
  • 134. 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!
  • 135. Russ Weakley Max Design ! Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley