No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Replace Jade with Pug Jul 3, 2016
gulp fix pug Jul 5, 2016
src upd mixins Sep 13, 2016
.bowerrc fix bower Dec 5, 2015
.gitignore refactor tasks Dec 5, 2015
README.md Replace Jade with Pug Jul 3, 2016
gulpfile.js refactor tasks Dec 5, 2015
package.json Update package.json Jul 3, 2016

README.md

Gulp Boilerplate for generic CSS/HTML/JS development

riverco.de gulp boilerplate.

Structure

/src/ - thats where you write code.

/build/ - compiled code. Do not ever edit this folder.

What is happening

We have two options for building html

  1. /src/index.html and /src/partials/ - for old school HTML.

  2. Optionally one can use Pug (it's commented in gulpfile.js). Basic template is in /src/pug/

Sass is compiled and postprocessed with Autoprefixer. We are using gulp-ruby-sass, so don't forget to install Ruby and Sass to use this boilerplate.

src/img/icons are joined into sprite, which could be used in Sass like this:

.icon
    +s(png_name)

src/img/svg are joined into icon font, and can be used like this:

<i class="icon-svg_name"></i>

We are also using simplest include system with gulp-rigger, works for javascrpt and html:

//= partials/partial.html

Naming

We use BEM naming, meaning .block for independent block. .block__element for elements inside that block. And .block_modification for modification of the block.

It's noce to name layout blocks with .l-* prefixes. So you know it's layout.

States of the blocks use prefix .is-*. .is-running, .is-hidden, .is-open.

For javascript hooks we use prefix .js-*.

You are welcome

Have fun using it, or borrowing some parts. In case of issues or ideas just create them on github. Or write us at html@coderiver.com.ua.

gl & hf.