* 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
* 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:
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 :)
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.
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.
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.
> 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.
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.)
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
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.
To each their own. It's largely a matter of opinion and getting forms right is tricky, but from an accessibility standpoint, I much prefer Zurb's forms... much better contrast and easier to read.
I agree that for forms - bootstrap has it much nicer. It wouldn't be hard to transplant one into the other depending on your needs (responsive vs forms)
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.)
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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!
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.
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.
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
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.
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!
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.
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.
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.
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).
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.
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.
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.
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."
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:
* use macro's to create your own custom gradients, for eg. * use those mixins to create custom button styles. for eg. to create a custom topbar fill using the 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