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)

General Best Practices

Keep

It

Stunningly

Simple

K

I

S

S

General Best Practices

Projects assets can be:

∙ Approachable

∙ Reusable

∙ Maintainable

∙ Self Documenting

K

I

S

S

General Best Practices

Projects assets can be:

Cost Saving!

(Simple doesn’t have to be boring)

General Best Practices

Ideal Project Execution

General Best Practices

Ideal Project Execution

Bare Necessity Comprehensiveness

General Best Practices

Ideal Project Execution

Bare Necessity Comprehensiveness

Mediocrity? Indulgence?

General Best Practices

Ideal Project Execution

Bare Necessity Comprehensiveness

Mediocrity? Indulgence?

Hacking Architecture

General Best Practices

The right tool for the job.

SASS Stands for:

Syntactically Awesome Style Sheets

SASS Stands for:

Syntactically Awesome Style Sheets

It is a:

CSS Extension Language(a.k.a. CSS Preprocessor)

SASS Stands for:

Syntactically Awesome Style Sheets

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

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;

}

For dynamic selector attributes

SASS Extends

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;

}

Assigning inheritance (and keeping it clean)

Let’s Code!

Flexbox Layout

Flexbox Layout

// Old versiondisplay: box;

// Oldish versiondisplay: flexbox;

// Today...display: flex;

Flexbox Layout

WC3 Working Drafthttp://dev.w3.org/csswg/css-flexbox/

// Old versiondisplay: box;

// Oldish versiondisplay: flexbox;

// Today...display: flex;

Browser Supporthttp://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?

<!– Block elements flow Vertically. --><div></div><div></div><div></div>

<!– Inline elements flow horizontally. --><span></span><span></span><span></span>

<!-- Flex elements flow... Well, it depends! :-) --><container style=“display: flex”> <item></item> <item></item> <item></item></container>

How can our content flow?

*drumroll*

?

?

Why Flexbox?

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

What about dimension? Space distribution? Alignment?

Why Flexbox?

<!– Things can get chaotic in a hurry... --><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>

Floats? Clears? Padding? Margins?

What happens when...

∙ Different Screens?

∙ 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/

Let’s Code!

{{Mustache}}{

Mustache.js

Logicless Templating

<!-- Example -->

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

Let’s Code!

Q&A

[email protected]

http://www.twitter.com/eric_carlisle

http://www.slideshare.net/ericcarlisle