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
![Page 1: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/1.jpg)
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.
![Page 2: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/2.jpg)
Who’s This Guy?
Name:
Craft:
Crew:
Locale
:
XP:
Eric Carlisle
UI / UX Architect
Lookingglass - http://www.lgscout.com
Baltimore, MD
![Page 3: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/3.jpg)
Agenda
∙ General Best Practices
∙ SASS – variables, nesting, mixins, extensions
∙ CSS Flexible Box Layout & responsive
design
∙ {{ mustache }} templating
∙ Q/A
![Page 4: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/4.jpg)
General Best Practices
K
I
S
S(Not quite what you think it
means)
![Page 5: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/5.jpg)
General Best Practices
Keep
It
Stunningly
Simple
![Page 6: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/6.jpg)
K
I
S
S
General Best Practices
Projects assets can be:
∙ Approachable
∙ Reusable
∙ Maintainable
∙ Self Documenting
![Page 7: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/7.jpg)
K
I
S
S
General Best Practices
Projects assets can be:
Cost Saving!
(Simple doesn’t have to be boring)
![Page 8: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/8.jpg)
General Best Practices
Ideal Project Execution
![Page 9: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/9.jpg)
General Best Practices
Ideal Project Execution
Bare Necessity Comprehensiveness
![Page 10: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/10.jpg)
General Best Practices
Ideal Project Execution
Bare Necessity Comprehensiveness
Mediocrity? Indulgence?
![Page 11: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/11.jpg)
General Best Practices
Ideal Project Execution
Bare Necessity Comprehensiveness
Mediocrity? Indulgence?
Hacking Architecture
![Page 12: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/12.jpg)
General Best Practices
The right tool for the job.
![Page 13: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/13.jpg)
![Page 14: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/14.jpg)
SASS Stands for:
Syntactically Awesome Style Sheets
![Page 15: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/15.jpg)
SASS Stands for:
Syntactically Awesome Style Sheets
It is a:
CSS Extension Language(a.k.a. CSS Preprocessor)
![Page 16: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/16.jpg)
SASS Stands for:
Syntactically Awesome Style Sheets
It is a:
CSS Extension Language(a.k.a. CSS Preprocessor)
Ultimately:
Keeps CSS Maintainable
![Page 17: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/17.jpg)
Why do we need SASS?
CSS Can Be:
∙ Repetitive
∙ Verbose
∙ Inconsistently supported
∙ A precedence nightmare
∙ Not scalable
![Page 18: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/18.jpg)
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)
![Page 19: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/19.jpg)
SASS or SCSS Formatting?
We will be using SCSS
More Info: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
![Page 20: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/20.jpg)
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/
![Page 21: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/21.jpg)
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
![Page 22: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/22.jpg)
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
![Page 23: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/23.jpg)
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)
![Page 24: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/24.jpg)
Let’s Code!
![Page 25: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/25.jpg)
Flexbox Layout
![Page 26: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/26.jpg)
Flexbox Layout
// Old versiondisplay: box;
// Oldish versiondisplay: flexbox;
// Today...display: flex;
![Page 27: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/27.jpg)
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
![Page 28: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/28.jpg)
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/
![Page 29: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/29.jpg)
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*
?
?
![Page 30: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/30.jpg)
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?
![Page 31: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/31.jpg)
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?
![Page 32: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/32.jpg)
Why Flexbox?
Responsive Frameworks to the rescue?
![Page 33: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/33.jpg)
Why Flexbox?
Responsive Frameworks to the rescue?
BRILLIANT but…
…Still pretty complicated!!!
![Page 34: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/34.jpg)
The Flexbox Layout Box Model
Dual axis flow!
![Page 35: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/35.jpg)
The Flexbox Layout Box Model
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
![Page 36: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/36.jpg)
Let’s Code!
![Page 37: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/37.jpg)
{{Mustache}}{
![Page 38: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/38.jpg)
Mustache.js
Logicless Templating
<!-- Example -->
<script>
data = {“name”: “Guy Incognito”,
“company”: “Horizons Unlimited Ltd.”}
output = Mustache.render(“Hello {{name}} from
{{Company}}!”,data);
</script>
![Page 39: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/39.jpg)
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>
![Page 40: The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}](https://reader036.vdocuments.us/reader036/viewer/2022062307/557b43e1d8b42a014a8b4678/html5/thumbnails/40.jpg)
Let’s Code!