Module design & UI Dev patterns

MODULE DESIGN &
UI DEV PATTERNS
code from the inside out

THE FAILURE OF THE COMP
pictures are for photoshop

DESIGNERS & STAKEHOLDERS
we’ve all had this conversation

DESIGNERS SEE
colors, type, icons, images, spacing, borders, gradients, etc ...

you
C an’t ort
exp
just ML?
HT

OHHH, YOU NEED SPECS?
sure, I have a red-line for that

UI DEVELOPERS ...
our context is all wrong

Start fr
om the
upper l
eft, righ
<div id= t?
”h o m e -
page”>
that
works.

Using IDs for styling to
over-ride the cascade

Poor code reuse, if any at
all. To much ‘copy pasta’

Styles are written
based on placement
Start fr
in the view
om the
upper l
eft, righ
A major case of <div id= t?
the div’itus ”h o m e -
page”>
classesthat
Presentation
in the
CSS too speciﬁc. Very works.
markup
fragile with placement

BETWEEN DESIGNERS &
DEVS THE COMP IS
THE ONLY CONSTANT
what could possibly go wrong?

PICTURE WORTH
1000 WORDS
a comp is worth 10,000 development variations

ONE OF THESE THINGS ...
are not like the other!

widget #1 by developer A
<div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ">
! <div id="FreeImageOfTheWeekPromo">
! ! <h5 class="text-important freeImageTitle">Free image of the week</h5>
! ! <div id="FreeImageContainer">
! ! ! <table width="120" cellpadding="0" cellspacing="0">
! ! ! ! <tbody>
! ! ! ! ! <tr>
! ! ! ! ! ! <td>
! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek">
! ! ! ! ! ! ! ! <img src="|STK|60|764&s=1" alt="portrait of a young woman smiling">
! ! ! ! ! ! ! </a>
! ! ! ! ! ! </td>
! ! ! ! ! </tr>
! ! ! ! </tbody>
! ! ! </table>
! ! </div>
! ! <div id="FreeImageDetails">
! ! ! <h6>Come back each week and stay inspired.</h6>
! ! ! <p>Stockbyte</p>
! ! ! <p>portrait of a young woman smiling</p>
! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a>
! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl=
%2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a>
! ! </div>
! </div>
</div>

! ! ! ! <tbody>
! ! ! ! ! <tr>
! ! ! ! ! ! <td>
! ! ! ! ! ! ! </a>
! ! ! ! ! ! </td>
! ! ! ! ! </tr>
! ! ! ! </tbody>
! ! ! </table>
Cause I
! ! </div>
! ! <div id="FreeImageDetails">two
need
! ! ! classes and an
<h6>Come back each week and stay inspired.</h6>
! ! ! ID to make a
<p>Stockbyte</p>
! ! ! header!
<p>portrait of a young woman smiling</p>
! ! </div>
! </div>
</div>

! ! ! ! <tbody>
! ! ! ! ! <tr>
! ! ! ! ! ! <td>
! ! ! ! ! ! ! </a>
! ! ! ! ! ! </td>
! ! ! ! ! </tr> HTML tags ...
! ! ! ! </tbody> no one uses
! ! ! </table>
Cause I those.
! ! </div>
need
! ! ! ID to make a
<p>Stockbyte</p>
! ! ! header!
! ! </div>
! </div>
</div>

Is that a
table? Oh no
you didn’t!
! ! ! ! <tbody>
! ! ! ! ! <tr>
! ! ! ! ! ! <td>
! ! ! ! ! ! ! </a>
! ! ! ! ! ! </td>
! ! ! ! ! </tr> HTML tags ...
! ! ! ! </tbody> no one uses
! ! ! </table>
Cause I those.
! ! </div>
need
! ! ! ID to make a
<p>Stockbyte</p>
! ! ! header!
! ! </div>
! </div>
</div>

widget #2 by developer B

<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">
! <div id="TrialOfferPromo">
! ! <div id="PromoHeading">
! ! ! Special offer
! ! </div>
! ! <div>
! ! ! <div id="LeftContainer">
! ! ! ! <div id="PromoImageContainer">
! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off">
! ! ! ! </div>
! ! ! </div>
! ! ! <div id="RightContainer">
! ! ! ! <p id="PromoDescription">
! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use
promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings
today.
! ! ! ! </p>
! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a>
! ! ! </div>
! ! </div>
! </div>
</div>

Ahhh ...
this is the
same
! ! ! Special offer
! ! </div>
! ! <div>
! ! ! ! </div>
! ! ! </div>
today.
! ! ! ! </p>
! ! ! </div>
! ! </div>
! </div>
</div>

Ahhh ...
this is the
same
! ! ! Special offer
! ! </div>
! ! <div>
! ! !
! ! !
! ! !
!
!
!
</div>
</div>
This is
<img src="/images/promo/en_badge.gif" alt="10% off">

! ! !
! ! ! !
NOT!
<div id="RightContainer">
<p id="PromoDescription">
today.
! ! ! ! </p>
! ! ! </div>
! ! </div>
! </div>
</div>


! ! ! Special offer
! ! </div>
! ! <div>
IDs in two
! ! ! ! !
separate
! ! ! ! </div> stylesheets,
! ! ! </div> that’s better?
today.
! ! ! ! </p>
! ! ! </div>
! ! </div>
! </div>
</div>


! ! ! Special offer
! ! </div>
! ! <div>
! ! ! ! </div>
! ! ! </div>
today.
! ! ! ! </p>
! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> Let’s
! ! ! </div> deﬁne a color
! ! </div>
! </div>
at the <body>
</div> tag, that’s
good.


! ! ! Special offer But
! ! </div> wait ... we
! ! <div>
are overriding
! ! ! ! <div id="PromoImageContainer"> changing a
by
! ! ! ! ! whole widget
! ! ! ! </div> block?
! ! ! </div>
today.
! ! ! ! </p>
! ! </div>
! </div>
at the <body>
good.

widget #2 by developer B Yup ... let’s
reapply that
color again.
USE THE POWER
OF THE ID!
! ! ! Special offer But
! ! </div> wait ... we
! ! <div>
are overriding
! ! ! ! <div id="PromoImageContainer"> changing a
by
! ! ! ! ! whole widget
! ! ! ! </div> block?
! ! ! </div>
today.
! ! ! ! </p>
! ! </div>
! </div>
at the <body>
good.

THE BEST PART IS ...
you already know how to do this

TAKE A STEP BACK AND THINK
the ‘page’ is a deprecated concept

FIGHT THE SMALL BATTLES
the element and the module

Visual elements are the basic
building blocks of the UI.

Well engineered individual
elements reduces duplication
and increases consistency.

ents?
hat ar e elem
W

Buttons

ents?
hat ar e elem
W

Buttons

Typography

ents?
hat ar e elem
W

Buttons

Typography

Color pallet

ents?
hat ar e elem
W

Buttons

standard
icons Typography

Color pallet

ents?
hat ar e elem
W

Buttons

borders and
line widths

standard
icons Typography

Color pallet

ents?
hat ar e elem
W

Using the engineered visual
elements, construct modules.

Caveat ... modules can also be
assembled of other smaller
modules and UI patterns
(mind blown)

e mo dules?
What ar

Header
module

e mo dules?
What ar

Header
module

Nav module

e mo dules?
What ar

Header
module

Nav module

Hero copy
module

e mo dules?
What ar

Header
module

Nav module

Hero module Hero copy
module

e mo dules?
What ar

Header
module

Nav module

Article module module

e mo dules?
What ar

Header
module

Nav module

Article module module

List module

e mo dules?
What ar

OOSCSS
picking up where CSS left off
& where OOCSS can never go

These are books on Object
Oriented Programming.

CSS is not on one of them!

GREAT CONCEPT
bad name

• Identify reusable objects This is
• Be semantic w/HTML GREAT
• Minimize selectors stuff
• Extend your classes
• ‘Style’ separate from content
• ‘Content’ separate from container

OBJECT ORIENTATED CSS
... shortcomings

• CSS Selectors are not objects
• Reliesheavily on ‘presentation
classes’
• Requiresmaintenance of DOM
elements for design updates
• Promotes extending in the DOM,
not the CSS
• Uses vanilla CSS

THE OOCSS PROCESS
the classing of the DOM

OOCSS, in short, is a process of
<button class="btn btn-
deﬁning standardized primary btn-large">
presentational selectors which are ! <i class="icon-white icon-
in turn applied to the DOM. envelope"></i>
! Button Generator
</button>
Extensions of such selectors are
then extended in the DOM for
added effect.
It is likely that you will see
examples like what you see here.

THE OOCSS PROCESS
the classing of the DOM

OOCSS, in short, is a process of
<button class="btn btn-
deﬁning standardized primary btn-large">
presentational selectors which are ! <i class="icon-white icon-
in turn applied to the DOM. envelope"></i>
! Button Generator
</button>
Extensions of such selectors are
then extended in the DOM for What’s with
added effect. using the <i>
tag for ‘icon’
It is likely that you will see now?
examples like what you see here.

OOCSS FRAMEWORKS
attempts to automate OOCSS

CSS frameworks have been using
OOCSS methods since inception.
Where these fail is the insane
amount of CSS selectors that by
default are added to the site’s CSS.
From grid systems to UI elements,
CSS bloat is a real issue. Ironically
this bloat is what OOCSS is
supposed to address.

OOCSS FRAMEWORKS
attempts to automate OOCSS

CSS frameworks have been using
OOCSS methods since inception.
Where these fail is the insane
amount of CSS selectors that by
default are added to the site’s CSS.
Twitter’s
From grid bootstrapUI elements,
systems to default
CSS bloat is a real issue. Ironically
includes 4914
this bloat is what OOCSS is
lines of CSS.
supposed to address.

THE CSS DREAM
redesign without DOM editing

Imagine a world where new design
requirements are only addressed
by updating CSS? Functional
modules and view templates are
not edited.
I don’t feel OOCSS will get us
there, but OOSCSS will.

OBJECT ORIENTATED SCSS
the future of silent selectors

What if we lived in a world where
the ‘object’ selectors from OOCSS
can be created, but never manifest
themselves as CSS until they are
used in semantic application?
What if we could seamlessly
extend selectors in our CSS and
not have to touch the DOM?
What if ....

SASS 3.2
re-writing what we can do with CSS

Extending elements in vanilla CSS // silent classes

is hard to track. Between nested %kung {
background: green;
color: yellow;
selectors and the sheer volume }

alone make this an arduous task.
%foo {
background: orange;
color: red;
font-size: 12px;

Sass gives us clarity. The ability to
}

// selectors extending silent classes

really deﬁne objects in our SCSS .foo_one {
@extend %foo;

and apply them to semantic
}

.foo_two {

selectors within our CSS. }
@extend %foo;

// output CSS

The dream realized. .foo_one, .foo_two {
background: orange;
color: red;
font-size: 12px;
}

OOSCSS
a real object oriented solution

ELEMENTS, MODULES AND
PATTERNS OH MY!
how do you manage all of this?

THE PATTERN LIBRARY
living visual document

ELEMENTS AND SIMPLE UI
PATTERNS
text, colors and buttons for example

ASSEMBLE THE MODULE
a view is an assembly of elements and patterns

Cool. Developed the
module in an abstract
environment.

Cool. Developed the
environment.

Now we can use this
anywhere. All UX/UI
cleanly encapsulated.

Cool. Developed the
environment.

Now we can use this
anywhere. All UX/UI

When developing, no
elements were created.
Typography and color
are all inherited.

Cool. Developed the
environment.

Now we can use this
anywhere. All UX/UI

When developing, no
elements were created.
Typography and color
are all inherited.

Follow the example
HTML and you are
rockin!

Reference SCSS

Use examples

LET’S TAKE A LOOK AT
ANOTHER
maybe a feature block?

Oh yeah, looks like
another great module

You can even
build variations on
a module

Example module HTML

Reference SCSS

WHAT ABOUT COMPLEX
MODULES?
let’s turn this up to 11 - enter UI patterns

Alert element

Subject header
element

Alert element

Subject header
element
Widget header
element

Alert element

Subject header
element
Widget header
element

Form select UI
Pattern

Alert element

Subject header
element
Widget header
element

Form select UI
Form text Pattern
entry UI Pattern

Radio button, label
and text UI pattern

Button element

Radio button, label
and text UI pattern

Checkbox and label
elements
Button element

Radio button, label
and text UI pattern

Scroll box UI pattern

Checkbox and label
elements
Button element

Radio button, label
and text UI pattern


Checkbox and label
elements
Button element

Calendar data
UI pattern

Radio button, label
and text UI pattern


Checkbox and label
elements
Button element

Calendar data
UI pattern

Button element

OMG! This is an
error example!

OMG! This is an
error example!

Reuse of
elements and
patterns with
added effect

Wow, the
markup is the
same?

Wow, the
markup is the
same?

Just add some
‘fail’ to the blocks
and you are
AWESOME!

WHAT ABOUT THE CODE?
how do you build a styleguide?

INTRODUCING TOADSTOOL
a modern styleguide framework
(alpha release)

The Sass
structure

Complex UI
groupings

The Sass
structure

Complex UI
groupings

UI Elements and
core concepts

The view
structure

Complex UI
groupings

The view
structure

Complex UI
groupings

UI Elements and
core concepts

ELEMENTS, PATTERNS AND
MODULES
a recipe for success

Comps are a failed
communication resource
between designers and devs

SUMMARY
what have we learned?

Comps are a failed

As devs, we need to

SUMMARY change our contextual
starting point.


Comps are a failed

As devs, we need to

Without common standards; starting point.
duplicated effort, wild
deviations in code and
inconsistencies run ramped.

We can do it
Comps are a failed
communication resource better!

As devs, we need to


We can do it
Comps are a failed

As devs, we need to


Embracing elements,
patterns and modules
makes our UI code
manageable, maintainable
and sustainable.

We can do it
Comps are a failed
Vanilla CSS
frameworks
will causeAs devs, we need to
you

SUMMARY much pain our contextual
Without common standards;
change
starting point.


Embracing elements,
patterns and modules
makes our UI code
and sustainable.

We can do it
Comps are a failed
Vanilla CSS
frameworks
you

Without common standards;
change
starting point.


Sass is re-writing
the future of Embracing elements,
CSS. patterns and modules
makes our UI code
and sustainable.

We can do it
Comps are a failed
Vanilla CSS
frameworks
you

change
duplicated effort,OOCSS is ok, but
wild
OOSCSS is
amazing!
Sass is re-writing
the future of Embracing elements,
CSS. patterns and modules
makes our UI code
and sustainable.

QUESTIONS?
you, in the front ...

http://speakerrate.com/speakers/15438

anythi ng, but
You do n’t win this ;)
to get better at
it h elps me

https://speakerdeck.com/u/anotheruiguy/p/module-design-ui-dev-patterns

Module design & UI Dev patterns

Module design & UI Dev patterns

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Module design & UI Dev patterns

Similar a Module design & UI Dev patterns (20)

Último

Último (20)

Module design & UI Dev patterns