ca-bbc

BBC

Bower Bootstrap Composition is a supposed to be a bower package which will serve frontend features & components for all our projects.

• Installation
• Folder structure
• Patternlib
• Build using gulp
• Livereload in chrome
• Expose files to bower
• Release build
• Include new icons
• Using assets (like images)

Installation

All you need to do is to run the following make script:

make init

Folder structure

• dist The dist folder contains all assets that are needed for our major projects. They will be exposed to gulp.
• src All the works happens in the src/ folder. There you will be developing new plugins and frontend features.
• patternlib Contains the patternlib for the developers and designers to know which components we already have and how to call them.

Patternlib

The patternlib is tool to preview your changes made to the code. Patternlib documenation

Build using gulp

To build the distributable files you can just run:

./gulp

To develop you should use the watch task we have defined. This way gulp will observe all relevant files for changes and execute build tasks.

./gulp watch

Live reload in chrome

In order to speed up the frontend development you are encouraged to use the live reload feature of our BBC.

• Install the LiveReload chrome extension.
• Browse to the patternlib and enable it in the LiveReload
• run ./gulp watch

Now everytime you do a change to your files gulp execute the build and reload the browser for you automatically.

Expose files to bower

In order to be able to process the built files in our other projects, you need to expose files by adding them to the main key inside of the bower.json.

Release build

All other projects will be able to access the build by using bower. So, always remember to build dist by running ./gulp before commiting. Otherwise your changes will have no effect.

Include new icons

To include new icons into our icon font you simply need to put the my-new-icon.svg file into the src/icons folder. After running ./gulp you can use the .icon-my-new-icon class.

Using assets (like images)

Often you will need to use images in you stylesheets. You should put them into the src/images folder and refer to them by url(images/my-image.jpg). Gulp will replace it by url(/build/images/my-image.jpg) automatically and images are ready to use in the projects.