Bower Bootstrap Composition is a supposed to be a bower package which will serve frontend features & components for all our projects.
- Folder structure
- Build using gulp
- Livereload in chrome
- Expose files to bower
- Release build
- Include new icons
- Using assets (like images)
All you need to do is to run the following make script:
- 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.
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:
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.
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
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.
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
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.