NOTICE: This article is outdated. Please read my article on how to build Bootstrap 3.0 themes the proper way. Thank you!
PLEASE, if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same! I just tested a really cool app and was SO disappointed that it used bootstrap. I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy. And you know what? I use Bootstrap right now, as we speak (not on this site). Why? First, it’s prettier than Foundation. Second, I need something that I can develop quickly in without having to write any styles, my current work focuses on results rather than prettiness and UI (for all I know, they wouldn’t mind straight HTML without CSS but that would make working on it hell for me). Third, it has the perfect less/css organization for a large project. You know what I did? I used BootTheme. Yeah, that’s right. and I played around with it, used the company’s colors, changed up some of the basic variables for shadows, borders, button effects. UPDATE: boot theme was recently UPGRADED to 2.1.0, awesome Have trouble coming up with a damn color scheme? You’re not the only one.
Take an extra five minutes and figure out a good color combo. Took me 15 minutes and my project doesn’t look anything like bootstrap. If you saw it, you would guess that I may have gotten inspired by bootstrap at some point in time..maybe. If you’re unsure how to use it, check out my old Color Scheme Designer guide Now, was that hard? No. Even bootstrap itself provides these features:
They have a “customize” page! No shit. really. You see it? Yeah? USE IT. It doesn’t take a damn genius. Or just use BootTheme and copy their var setup and implement it in the newest Bootstrap version. NOT THAT HARD. Furthermore. You know those icons bootstrap uses? Let’s expand on that and use:
Font Awesome because holy crap new icons with minimal 5 minute setup. On top of that, now that you don’t have Bootstrappy icons, you have 50 more icons (or however many, I didn’t count or check, or bothered with that). The only step left that will really make your non-bootstrap bootstrap site shine is a sweet, minimalist background:
Subtle Patterns is THE PLACE to go to for quick, beautiful patterns. Okay, so now that you’ve spent some extra time, and you’re pissed at me for making you do all that work and for screaming and yelling at you: Take a screenshot of your creation and post it here! I’d love to see what you came up with and how it looks. And if you developed or are developing a self-hosted app or website using a modified bootstrap theme. I’d love to see that too! Who knows, maybe I’ll round up all the submissions and make a post about it! If you’re too lazy to make your own stuff, just google “Bootstrap Themes”.
After writing this article and having it take off with tens of thousands of readers, I found a few NEW things you can do and that will help out:
- adjust shadow settings. We’ve come to expect a certain amount of shadow from bootstrap. Same with gradients. If you adjust it (or get rid of it like Kippt did in it is nav), a lot of the “bootstrap-y” stuff will follow along
- change the font! There’s google fonts for that 😉 Personal recommendations: Droid Sans, Ubuntu, Open Sans, the PT family of fonts, Lato, and Pacifico (for that Pinterest-like headline/logo).
Truth Be Told
I’m not asking for that much. I’m a developer too. And I know deadlines, and I know that if you get an awesome idea that needs back-end work, you want to focus on that and not on the damn styles. That’s quite fine. If you don’t like my process, you’re welcome to ignore it. If you do like it, please be nice to the world and add some variety from the now-common Bootstrap App world (someone should make a site like that btw…). It takes 25-30 minutes altogether. Probably less. Want to jump into coding? That’s fine! Start with the basic bootstrap css file and when you’re done, REPLACE IT. W00t! I think I might start making a bootstrap theme library (for free) that has LITTLE variations but powerful effects and changes just so you guys don’t have to work too much 😉
A little bit of self promotion 😉
Don’t want to do it? Fine! Hire me. Seriously. You see that button on the right? Just click on it, fill out the form, and hire me for this. If you’re a dev and you REALLY don’t want to deal with having to set everything up, I’ll make a quick bootstrap theme for you, packaged up with awesome icons, extended functionality and a pretty color scheme. Think about it. I’m a designer, I’m a developer, just like you. And if you have some extra work that you just can’t take care of, there’s outsourcing. If you go to my blog and look up top, what does it say? That’s right, this is an OUTSOURCING blog. Anyways, good luck!
- WrapBootStrap – Bootstrap themes marketplace.
- http://jetstrap.com/ – Jetstrap is an online tool to build UI with Bootstrap via drag-drop. Web-based.
- ColourLovers – alternative to ColorSchemeDesigner. Find swatches here. Used not JUST for web.
- StyleBootstrap – similar to boottheme
- Bootstrap Image Gallery – an extension for image gallery
- KickStrap – bootstrap enhancement suite with custom themes, js plugins, and more. Perfect solution for those that don’t want to customize
- Bootswatch – free bootstrap themes
- Kuler – Adobe’s color swatch library. If you can’t figure out the right colors even with colorschemedesigner, this is the place to go.
- http://builtwithbootstrap.com/ <- repository of built-with-bootstrap sites for inspiration!
- http://lovebootstrap.com/ – another site with examples