Can you build beautiful sites with Twitter Bootstrap? Hell yes
builtwithbootstrap.tumblr.com
builtwithbootstrap.tumblr.com
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)
}
.lightblue {
.gradientBar(#5bc0de, #339bb9);
}
.topbar.fill {
.box-shadow();
.lightBlue();
}
<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>
<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>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!
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.
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.
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)
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.
(Pro tip: I often look at Bootstrap's uncompressed Less CSS to figure out how to customize in the simplest way.)
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
http://foundation.zurb.com/docs/forms.php ...scroll down to "Nice Forms"
http://twitter.github.com/bootstrap/#forms
there is a big difference.
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.)
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.
A standardised GUI is not the same as standardised branding.
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.
.topbar.static { position: static; }
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.
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...
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
Nice collection.
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.
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.
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.
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.
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.
Plus, I can focus more on the implementation of the backend code and less time worrying about making all of the stylesheets, etc.
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.
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/
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.
Best of all it allowed me to focus on the programming and finish the entire site in 10 hours.
thanks
But understand that "beautiful" is a very small part of what makes a site good.
the only disadvantage i see is compatibility with older and not so older browsers.
These sites could have been created using 960gs-templates as well. Am I missing something here?
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).
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.
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.