Bijoo Start

Bijoo Start is a Starter Kit providing basic set up for building Fresh and Cool websites made with Grunt, PostCSS, RequireJS, BEM and our best practices.

Features

• A Gruntfile with all needed tasks (concat, ulgify, imagemin, etc.) for development and production.
• A RequireJS set up to load JS modules and libraries asynchronously.
• 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.

Getting started

• Install NodeJS
• Install Grunt

npm install -g grunt-cli

• (Optional) Install PhantomJS Run installer.exe
• Install the npm dependencies

cd path/to/project
npm install

• Launch default Grunt task

grunt

Grunt Tasks

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

grunt

• GRUNT LINT : to lint CSS and JS files.

grunt lint

• GRUNT PROD : to clean, postCSS, uglify, concat, critical CSS, copy and images optimization.

grunt 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 !

-