the new ui - staying strong with flexbox, sass, and {{mustache.js}}
DESCRIPTION
This presentation is a hands-on workshop exploring a medley of client-side web technologies. Flexbox is a CSS layout model that may simplify what usually are very complex layouts. SASS is a CSS wrapper extension / preprocessor allowing CSS to me more maintainable and approachable. Mustache.js is an logicless HTML tool using JavaScript.TRANSCRIPT
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!
