Play with Bootstrap using BootSync

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.

Then, I came across this wonderful project named Bootstrap TLDR which has all the bootstrap components in a single page which made my work easier. That’s how BootSync born.

##How to use it?

1. Just pull the repo using git clone https://github.com/fareez-ahamed/boot-sync
2. Install Bower dependencies bower install
3. Install NPM dependencies npm install
4. Run gulp make for BootSync to place the files needed.
5. Run gulp and go to http://localhost:3000
6. Start playing around with the scss/_variables.scss and 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 package.json.

This suits my Sublime-Terminal-Browser workflow very well. Hope it helpful to someone out there.