Skip to content

metafizzy/zdog-docs

Repository files navigation

Zdog docs

Documentation site for Zdog - Flat, round, designer-friendly pseudo 3D engine

zzz.dog

Install

Install dependencies with npm.

npm 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
  • gulp hint - Lint JavaScript and JSON files

Structure

  • assets/ - files that get copied into build/. Fonts and images have been ignored from the repo
  • base/ - boilerplate CSS and JS files
  • build/ - where static site gets built
  • content/ - page content
  • data/ - site data
  • demos/ - in-page demo modules, similar to modules
  • modules/ - See Modules below
  • tasks/ - Gulp tasks to build the site
  • templates/ - page templates

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="pageNav">
ZdogDocs.pageNav = function( elem ) {
  // do something with elem
};

Made by Metafizzy 🌈🐻