Bootstrap has become one of the basic tools to start web development. Though I’m using it for quite some time, I don’t dare to change the original look and feel due to the fear that I may mess up with the project and or spend too much time on designing. Yes! Sass makes it easy but still I refrain from changing.
I needed a separate playground where I can toy with Bootstrap quickly on my spare time and keep it which I can use later in projects.
When I came across BrowserSync, it simply blow my mind. I realized it can reduce my time on design related work very much with its auto-reload and multiple screen size testing features.
So I decided to wire Bootstrap and BrowserSync together in a reusable way as a testing ground for playing with the variables in Bootstrap and extend, enhance or override as needed.
How to use it?
- Just pull the repo using
git clone https://github.com/fareez-ahamed/boot-sync
- Install Bower dependencies
- Install NPM dependencies
gulp makefor BootSync to place the files needed.
gulpand go to
- Start playing around with the
scss/_variables.scssand see the output in browser
Make sure you have Bower and Gulp installed on global level.
If you need to override, or extend and design more components you can create your own directory structure under
scss and update the
app.scss files with
imports as needed. You can edit
public\index.html and your markup if needed. Git it and maintain your own design.
Upgrading or Downgrading Bootstrap is easy as you can just change the versions in
This suits my Sublime-Terminal-Browser workflow very well. Hope it helpful to someone out there.