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 ïŹles to review and
optimise as part of the process.
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 workïŹow
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
29. There are some great beneïŹts 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
39. The process involves:
!
looking for components that may
be repeated within the layout
deïŹning their characteristics
creating HTML/CSS patterns
for them
1.
!
2.
3.
61. Patterns should not be written
to undo other rules. For
example, the <h3> element:
62.
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.
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.
70. Patterns should not rely on the
HTML structure. What happens
if the structure changes in some
instances - like a diïŹerent
heading level being used?
113. In 2011, Jonathan Snook
introduced SMACSS. One of the
key principles is to categorise
CSS rules into ïŹve diïŹerent
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
deïŹne the background-colors
on our headings.
123. In mid 2013, Brad Frost
introduced Atomic Design - a
methodology for creating design
systems with ïŹve 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 deïŹnes the
process as starting from
smallest components and
building to largest.
126. Ideally, large components should
not need to be deïŹned in a
pattern library as they should
be build up, like lego, from
smaller components.
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!