fizzy.school
fizzy.school copied to clipboard
🎃 Lessons for anyone writing jQuery
fizzy.school
Lessons in JavaScript for anyone writing jQuery. Site source.
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 intobuild/
-
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