Skip to content

Latest commit

 

History

History
109 lines (83 loc) · 3.07 KB

README.md

File metadata and controls

109 lines (83 loc) · 3.07 KB
Raw

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 !

-alt text