Your own Bootstrap 4
Your own Bootstrap 4
Build your own Bootstrap 4 theme. Workflow included.
Usage
0. Check your tools
$ git --version // tested with 2.7.2
$ ruby --version // tested with 2.3.0
$ jekyll --version // tested with 3.1.6
$ npm --version // tested with 3.8.6
$ node --version // tested with 5.11.1
$ gulp --version // tested with 3.9.1
1. (Optional step) extract last version of Bootstrap.
- First, empty the _sass directory of yourow-bootstrap4.
- Copy the scss folder content of Bootstrap 4 into the _sass directory.
- Copy the _variables.scss content of Bootstrap 4 into the _sass/_custom.scss file.
- Remove all !default declaration in _sass/_custom.scss.
- Comment all lines in _sass/_custom.scss.
- Done ! You are ready for Boostrap 4 customization.
2. Start your workflow
$ git clone https://github.com/bdavidxyz/yourown-bootstrap4/
$ cd yourown-bootstrap4
$ npm install
$ gulp
# ta-da ! the browser launches itself,
# and will rebuild and live-reload each time you
# change a SCSS, JS, or HTML file
3. Modify _sass/custom.scss
// Settings from this file will override the Bootstrap defaults without modifying key, versioned files.
4. Visually check each modification on the whole Bootstrap distribution : localhost:3000/all.html contains all Bootstrap 4 visual components. (See the default giant asset here). I recommend to keep your most-used, nominal case into index.html.
5. Repeat 3. and 4., until you are happy with your own bootstrap theme.
// the whole compiled CSS is under _site/main.css
FAQ
Bootstrap 4 is only in available in pre-alpha and therefore unstable, isn't it ?
Indeed. Officially Bootstrap 4 is not yet production ready, but the coding comfort is so huge that you may want to try it now :) If you want the last version of Bootstrap, simply go to its Github Project, download last version and follow optional step 1 above.
But I can achieve a custom Bootstrap theme in many other ways...
Indeed (again). You can override Bootstrap CSS properties, but it performs poorly, and may lead to inconsistencies. You can change CSS properties in the Bootstrap custom download page, but without any preview of your work. Finally you can rebuild the whole Bootstrap distribution as stated in the Github repository, without visual check of all components at once.
Ok, with your tool can customize CSS, but not Javascript.
You can customize Javascript, but there is (not much) added value to do it with this tool : just go to the Bootstrap custom download page and select/unselect the JS components you need.
Why that bunch of tools ?
Don't worry much about them, all complexity is hidden. Simple answer : Front-end dev tools make dev's life easier. If you know about them, you can customize the gulpfile, and package.json. The use of Jekyll may be seen here as overkill, I see here as a way to define variation of the theme through configuration.
What are related projects ?
The project is not part of Bootstrap 4. It is a fork of impatient-jekyll, whose primary purpose is to get a proper workflow with the most known static website generator : Jekyll. You can find in the docs of Impatient-Jekyll more available configuration & commands.
Is there a demo ?
This documentation is build with it. You can see the code on the branch named "docs" of the Github project.