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.
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.
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 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.
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.
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.)
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!
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
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)
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.
* 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 :)
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.
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.
80 comments
[ 2.9 ms ] story [ 89.7 ms ] threadNice collection.
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.
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.
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.
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.)
thanks
http://builtwithbootstrap.tumblr.com/submit
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
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 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 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
Plus, I can focus more on the implementation of the backend code and less time worrying about making all of the stylesheets, etc.
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.
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...
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.
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/