fizzy.school

Lessons in JavaScript for anyone writing jQuery. Site source.

fizzy.school

Install

Building these docs requires npm and Bower.

npm install
bower install

Tasks

• gulp - build the production site, concatenate CSS and JS, minify JS
• gulp dev - build the site, but use separate CSS and JS files for debugging

Structure

• assets/ - files that get copied into build/
• build/ - where static site gets built
• content/ - page content
• css/ - boilerplate CSS
• layouts/ - page templates
• js/ - boilerplate JS
• modules/ - See Modules below
• tasks/ - Gulp tasks to build the site

Modules

Modules are re-usable components used throughout the site. A module may consist of template, JS, and CSS files.

modules/
  page-nav/
    page-nav.css
    page-nav.js
    page-nav.hbs

BEM is used for CSS code style.

.page-nav {} /* block */
.page-nav__item {} /* element, child */
.page-nav--dark {} /* modifier */

JavaScript can be initialized for each element with data-js attribute.

<div class="page-nav" data-js="page-nav">

FizzySchool['page-nav'] = function( elem ) {
  // do something with elem
};

---

By Metafizzy