A Quick PSA

w3schools.com

developer.mozilla.org

(a.k.a. MDN)

HTML5

Semantic Tags

<header>
    <nav>
        <ul>
            <li>My Nav Item 1</li>
            <li>My Nav Item 2</li>
        </ul>
    </nav>
</header>
<section class="article">
    <h1>Lorem Ipsum...</h1>
</section>
<footer>
    <p>Copyright & Legal...</p>
</footer>

<div id="header">
    <div id="nav">
        <ul>
            <li>My Nav Item 1</li>
            <li>My Nav Item 2</li>
        </ul>
    </div>
</div>
<div class="article">
    <h1>Lorem Ipsum...</h1>
</div>
<div id ="footer">
    <p>Copyright & Legal...</p>
</div>

Data Attributes

<div id="my-data-div">
    <input type="hidden" name="my-data-div-count" value="1" />
    <input type="hidden" name="my-date-div-color" value="red" />
</div>

<div id="my-data-div" data-count=1 data-color="red"></div>

A Bunch More

(Go check out MDN)

HTML Best Practices

Using IDs

• Use sparingly
• Use only if 1 of these exists. Ever.
• Check semantic tags first!

<div id="header">
    <div id="nav">
        <ul>
            <li>...</li>
        </ul>
    </div>
</div>
<div id="sidebar-1">
    <div id="nav">
        <ul>
            <li>...</li>
        </ul>
    </div>
</div>
<div id="sidebar-2">
    <div id="nav">
        <ul>
            <li>...</li>
        </ul>
    </div>
</div>
...

<header>
    <nav>
        <ul>
            <li>...</li>
        </ul>
    </nav>
</header>
<div class="sidebar" id="main-sidebar">
    <nav>
        <ul>
            <li>...</li>
        </ul>
    </nav>
</div>
<div class="sidebar" id="user-sidebar">
    <nav>
        <ul>
            <li>...</li>
        </ul>
    </nav>
</div>
...

General Rule of Thumb:

Will it be used to apply styles, or describe a type of component? Use a class.

Will it be used to identify this particular element only, ever? Ok, use an ID.

Keep this in mind:

When using a class for javascript purposes (i.e. a selector), prefix it with js-. 

Yes, create an extra class. Yes, it will pay off.

<div class="click-area js-click-area"></div>

Always

be

Verbose.

<div id="foo">
    <ul>
        <li class="list-item"></li>
    </ul>
</div>
<div class="wrapper">
    <div class="container">
        <div id="important-container">
        </div>
    </div>
</div>
<form id="user-form">
    <input name="i" type="text" />
</form>

CSS3

box-sizing: border-box

• content-box: actual width = width + padding + margin
• border-box: content width = width - padding, actual width = width + margin
• Demo

Flexbox

• Veritcal Alignment w/o hacks
• Equal spacing w/o fixed widths
• Available IE10 (prefix), 11+, Modern Browsers

Example

Animation

• Move items, call attention, transform dom nodes
• Available in IE 10+, Modern Browsers 

Example

A Bunch More

(Seriously, go check out MDN)

Sass

CSS Preprocessor

A language that you write instead of writing CSS, because CSS is pretty awful.

A few problems:

• Cross-Browser Compatibility
• Browser Prefixes
• Complicated syntaxes (see: flexbox, animation)
• No variables
• No math
• Very little control flow
• No reusability

sass-lang.org

Nested Rules

header {
    nav {
        background-color: #ccc;
        color: #000;
    
        a {
            color: #333;
        }
    }
}

header nav {
    background-color: #ccc;
    color: #000;
}

header nav a {
    color: #333;
}

Parent Selectors

header {
    &.alternate {
        background-color: #000;
        color: #fff;
        
        a {
            color: #ccc;
        }
    }
}

header.alternate {
    background-color: #000;
    color: #fff;
}

header.alternate a {
    color: #ccc;
}

Variables

$red: #F00;

a {
    color: $red;
}

a {
    color: #F00;
}

Mixins

@mixin rounded-corners( $radius: 5px; ){
    border-radius: $radius;
}

.my-div {
    @include rounded-corners(10px);
}

.my-other-div {
    @include rounded-corners;
}

.my-div {
    border-radius: 10px;
}

.my-other-div {
    border-radius: 5px;
}

Extension

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

Much, much more.

See docs.

CSS/Sass Best Practices

Don't Over-Nest Selectors

Think: is this nested for a reason, or should I add a class?

Be

Verbose.

When using Sass: Check your output!

When in doubt, just write it in CSS.

Templating

handlebarsjs.com

General Formula

Template + Data = Markup

Should I use a template?

• Will this markup be used over and over?
• Does this markup depend on a definable data model?
• Can I isolate a basic markup structure?

A Handlebars Template

<script src="js/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{body}}
      </div>
    </div>
</script>

How to use a handlebars template

1. Select the template
2. Compile it to a function
3. Run that function with your data

var template = document.querySelector("#entry-template");

var templateFunction = Handlebars.compile(template.innerHTML);

document.querySelector("#my-component").innerHTML = templateFunction({
    title: 'Hello',
    body: 'World'
});
    

Demo

Here

Things to check out

• External templates
• Pre-compiling external templates
• Writing custom helpers

Extra Credit: Build Systems

Grunt

• Automated Task runner
• JSON configuration
• 1000's of tasks pre-made
• Including Sass, JSHint, Handlebars compilation...

Steps to get Grunt

• Install node
• npm install -g grunt-cli, npm install grunt
• create your Gruntfile.js
• grunt [taskname]

gruntjs.com

Resources

• developer.mozilla.org - HTML/CSS/JS reference
• caniuse.com - Browser compatibility charts
• codepen.io - HTML/CSS/JS playground, examples
• handelbarsjs.com - Handlebars reference
• sass-lang.com - Sass language reference
• gruntjs.com - Grunt build system