The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

The New UI
Staying Strong with
Flexbox, SASS, and
{{Mustache}}
1. Install Koala.
http://koala-app.com/
(for Windows, Mac, Linux)
Prep:
2. Get source code zip file.
https://github.com/ecarlisle/TheNewUI
3. Pick any editor.

Who’s This Guy?
Name:
Craft:
Crew:
Locale:
XP:
Eric Carlisle
UI / UX Architect
Lookingglass - http://www.lgscout.com
Baltimore, MD

Agenda
∙ General Best Practices
∙ SASS – variables, nesting, mixins, extensions
∙ CSS Flexible Box Layout & responsive design
∙ {{ mustache }} templating
∙ Q/A

General Best Practices
K
I
S
S
(Not quite what you think it means)

Keep
It
Stunningly
Simple

K
I
S
S
Projects assets can be:
∙ Approachable
∙ Reusable
∙ Maintainable
∙ Self Documenting

K
I
S
S
Projects assets can
be:
Cost Saving!
(Simple doesn’t have to be
boring)

Ideal Project Execution

Bare Necessity Comprehensiveness

Mediocrity? Indulgence?

Hacking Architecture

The right tool for the job.

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

SASS
Stands for:
Syntactically Awesome Style Sheets

SASS
Stands for:
It is a:
CSS Extension Language
(a.k.a. CSS Preprocessor)

SASS
Stands for:
It is a:
CSS Extension Language
(a.k.a. CSS Preprocessor)
Ultimately:
Keeps CSS Maintainable

Why do we need SASS?
CSS Can Be:
∙ Repetitive
∙ Verbose
∙ Inconsistently supported
∙ A precedence nightmare
∙ Not scalable

Why do we need SASS?
SASS can make CSS:
∙ DRY (don’t repeat yourself)
∙ Modular
∙ Reusable
∙ Scalable
Also see CSS frameworks like SMACSS (https://smacss.com)

SASS or SCSS Formatting?
We will be using SCSS
More Info: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

SASS Variables
Name, value pairs.
Examples:
$font-stack: Lato, Helvetica, sans-serif;
$blue: #369;
$light-blue: lighten($blue, 40); // #b3cce6
$font-size: 10px;
$big-font-size: $font-size + 8px; // 18px
Fun Color Function Tool: http://sassme.arc90.com/

SASS Nesting
Source:
nav {
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Compiled:
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
Creating a visual hierarchy

SASS Mixins
For dynamic selector attributes
Source:
@mixin border-radius ($radius) {
- webkit-border-radius: $radius;
- moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
nav {
border: solid 1px black;
@include border-radius(5px);
}
Compiled:
nav {
border: solid 1px black;
- webkit-border-radius: 5px;
- moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

SASS Extends
Assigning inheritance (and keeping it clean)
Source:
.message {
border: solid 1px #333;
color: #FFFF;
}
.confirmation {
@extend .message;
background: #0F0;
}
.error {
@extend .message;
background: #F00;
}
Compiled:
.message, .confirmation, .error {
border: solid 1px #333;
color: #FFFF;
}
.confirmation {
background: #0F0;
}
.error{
background: #F00;
}

Flexbox Layout
// Old version
display: box;
// Oldish version
display: flexbox;
// Today...
display: flex;

Flexbox Layout
// Old version
display: box;
// Oldish version
display: flexbox;
WC3 Working Draft
http://dev.w3.org/csswg/css-flexbox/
// Today...
display: flex;
Browser Support
http://caniuse.com/#feat=flexbox

What is Flexbox?
“Aims at providing a more efficient way to lay out,
align and distribute space among items in a
container, even when their size is unknown and/or
dynamic”
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Why Flexbox?
How can our content flow?
<!– Block elements flow Vertically. -->
<div></div>
<div></div>
<div></div>
<!– Inline elements flow horizontally. -->
<span></span>
<span></span>
<span></span>

<container style=“display: flex”>
<item></item>
<item></item>
<item></item>
</container>
*drumroll*
?
?

Why Flexbox?
What about dimension? Space distribution? Alignment?
<!– Things can get complicated pretty fast with CSS! -->
<div>
<div style=“float: left; margin: 10px; width: 200px”></div>
<div style=“float: left: margin: 20px; padding: 10px; width: 4em”></div>
<div style=“float: right; margin: 0; width: 50%></div>
<div style=“clear: both”></div>
</div>

Why Flexbox?
Floats? Clears? Padding? Margins?
What happens when...
<!– Things can get chaotic in a hurry... -->
<div>
<div style=“float: left; margin: 10px; width: 200px”></div>
<div style=“float: ∙ left: Different margin: 20px; padding: Screens?
10px; width: 4em”></div>
<div style=“float: right; margin: 0; width: 50%></div>
<div style=“clear: both”></div>
</div>
∙ Different (dynamic) content?
∙ Design Changes?

Why Flexbox?
Responsive Frameworks to the rescue?

Why Flexbox?
Responsive Frameworks to the rescue?
BRILLIANT but…
…Still pretty complicated!!!

The Flexbox Layout Box Model
Dual axis flow!

The Flexbox Layout Box Model
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mustache.js
Logicless Templating

<script>
data = {“name”: “Guy Incognito”,
“company”: “Horizons Unlimited Ltd.”}
output = Mustache.render(“Hello {{name}} from {{Company}}!”,data);
</script>

Mustache.js
Using an HTML script template
<div id=“greeting”></div>
<script>
$template = $(“#template”).html();
data = {“name”: “Guy Incognito”,
“company”: “Horizons Unlimited Ltd.”}
output = Mustache.render($template ,data);
</script>
<script id=“template” type=“x-tmpl-mustache”>
<p>Hello {{name}} from {{Company}}!</p>
</script>

Q&A
eric@ericcarlisle.com
http://www.twitter.com/eric_carlisle
http://www.slideshare.net/ericcarlisle

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}} (20)

Recently uploaded (20)

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}