Knowledge

My Bootstrap Experience

Published on November 20, 2013 under Web Development

Bootstrap

It’s no secret in my past that I was not a fan of CSS frameworks of any sort. In my experiences with setups such as Wordpress, Drupal, and even jQuery Mobile, I always felt restrained. I felt like I was forced to stay within a tight design of what I could or could not do.

Granted I’ve used jQuery Mobile several times, but I still hated how I’d spend loads of time sifting through CSS code to fix one item in a layout. Thus these experiences led to my preference to build from scratch, where I control all the variables.

Regardless of my more “old school” thinking, I regularly saw the word “Bootstrap” come up many times on blogs and social media. I knew what it was, but my own reluctance to change my ways simply kept me from trying. Thankfully, my need to be on top of current practices overruled that reluctance. I took it upon myself to get over the hump and rebuild this site using Bootstrap as a CSS framework...and now I’m hooked.

Like Legos for Web Design

That’s how I could best describe using Bootstrap. For once I felt like I was given the structure I needed to make ideal 12-column grid responsive layouts (with ease I might add), but not restrained on how I can style the elements.

I think for me, the key secret of why Bootstrap won me over is in how simple and easy they explain how to use their system in the “Getting Started” section of their website. It’s not just the file setup and then loads of examples, but also a detailed guide on how to structure your web pages and make the most of their system. They seemingly want to help you with placement, some functionality, and the “bells and whistles”, but to get out of your way when it comes down to look and feel.

If anything, their whole guide is just a grand list, separated into three sections of all the stuff you can do with Bootstrap. The developers literally packed most of what you would need or want to use in a website from a visual standpoint into the system. All come with clear code examples. It’s no wonder so many developers picked up and quickly fell in love with Bootstrap.

Looking at this site

Rather than me try to convince you, let’s look at my site redo and hopefully you’ll see why you might want to think about giving Bootstrap a try.

Home page responsive layout
Click to enlarge

If you’ve been to this website before, you might notice I trimmed a lot of fat in this redesign. My Creative (portfolio) section is now the home page. This blog still exists, and I kept my “About” (now called “Profile”) section. I killed the Photography section simply because while I like to shoot, it’s not what I sell here. The Contact section was now put into every page as the footer.

If you want an example of Bootstrap’s placement system, let’s look at the Creative section. I simply to created rows of four items apiece, and then applied the following classes from the Bootstrap framework to each item:

class=”col-sm-6 col-md-3“

Bootstrap sets up columns basically as a number of how many of the 12 columns you want to use, and even at what “breakpoint” you want it to change. The breakpoints are designated by the abbreviations for potential screen widths: xs, sm, md, and lg.

So for screens roughly 990 pixels (md) or wider the items take up three columns each, thus building the visual of four items in a row. When you shrink down to anything below that 990-pixel point (sm), then the CSS tells the item to take up six columms, thus you end up with two items in a row. Below 770 pixels and the item takes up 12 columns, because I didn’t designate a “xs” column width.

This can go further. On the Profile section I have my photo take up three columns initially in the largest size, but when you get down to mobile, it actually vanishes and is replaced by a second image I made for mobile that takes up all twelve columns. Bootstrap also allows you to set up not just placement, but when something will appear (or disappear) based on screen width.

This is just scraping the surface. The pop-ups, or “modals” as they’re called for the contact form or even the lightbox you pulled up when you looked at the above image, that’s all Bootstrap. The mobile-friendly drop-down menu you’ll see on smartphones and small tablets...Bootstrap. Even the way I have most of the sections set up are ready-to-use setups Bootstrap makes.

Regardless of the amount of items and modules Bootstrap gives, I still felt amazingly free and flexible to style any elements as I saw fit. I didn’t spend hours seeking out one little piece of CSS code on their included files to change. In all actuality, this site took me about a week to put together. Going “from scratch” would have probably taken me a month.

On top of that, the instructions given actually helped a veteran like me become a better coder. I fell now more into standards that I used to ignore. I learned fully now about better CSS coding, and even better page optimization. That’s a hell of a lot for one framework.

Some tips if you give it a go

Should you try Bootstrap? I’d say definitely, or try some other CSS framework such as jQuery Mobile or Foundation, at least until you find one that melds with your style of development. I don’t care if you’re a rookie just learning or a seasoned veteran who is used to coding from scratch. A good framework like Bootstrap will help you build faster and even code more cleanly. If not, then build your own framework and standardize yourself for efficiency.

From my experience, here’s a few tips I’d give. This can apply to almost any CSS framework:

Work with the latest version. Some like to stay with old versions out of safety, but I’ve found with every CSS framework, the newest versions will have the refinements and latest features. Something you would be seeking a third-party code for might just be in the new version.

Read the documentation. When I used jQuery Mobile, I didn’t get totally attuned to it due to the lack of detailed or easy documentation. Reading the Bootstrap manual initially made me go from “eh” to excited. I’ll also add in that as I mentioned, many frameworks will have all the “bells and whistles” you might want already built in. So going through the documentation will give you the full picture of what you can do. This will save you a lot of time and even misery trying to get different scripts working together.

Look to the community. This could be for help, or even plugins. The lightbox I use on this site (outside of the contact form) was actually a plugin written by a developer named AshleyDW. When I redid this website, and needed some solutions not provided by Bootstrap, I found many out there who made plugins that work fluidly with the framework. Even if you just need help, there are plenty of places to ask “experts”.

Search for plugins by your version. This could have been a mention in the last tip, but I wanted it as its own simply because of how much trouble I had finding a competent lightbox to use. The modal function on Bootstrap is nice, but complex for quick, repeated use in something like this blog, and I wanted a script that would just build a pop-up off a link without having it all laid out in the code somewhere.

I had tried many lightboxes made for Bootstrap, but one by one they failed because they were built for older versions. It was when I searched “lightbox bootstrap 3.0” that I found AshleyDW’s lightbox script. In your development journey, you might want a more complex “something” that didn’t come with the framework. Do yourself a favor and search by the version to save yourself some misery.

Be careful with outside scripts. Despite AshleyDW’s script being built around Bootstrap, I had to put a jQuery.noConflict() method on her script, as I do on my email form handler script. Granted maybe AshleyDW’s script would have worked perfectly on its own, it was my email script mucking it up (despite it already having a noConflict method), thus I had to make sure everything worked separately. There won’t always be a Bootstrap or Bootstrap Community solution for you, thus we have to make our own scripts or turn to the internet for solutions.

Be flexible. If you’re a designer/developer who likes to lay things out in Photoshop beforehand, that’s fine. I still do that as well, but only for the home page and a content page. The rest I’ll actually design in the browser. While I’m not totally sold on skipping flat design and going right to prototyping, there is benefit to just having an idea in your head (or a drawn wireframe), and going right to code. It pushes you to be flexible to work as the framework does, rather than tightly clinging to a flat layout. You’ll make compromises so things work, and even find yourself changing your layout because things that looked good on Photoshop didn’t turn out as they did in code.

Go beyond the basic theme. This general piece of laziness is probably why many designers and veteran developers gain a small disdain of frameworks. When you look at the basic Bootstrap theme, you’ll think immediately to a load of websites you’ve seen that look similar. Granted, many have simply taken the basic theme, changed a few colors, added in a logo, and called it a day. If you want to grow in this business, then you need to think beyond the basic theme. In all honesty, I deleted the included theme CSS file and just used the framework. Do the same.

Have you used Bootstrap or some other CSS framework? What did you think?

Tags: web development, bootstrap, css, web design, framework

comments powered by Disqus