CSS Preprocessors

Why?

• Write CSS Faster
• DRYer
• Variables, functions, reusable code

Some Options

• Sass/SCSS
• Less
• Stylus

Sass/SCSS Example

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass/SCSS Example

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

HTML Template Languages

Why?

We still don't have a good [native] solution for HTML templates. 

Some Options

• Pug (formerly Jade)
• Handlebars
• EJS

HTML Template Languages

.wrapper
    section.top
        header.hero
            h1 Camera Sale!
            p Everything must go!
        .cta.cta1
            p.price $899
            p Cannon 80D
        .cta.cta2
            p.price $50
             p Nifty 50

<div class="wrapper">
    <section class="top">
      <header class="hero">
        <h1>Camera Sale!</h1>
        <p>Everything must go</p>
      </header>
      <div class="cta cta1">
        <p class="price">$899</p>
        <p>Cannon 80D</p>
      </div>
      <div class="cta cta2">
        <p class="price">$50</p>
        <p>Nifty 50</p>
      </div>
    </section>
</div

HTML Template Languages

extends includes/_layout

block content
  section.about
    img(src="images/camera.png", alt="Camera")

header

nav

block content
  p The page content goes here


footer

_layout.pug

about.pug

Build Tools

Why?

• Compile/Transform all our fancy code
• Bundle/Deploy Code
• Install Modules
• Dependency Management and Code Splitting

Some Options

• Node
• Gulp
• Webpack
• Parcel (new)

Install Modules with Node/NPM

<script src="https://code.jquery.com/jquery.min.js"></script>

<script>

$('.menu').show();

</script>

The traditional way of working with JavaScript

Install Modules with Node/NPM

$ npm install jquery 

import $ from 'jquery';

// or

const $ = require('jquery');

// then

$('menu').show();

Command Line

scripts.js

Install Modules with Node/NPM

$ npm install gulp gulp-sass autoprefixer 

Adding Build Tools

Gulp Example

https://github.com/dtauer/infotec2018-tools