CSS pattern libraries, and important tool for any front end web developer

1. PATTERN
LIBRARIES
CSSPATTERN
LIBRARIES

2. Who
is this guy?

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.

6. pages
Moving away from

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.

11. pattern libraries
HTML/CSS

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.

19. cons?
Pros and

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

22. Pre-existing
pattern libraries

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

28. 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/

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

31. Bootstrap

32. Bootstrap vs. mid-range website

33. Bootstrap vs. University data site

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?

37. abstraction
Understanding

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.

40. An example:
coloured boxes

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?

45. Avoid using IDs

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

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

48. Avoid naming
based on content

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 { }

51. Avoid location-
based styles

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

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

54. Avoid widths

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;!
}

60. Don’t undo

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;!
}!

69. Avoid dependency
on HTML structure

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; !
}!

74. Modules,
modifiers & descendants

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

86. Module
descendants

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; }!

90. Module modifiers

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;!
}!

98. Helper
classes

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.

112. Theme classes

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; }

120. Tips
Pattern library

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

122. Smallest to largest

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.

127. Class names

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

129. Intuitive class
names

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.

131. Keep it simple

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.

133. Final
thoughts?

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