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.