Website Design: Learning the magic that is Bootstrap

VisualDesign_BootStrap Website Design

I’ve recently wrapped up a website design for one of my favorite clients. At the heart of it I wanted to use bootstrap, just because well, I hadn’t done that before and frankly that’s a bit embarrassing. While I personally think a lot of bootstrapped websites all look remarkably similar, it is pretty awesome and universally used, so something I want in my wheel house.

Now I believe that a lot of web builders will download a template, change out some images, maybe delete or duplicate some div sections, update your contact info and send you on your way. And for many that might be just fine. I like to be able to answer the questions like, well how do I get two columns on an iphone?

First crack I figure this should be pretty easy, a mobile first approach, predefined break points that layer in more css as the screen gets bigger. Simple enough.

write a container div, add a row, add some columns and… oh. okay I wasn’t expecting that. Read some of the documentation and who/what? I’m going to need another latte.

Luckily. (and after quite a bit of trial and error) I stumble upon this circa 2014 article by Erik Flowers, the subtle magic behind why the bootstrap3 grid works. And while that naturally opens the doors to a few more questions, dive into the comments and there I see ShoeLace.io (which I assume was created by Erik, and I like promoting fellow Eri especially when its wicked helpful.)

Play with this site for a few minutes and you get a visual representation of how the columns will break on different sized screens, dragging the width of the .col gives it a different naming convention depending on which device you have highlighted. Suddenly things start clicking. This is a great way to start a website design. Plus you can grab the snippet of code. Oh and it is free.

That’s pretty cool.

I also like the “teaching” method behind shoelace.io – create a whole web site / web app to teach just one thing. Okay there’s no explanation, maybe that’d be helpful. But who reads instructions when you can just play around and see what happens. That works better for a lot of people. Very similar to one of my other favorite places to hang out www.codecademy.com

Alright now back at it.


Featured Projects

Medical Ethics Annual Report... Posted by author icon Eric Gross Apr 17th, 2016 | no responses
Fun with Vector Graphic Designs... Posted by author icon Eric Gross Sep 29th, 2015 | no responses
Marketing for better Hospitals... Posted by author icon Eric Gross Mar 26th, 2015 | no responses

Random Projects

San Francisco Point After 2013... Posted by author icon Eric A. Gross Sep 15th, 2010 | no responses
GuideGuide Posted by author icon Eric Gross Jan 31st, 2014 | no responses