Bijoo Start

Bijoo Start is a Starter Kit providing basic set up for building Fresh and Cool websites made with pure NPM CLI, PostCSS, ES6 with Babel bundled with Browserify, BEM and our best practices.

Features

• All needed tasks are managed by NPM (concat, ulgify, imagemin, etc.) for development and production.
• ES6 / ECMA2015.
• Modular structure for CSS and JS files.
• PostCSS to extend CSS possibilities (import, autoprefix, vars, etc.).
• Last jQuery 2 version.
• Eric Meyer's CSS reset.
• Basic print CSS.
• Source maps for CSS and JS files.

Special features for this version

• Browsersync for localhost/proxy server and sync-livereload on multiple device
• Karma/Jasmine Unit test and fixture

Getting started

• Install NodeJS
• You may need Python
• (Optional) Install PhantomJS Run installer.exe
• Install the npm dependencies

cd path/to/project
npm install

• For the first install : launch default NPM task and run Browsersync local server

npm run build && npm run server

NPM Cli Tasks

• NPM : default task to clean, postCSS, concat, copy, imagemin with source maps.

npm run build

• Browsersync + livereload

npm run server

• NPM LINT : to lint CSS and JS files.

npm run lint

• NPM Test : with Karma and Jasmine.

npm run test

• NPM en prod

npm run prod

BEM

Bijoostrap is based on BEM (Block, Element, Modifier) but it adds a specific child block declaration.

To specify a child block, add an underscore caracter "_" followed by one of the next uppercase letter :

• H for Header
• C for Content
• M for Main
• I for inner
• F for Footer

Here is the naming convention :

BLOCK(parent)_BLOCK(enfant)__ELEMENT--MODIFIER

Example :

<footer class="mainFooter">
    <div class="mainFooter_H">
        <h1 class="mainFooter_H__title "></h1>
        <h1 class="mainFooter_H__subtitle"></h1>
    </div>

    <div class="mainFooter_C">
        <h1 class="mainFooter_C__title "></h1>
        <h1 class="mainFooter_C__subtitle"></h1>
        <h1 class="mainFooter_C__content"></h1>
    </div>

    <div class="mainFooter_F">
        <h1 class="mainFooter_F__title "></h1>
        <h1 class="mainFooter_F__subtitle"></h1>
    </div>
</footer>

Creators

Balix and ethyde

Contributors

Balix and ethyde

Copyright and license

Code and documentation by Balix and Ethyde. Code released under the MIT license. Docs released under Creative Commons.

ENJOY !

-