Twitter bootstrap - for quick and easy design

If you're anything like me, for a graphics designer you make a great web developer.

My past attempts at design have run the gamut from "geocities" to "unicorn vomit", and I've become increasingly minimalist in an attempt to rectify that

-> less design == less unicorn-puke == win!

But it still leaves my sites looking like crayon-drawn whitesites

It's a long way from there to the current industry requirements of a clean, flexible, responsive design - able to handle mega-huge desktop-monitors and tiny smart-phones alike while looking sleek and professional... and I had resigned myself to basically just not sucking too badly and hoping my sites were useful enough for people to get past the ugly-duckling look.

but now I've found bootstrap. It lets you quickly and easily build a fully-responsive all-devices-ready design with very little graphic-design nous required. From a full grid-based system (to easily build columns that will nicely collapse on smaller screens), to all sorts of components - navbars, breadcrumbs, panels, lists of linked thumbnail images... the list is pretty huge.

Don't be put off by the "oh my god PURPLE" look of their website - this is a tool worth using.

The getting started guide is where to begin.

There's a number of pre-built templates on bootply templates that even if you don't like, you can cannibalise for the various pieces you want.

You can also buy a whole bunch of pre-packaged, professional themes (for about $12 each) from WrapBootstrap to kickstart your website design. Though be aware they are mostly built on Bootstrap 2

If you're building this stuff in rails, there's a whole bunch of bootsrap-related gems - which mean you don't have to download the css/js versions of bootstrap and mix them all into your assets directory.

Ryan Bates' railscast (see below) uses seyhunak / twitter-bootstrap-rails, which seems to have a whole bunch of neat generators for quickly throwing up layouts. I prefer not mixing bootstrap's Less with the existing SASS, and so have gone for the sass-based gem: bootstrap-sass gem.

I suspect you can combine these two powers for good by using the generators of twitter-bootstrap with the sass-based assets of bootstrap-sass... but have yet to try it (let me know if you do).

There's also a great overview of rails and twitter bootstrap with a related RailsApp that goes into far more depth (I haven't had a look at that yet).

and Ryan Bates has done a railscast on twitter bootstrap basics, and a pro-only railscast: more on twitter bootstrap

enjoy...

---

Note: Bootstrap version 3 has recently been released, and a lot of the tutorials, railscasts etc are based on version 2. Bootply has a Bootstrap 3 migration guide if you want a reference to what has changed.

Kill the ugly duckling!

For years, now, I've had a "tradesman's website"... you know, how the tradesman comes home and doesn't want to do *more* work, so they let their own house go. That's what my website has been like now for a while. I've suffered brief bouts of inspiration, followed by a flurry of new stuff - only to get caught up in what I was doing at work and not want to do any web-development once I got home :P

But that's gotta change - and the old styling is really not cutting it for me. So the first thing I've done is to get some graphic desgin done... I'll be getting the first look at the result on Monday and have been really looking forward to it!

I've never had to brand myself before, and that's essentially what I'm doing. I've worked with branding for products, companies and services, events and concepts - but never for myself. I had a chance to chat about what I like, how I see myself being portrayed and even a few of my favourite hobbies (eg calligraphy) and now I'm really looking forward to the results.