Taking the plunge and moving away from Bootstrap

We all love bootstrap and for what it does and the audience there is perhaps not better. Especially tempted as I was to use it again in the refactor of the backpack app I started in yeoman a while back that hasn't moved forward in some time. So why was I tempted ?

What does bootstrap do that almost makes us unable to not use it !

The fact that you can quickly set up a responsive website (mobile first) and that is so widely adopted that most developers know the class and grid system off by heart are very good reasons to use it. I would use it again myself no problem when I need to use most all of the components and I am not really looking for a custom look.

When you use bootstrap you find the speed of getting to working components state very attractive but this is offset somewhat by the length of time to overide some of the styles and you can't not use JQuery and you can't pick and choose your components without a lot of custom importing and undoing the stanadard import all.

Alternatives to Bootstrap

What are the alternatives ? Well I looked around and contemplated skeleton - the lack of components means that I would be needing to build a lot of off the shelf components myself when i want to be making my app better in unique ways. It looks like a fine grid class a lot lighter than most and if you just need a normal grid and no components maybe thats a good place to start.

I also wanted a sass or .scss lib this is my tool of choice to save me time in making good vendor agnostic css. Enter thinkbot and the Bourbon Neat Bitters and Refills set of sass tools.

Bourbon is just a set of common mixins and functions that save you time and mean that you code less actuall css and delegate the css creation to the lib.
Neat brings a grid setup to the party - so here you could start your project and be really lightweight- check the minimal css these create compared to the whole css class set of bootstrap.
Bitters - offers a base set of styles and are less a lib and a starting place for your design to continue.
Refills - work with the first 2 (Bitters you dont need strictly but the components look better with this base set of styles) and provide you with the components you may need. So here is the ability to pick and insert into your build the components you need.

Angular modal box

if you want a fast way to get a modal box pretty much the only one was the angular -ui lib that has a single dependency on the bootstrap css (replacing js with Angular code to get them to do fancy stuff) so its not so bad but again you are tied into that set of styles and its a lot of bloat for a basic web app.

I actually took the modal box from refills and made my own custom directive replacing their javascript. You can see how their js used JQuery and refils depending uses JQuery. Like the Angular guys I decided to make the directive in the Angular way and use the directive to bind to the relevant DOM so manipulation happened through the controller where JQuery is doing direct DOM manipulation. If you ever had to debug DOM stuff happening which you were not sure where it was getting manipulated then you will know the advantage of Angular here. Indeed I dont use JQuery in my build. If I need DOM stuff doing then it will be through a controller binding variables and states. For example nd-class being bound to a string sets the class on the same element automagic rather than doing a query on the DOM to find the element then adding the class yourself.
I fear many will load JQuery when using Angular and it can be all too tempting to do direct DOM manipulation this way.

Take a look at the GIST here - 

So I am on my way now ready to start getting the backpack app back on its feet and add other functions - it just does a video page at the moment and is broken due to api changes from Youtube.

I have chosen to refactor out so much of this project that was a yeoman generated project. I wanted a NON JQuery Angular webapp - and have minimal dependencies and I also wanted to use my own GRUNT file and take ownership of it - something you feel like you loose a bit with yeoman (you can take back control with yeoman). The next task is to get it functional and clean up the Angular code a bit. There are still old legacy files and so I am not ready to push up to a new git repo yet - subscribe to watch this space.