Customize Twitter Bootstrap To Not Look Bootstrap-y

This post has been automatically generated. I use this blog to collect links that I have bookmarked. All activity is automated.

24.08.2012| | email |Front End, User Interface

bootstrap 1024x421 Customize Twitter Bootstrap To Not Look Bootstrap y

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?

boottheme 1024x596 Customize Twitter Bootstrap To Not Look Bootstrap y

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.

Have trouble coming up with a damn color scheme? You’re not the only one.

colorschemedesigner Customize Twitter Bootstrap To Not Look Bootstrap y

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:

customize twitter bootstrap Customize Twitter Bootstrap To Not Look Bootstrap y

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:

fontawesome Customize Twitter Bootstrap To Not Look Bootstrap y

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 Customize Twitter Bootstrap To Not Look Bootstrap y

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”

Truth Be Told

Disclaimer: I won’t be showing my example, unfortunately but check out the resources below to see what others have done.

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 icon wink Customize Twitter Bootstrap To Not Look Bootstrap y

A little bit of self promotion icon wink Customize Twitter Bootstrap To Not Look Bootstrap y

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! icon smile Customize Twitter Bootstrap To Not Look Bootstrap y

Other Resources

  • 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
  • WrapBootStrap – Bootstrap themes gallery. Paid
  • 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.

Posted inFront End, User Interface
Tags: ,
Source: Aj freelancer

via Hacker News http://antjanus.com/blog/web-design-tips/user-interface-usability/customize-twitter-bootstrap-into-themes/

Advertisements

Leave a comment

Filed under Auto

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s