New Hire Bootcamp- HTML/CSS/Templates

A Quick PSA

w3schools.com

developer.mozilla.org

(a.k.a. MDN)

HTML

  • HTML5

  • Best Practices

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>

CSS

  • CSS3
  • SASS
  • Best Practices

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

Animation

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

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

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

Recommended Research

  • Check out JS tutorials (skim this or this)
  • Poke around codepen to see examples of CSS, HTML, JS
  • Bonus: see if you can get Grunt running

Stay Tuned. JS Tomorrow.

New Hire Bootcamp - HTML/CSS/Templating

By kperch

New Hire Bootcamp - HTML/CSS/Templating

  • 1,153

More from kperch