Sunday 11 September 2016

First time using Bootstrap

It may come across as a surprise but I have never used a CSS framework before, preferring to hand roll my own stylesheets. I had no idea how much I was missing out!

Recently I started working on a project rewrite that had its technologies picked out by the team's lead, and Bootstrap was one of them. The project being a straightforward dashboard app, I was a little sceptical at first. Experience taught me to be extra careful when picking dependencies, particularly frameworks; the gains must be worth committing to.

Then I thought:

  1. Bootstrap is the most popular CSS framework to date, there must be something about it.
  2. Others tend to give me that look like you just did ("You've never used Bootstrap before?" *stare*).
  3. Can't really call myself a web developer if I've never used a proper framework for styling.
  4. I have some spare time on my hands, this is a good learning opportunity.

So I took a pet project and restyled it. Without further ado, here's how the first time felt like:

  1. The first thing I thought was: what, I have to put in all these divs? The existing HTML line count tripled. Styling, layout, and content are mixed, completely different from how I used to write HTML. Just look at their forms example! I use Text.Blaze.HTML to generate markup, and having wrapper classes helped alleviate the eyesore.
  2. After few pages, hey, the output actually looks pretty decent! Stuff reflows nicely, so I don't have to worry about screen sizes. Input groups make the forms look kinda cool. Not very friendly when you want things like multiple input fields in a row (e.g. Date between _____ and _____), for these I used placeholder text in the fields instead.
  3. Documentation isn't that good, had to study the examples few times to find out when each classes are meant to be applied. I think it's meant for copy pasting, not understanding. Somehow it gives the same (not good) vibe as the express js documentation.
  4. The grid system is great, if you're willing to wrap things up in divs. I'm OK with this, it's a small price to pay for positioning.
  5. I was still using the vanilla Bootstrap, and now I know why so many new websites look similar. This is okay for internal applications, but definitely not something public facing.
  6. Tried out the customizer, did not like the way I had to download the whole thing just to try out every small change. There's an online tool which lets you view changes online, if it helps.
  7. NuGet provides the vanilla version, so a better way would be to override things in a separate stylesheet. So far this works fine.

Overall, the experience was pretty good, the additional markup and static files was worth the gains in scaffolding. The golden question is, would I use it in future projects? The answer is a yes, because:

  1. I'm familiar with it now, so the technical cost is gone.
  2. Most developers are, so we'd be speaking a common language.
  3. A lot of thought has gone into it, no need to rewrite things (wow, badges!).
  4. For new projects, this can really cut down development time by half. For existing projects, better make sure the switch is worth it.

Now I can see why it's called "Bootstrap"!

No comments:

Post a Comment