Can you build beautiful sites with Twitter Bootstrap? Hell yes

http://builtwithbootstrap.tumblr.com/post/12613100391/weirdo-cards-great-work-by-mezzoblue-this-is-a

by simonhamp • 15 years ago

215 73 15 years ago

builtwithbootstrap.tumblr.com

jaequery2• 15 years ago

I'm creating an open-source CMS w/ the Twitter Bootstrap for anyone interested: https://github.com/jaequery/jien

jamesbressi2• 15 years ago

Any open source ecomm sites being built?

lukeholder• 15 years ago

with twitter bootstrap?

jamesbressi2• 15 years ago

Yes, I am aware of the alternatives though I haven't looked in a long time. I have always found customization a real pain without advanced PHP knowledge when installing features.

alexwolfe• 15 years ago

Why wouldn't you be able to, it's a good framework with plenty of options. Not to mention the designer/developer can always add/customize on top of it.

Nice collection.

HankMcCoy• 15 years ago

No doubt about it, but why SHOULD you use twitter bootstrap?

These sites could have been created using 960gs-templates as well. Am I missing something here?

Yxven• 15 years ago

960gs is just a grid system.

Bootstrap has a similar grid, but it also has nice styles for everything else.

Bootstrap is not targeted at someone with design skills or someone with access to someone with design skills. It's for programmers like me who don't have artistic ability who are trying to launch minimum viable products that still need to look professional.

I had originally started by trying to customize templates from themeforest, so my sites would look professional except for the parts I had to customize. This isn't good enough.

Bootstrap enables me to build professional looking websites from the ground up (Admittedly, my sites probably look very similar to many other bootstrap sites, but hopefully, they'll work on theming next).

tonycoco3• 15 years ago

It's much more than just a grid. It has patterns for buttons, modals, pop-overs, hero-units, forms and such (including a small unobtrusive JavaScript library). If you need to rapidly prototype designs and layouts, use it. We use it as almost a living wire-frame. Where we can see interaction and UI/UX very close to the full-design spec with little effort from a designer.

danneu2• 15 years ago

The grid is only one of its features. I get the most utility out of Bootstrap's prebaked design features that I have to custom code every time I start new projects. From warning/error/success messages to popovers to simple form aesthetics.

When the most primitive iteration of my application already looks great during development when it's just a simple CRUD prototype, I no longer waste mental energy by being distracted by things not lining up, lacking padding, and generally being no-css-yet ugly off the bat.

crag• 15 years ago

Even the typography in the framework is damn good. I only add a few fonts (like pictos for symbols) and I'm off. By adding a data-grid, additional alert/button colors I got 80% of my work done. It's pretty amazing for me.

But I only work on internal apps. I can see needing to do some serious customization for any public website. But the foundation to build all that is there.

aneth• 15 years ago

Of course I understand the sentiment that everyone wants their site to look fully custom and not like it came from any particular framework, but it's hard to resist the irony that the first thing they have to say is "Hardly looks like a ‘Bootstrap site’ at all."

Kevindish• 15 years ago

Looks really cool! I could see myself using it!

jaequery2• 15 years ago

"if it's good enough for twitter, it's good enough for me" - some dude.

tonycoco3• 15 years ago

We build http://obaz.com with it. It makes patterns for buttons and pop-overs just dead-simple and easily customizable. Not to mention, Rails integration with http://github.com/anjlab/bootstrap-rails

gcaplan• 15 years ago

http://obaz.com looks awesome, who did your design TonyCoco?

tonycoco3• 15 years ago

Well, I did. http://forr.st/-tonycoco

Chicago• 15 years ago

This looks nice.. you built this with Bootstrap?

wushupork4• 15 years ago

The new obaz looks a lot better - well done!

rmason• 15 years ago

I recently built a prototype with Bootstrap. I will never be a designer, but you can turn something out quickly that looks quite professional with very little effort.

What I also like about Bootstrap is that it is continuing to be developed and is the core of one of the most successful products on the web.

mhansen• 15 years ago

I built http://markhansen.co.nz/scatter.fm and http://wirelessmap.markhansen.co.nz/ using Twitter Bootstrap.

The experience was awesome, it made it so easy to experiment and get a prototype out the door quickly. It was great for these little visualisation projects.

grantjgordon• 15 years ago

I've been using BootStrap in my Clients' web apps for a few months now and been very pleased with the results. Thanks to the two that built it!

pamelafox2• 15 years ago

As a single founder/developer, I'm a huge fan of bootstrap. I can handle making the frontend and backend of my site, but I can't necessarily make it pretty - especially because I honestly have kind of tacky taste. With bootstrap, I can get my site to atleast a passable level of prettiness, and not spend all my time tweaking CSS (which can take so damn long).

The main issue I'm seeing with bootstrap use now is lack of customization - everyone using the default colors and styles - so that when you load one of those sites, we think, "a-ha! bootstrap". It probably takes some of the magic out of a site's novelty for developers with that reaction. I'm not sure it affects non-techie consumers -- maybe it's bad if they can't visually distinguish your site, but otherwise, I wonder if they actually notice.

I spent a bit of time customizing the Bootstrap look & feel for my own site - turning that somber black bar into a bright and sunny bar: http://www.everyday.io/ (Screenshot of logged in screen here: http://dl.dropbox.com/u/10998095/Screenshots/bootstraplogged...) I also use bootstrap for the mobile (Phonegap) version of my site, and it works surprisingly well (http://www.everyday.im/learning/switching-jquerymob-bootstra...).

Thanks, bootstrap team!

Hrundi• 15 years ago

Nice site! I should definitely change my eating habits for the better.

Makes me want to resume my bootstrap-based sites, that's for sure. I'm a programmer with a very tacky taste. It took me years to figure out that you can improve design A LOT by reading about color theory, color wheels, Adobe's kuler.

I have a small suggestion if you allow me.

I think I took a long time parsing the phrase: "Want to change your eating habits for the better?"

Maybe you could try: "Change your eating habits for the better!"

If I'm being asked if I want to change my habits, I'm given a choice between yes or no.

If I'm told that in an imperative fashion, It might prompt me to take action.

rossmasters• 15 years ago

I love the site - it actually feels like you're trying to help the user, rather than just providing a data collection tool (which I've found a lot in similar apps).

I wanted to let you know that the big green sign-up button on the homepage doesn't seem to do anything in Chrome. I had to register through Login -> Sign-up.

jshen• 15 years ago

The top bar is messed up on an iPad

Ecio782• 15 years ago

Nice site and I agree that many of these twitter bootstrap sites are not enough customized (especially the menu toolbar)

p.s. as a side note, i dont like the everyday logo too much, it's not so easy to read (just my 2 cents)

ra• 15 years ago

> I can handle making the frontend and backend of my site, but I can't necessarily make it pretty - especially because I honestly have kind of tacky taste.

That's exactly what I'm like... and for the same reason I think bootstrap is a science-send. It raises the lowest common denominator to something almost respectable.

As someone pointed out above, making use of 'less' allows you to rapidly test different color schemes... thereby controlling potential tackiness.

pamelafox2• 15 years ago

So, unfortunately, I made the decision to use Sass/Compass for my CSS before I started using Bootstrap, and when I saw that they used Less I considered switching over, but it doesn't have as many features as Compass - like icon spriting. I could complement Less with other tools but I decided to stick with Compass for now. It's actually still pretty straightforward to customize the color schemes without the Less variables.

(Pro tip: I often look at Bootstrap's uncompressed Less CSS to figure out how to customize in the simplest way.)

bcn2• 15 years ago

Bootstrap on drupal: http://thestreethub.com/

Ecio782• 15 years ago

how is it done? I've read that there are problems with licensing: http://drupal.org/node/1284152 mainly for posting a twitter bootstrap derived theme on drupal.org

thanks

bcn2• 15 years ago

We did our own implementation, but as you've seen, it's not possible to distribute on drupal.org. More details can be found at http://drupal.org/node/1255934.

simonhamp• 15 years ago

For those of you posting links to your sites that are built on Bootstrap, be sure to submit them to Built With Bootstrap to get some free promotion of your own!

http://builtwithbootstrap.tumblr.com/submit

wushupork4• 15 years ago

Somebody should build a Bootstrap version of Jquery UI

tmcdonald• 15 years ago

Bootstrap has enabled me to work on many more hobby projects than I would have ever done before.

As a student developer with a lack of any sort of design talent, being able to whack out a site with the styling Bootstrap provides means I have to spend less time playing around with CSS, for a much better result.

I guess this would also be the time to plug my SASS conversion of Bootstrap which is ready to drop right into the Rails asset pipeline with no additional dependencies, while retaining the mixins and variables from Bootstrap. It's also a dependency of rails_admin, so you might be using it without realising: https://github.com/thomas-mcdonald/bootstrap-sass

wushupork4• 15 years ago

Not to knock Twitter Bootstrap off the pedestal, but Zurb Foundation is also pretty good. http://foundation.zurb.com/

It looks a lot like Bootstrap because it's based off it I believe but it's also responsive and has stuff to handle different device types which is pretty cool.

BTW, I don't have any connections to Zurb whatsoever

hackernews2• 15 years ago

When I looked at Zurb vs Bootstrap, I wanted to use Zurb but the default form styling turned me off. When I am looking for a style guide the first thing I do is find the forms cause that is IMO the most difficult part of styling a web app.

firefoxman12• 15 years ago

Really? All you have to do is add the class "nice" to the form element and it becomes very pretty.

http://foundation.zurb.com/docs/forms.php ...scroll down to "Nice Forms"

travisfischer• 15 years ago

Twitter Bootstrap is great tool for solo devs to do rapid development.

I have built http://smacktweets.com totally on my own in a few weekends. I'm someone who is pretty terrible at design and while smacktweets.com shows it, Bootstrap has definitely helped me maintain some level of "slickness" in my initial design.

I will probably eventually get a designer involved and wouldn't be surprised if I bailed on bootstrap at that point in favor of an entirely custom front-end but for rapid weekend development it's serving me very well.

nikcub2• 15 years ago

The key to getting the most out of Bootstrap is to use the less modules.

I created a fork of bootstrap where I setup the following:

* boostrap files are in a subdir called 'boostrap'

* in the 'css' directory create a less file for each style sheet, for eg. site.less, admin.less

* in that site file, place all your variables and then include all the bootstrap files

* under that, put in all your custom CSS

* here is an example: https://gist.github.com/1356716

* the top of the file is the contents of variables.less, then the includes, then custom CSS

* copy the Makefile into your 'css' folder, and edit it to change the right paths

* put your color theme (3, 4 o4 5 colors) at the top of the file and define them as variables. declare everything else (links, topbar etc.) as one of these colors or a lighter(), darker() etc. variation

* there are tons of online color matchin sites, including the excellent Adobe Kuler - pick a color theme and plug it into less

* learn how to use less: http://lesscss.org/

* instead of using span8, span14 etc. learn how to inherit in less. for eg. a sidebar 4 spans wide would be:

    #sidebar {
      ..makeColumn(4)
    }

* use macro's to create your own custom gradients, for eg.

    .lightblue {
      .gradientBar(#5bc0de, #339bb9);
    }

* use those mixins to create custom button styles. for eg. to create a custom topbar fill using the lightblue:

    .topbar.fill {
       .box-shadow();
       .lightBlue();
    }

* also, I wrote another script that will autorefresh your browser in OSX when you save your less. so the combination of this makefile and this applescript will build the css file from less and refresh your browser whenever you save:

https://gist.github.com/1326820

ammmir• 15 years ago

great tips! auto reloading css is perhaps my most favorite timesaver. i add this snippet to a page when in development:

  <script>
    if(location.href.indexOf('file://') == 0 || location.href.indexOf('http://localhost') == 0) {
      var s = document.createElement('script'); s.async = true;
      s.src = 'js/css_auto-reload.js'; s.onload = function() {
        document.styleSheets.start_autoreload(1000);
      };
      document.getElementsByTagName('head')[0].appendChild(s);
    }
  </script>

it uses http://nv.github.com/css_auto-reload/ and updates the page (in place) nearly instantly after i save css in my editor. i use sassy/scss, so i also run "compass watch" in a terminal. it's css tweaking heaven for me :)

tomvo• 15 years ago

check out LiveReload, does that plus auto compile.

gerrit• 15 years ago

If youre using less.js, there's no need to write custom code to auto refresh the CSS, it has that feature built in:

  <link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
  <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js></script>
  <script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
  </script>

spencerelliott• 15 years ago

I've just started playing with Bootstrap and I'm loving it. I have a pragmatic mind and less of an artistic mind - a.k.a I have no art skills. It makes it really easy to get a nice looking interface quickly so I can test an idea and actually see what it'll look like with minimal effort.

Plus, I can focus more on the implementation of the backend code and less time worrying about making all of the stylesheets, etc.

xyzzyb• 15 years ago

Bootstrap is awesome. I've built my "about me" site http://sdball.github.com and http://movieterminals.com using it.

With Bootstrap I can think more about the app and defer the styling until I really care about it; but not run a bad looking coder design.

firefoxman12• 15 years ago

Is anyone else starting to get annoyed by the fixed-to-top navigation trend? I think, just like most web trends, it's appropriate or beneficial in some cases, but it seems like everyone is jumping on the bandwagon now.

The main issues are that they take up screen space and they don't work on mobile browsers like iPhone and they only partially work on devices like tablets.

nzadrozny• 15 years ago

On my recent bootstrap-based hacking, adding a 'static' class for the topbar has consistently been customization number one.

.topbar.static { position: static; }

danneu2• 15 years ago

I find myself only bothering me when the top bar is taller than the navigation link. For example, the featured website in the OP blog: http://www.weirdocards.com/. The top padding strikes me as an unnecessary aesthetic.

But I otherwise appreciate the functionality of the default, thin bar where I've encountered it. Even on my netbook. The small expense of screen real estate is compensated by not having to scroll all the way up to navigate and search.

icebraining2• 15 years ago

Well, that's what the Home button - or in my case, the Fn+Left combo - is for.

icebraining2• 15 years ago

Agreed. Another issue with them is that they break "space scrolling": browsers are designed to jump a full viewport height when you press space, but since they don't recognize the fixed top bar, part of the content gets hidden behind it.

I like this[1] compromised solution - hide the menu but leaving a fixed-to-top button to make it reappear.

[1] http://www.webresourcesdepot.com/wp%2Dcontent/uploads/file/j...

joe-mccann2• 15 years ago

http://dillinger.io

A 6 hour project I put together including porting bootstrap to Stylus.

It's a web based markdown editor for proper WebKits at the moment.

marekmroz• 15 years ago

Is there a place I can get your Stylus port? You may consider adding it here https://github.com/twitter/bootstrap/wiki/Forks%2C-Plugins%2...

joe-mccann2• 15 years ago

I'll be open sourcing all of Dillinger soon so the port will be in there.

thegyppo• 15 years ago

We're working on something that allows merchants to build customised coupon pages for their business imagine coupons.walmart.com.

We've mostly used Bootstrap, however it'll be interesting when businesses ask the pages to look like their current stylesheet.

Example: http://istockphoto.couponzor.com/

ssharp• 15 years ago

I used Bootstrap to apply a new UI to a relatively simple internal webapp we use. It was ridiculously easy to get a really clean UI thrown together in an afternoon.

I'm sure it would be a lot more work to use Bootstrap for a public front-end interface and avoid looking generic, but for the back-end, it's fantastic.

phzbOx• 15 years ago

I've released a functional python library and I've written the doc with bootstrap (www.phzbox.com/moka/) Was amazed by its simplicity.

ianstormtaylor• 15 years ago

Maybe. They have covered several design decisions that trump the average person, mainly in the typography department. So yes, it ups the baseline for people who don't know anything.

But understand that "beautiful" is a very small part of what makes a site good.

cschmidt• 15 years ago

Bootstrap has saved me so much time. After using it, I'm wondering why everyone is so interested in having a custom look. Web design at the moment feels like desktop computers before GUI's became standardized. Why does a menu look different on every site? Is that good for users?

I feel a little relief when I hit a "standard" bootstrap site, as I know how it will work. In some ways Bootstrap is that first standard look and feel for the web.

With most sites, the GUI is not the value added part. If it isn't, then why work on customizing it? Make it easy for your users and use a standard.

(I'm certainly not the first to have these ideas. Dave Winer has been talking about it as well.)

perfunctory• 15 years ago

> Web design at the moment feels like desktop computers before GUI's became standardized. Why does a menu look different on every site?

Exactly. As a user I don't really care how a menu looks like on a ecommerse site. As long as I get a good deal.

highpixels• 15 years ago

You wouldn't go into a restaurant which had the same generic "look". How dull would life be if all buildings have the same generic style; all shop fronts had their name printed in the same size, font and colour; all menus looked alike and everyone drove the same car?

A standardised GUI is not the same as standardised branding.

TylerE• 15 years ago

Every american chain "grill" would disagree with you.

chrisconley• 15 years ago

For a new project, I spent 1.5 hours in Balsamiq and 6 more implementing the mockup with bootstrap in rails 3.1.

The end result is quite nice looking functional prototype that's already in a good place to start building the actual app upon. Couldn't be happier.

venturebros• 15 years ago

Is there anything similar to bootstrap? Just wondering what else is out there.

tathagatadg• 15 years ago

I started using bootstrap for my a homework assignment and my only regret is that why didn't I adopt it before! I've used blueprint before but bootstrap is just so idealistic - earlier I've struggled for hours to vertically align image and multiline text. Bootstrap just takes care of the OCDs when non-designers feel frustrated with the lack of design skills!

_frog• 15 years ago

Just thought I'd share my WIP port of Bootstrap to Sass, it's probably going to change a bit as I plan to make the styles for forms and such work with Rails' default generated HTML, but it's worth a look.

http://frogbot.github.com/sassy-bootstrap/

matsimitsu• 15 years ago

Just a heads up: I you use simple_form, they already have a way to adapt the forms to bootstrap and the results are great! (simple_form master)

mike25x• 15 years ago

we used bootstrap in our site, we really like this implementation i think is quick and nice enough to build a website ,we are now cleaning the css and inline styles for addittional stuff and in my case i learned a lot of css.

the only disadvantage i see is compatibility with older and not so older browsers.

http://www.lacomanda.com/

leouznw• 15 years ago

such cool idea, it will save me a lot of time

MattBearman• 15 years ago

I like to think my latest little project (http://dashpoll.com) is fairly easy on the eyes, and that's just default Twitter Bootstrap with a custom header.

Best of all it allowed me to focus on the programming and finish the entire site in 10 hours.

Can you build beautiful sites with Twitter Bootstrap? Hell yes

Related Stories