7 ms·

Can you build beautiful sites with Twitter Bootstrap? Hell yes

215 points by simonhamp 15y ago

jaequery 15y ago
I'm creating an open-source CMS w/ the Twitter Bootstrap for anyone interested: https://github.com/jaequery/jien https://github.com/jaequery/jien
jamesbressi 15y ago
Any open source ecomm sites being built?
- lukeholder 15y ago
  with twitter bootstrap?
  - jamesbressi 15y 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 15y 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 15y 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 15y 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).
- tonycoco 15y 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.
- danneu 15y 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 15y 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 15y 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 15y ago
Looks really cool! I could see myself using it!
jaequery 15y ago
"if it's good enough for twitter, it's good enough for me" - some dude.
tonycoco 15y ago
We build http://obaz.com 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 http://github.com/anjlab/bootstrap-rails
- gcaplan 15y ago
  http://obaz.com http://obaz.com looks awesome, who did your design TonyCoco?
  - tonycoco 15y ago
    Well, I did. http://forr.st/-tonycoco http://forr.st/-tonycoco
- Chicago 15y ago
  This looks nice.. you built this with Bootstrap?
- wushupork 15y ago
  The new obaz looks a lot better - well done!
rmason 15y 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 15y ago
I built http://markhansen.co.nz/scatter.fm http://markhansen.co.nz/scatter.fm and http://wirelessmap.markhansen.co.nz/ 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 15y 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!
pamelafox 15y 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/ http://www.everyday.io/ (Screenshot of logged in screen here: http://dl.dropbox.com/u/10998095/Screenshots/bootstraploggedin.png 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-bootstrap.html http://www.everyday.im/learning/switching-jquerymob-bootstra...). Thanks, bootstrap team!
- Hrundi 15y 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 15y 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.
bcn 15y ago
Bootstrap on drupal: http://thestreethub.com/ http://thestreethub.com/
- Ecio78 15y ago
  how is it done? I've read that there are problems with licensing: http://drupal.org/node/1284152 http://drupal.org/node/1284152 mainly for posting a twitter bootstrap derived theme on drupal.org thanks
  - bcn 15y 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 http://drupal.org/node/1255934.
    - nikcub 15y ago
      crazy, this is all supposed to be 'free' and 'open' software. politics getting in the way
simonhamp 15y 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 http://builtwithbootstrap.tumblr.com/submit
wushupork 15y ago
Somebody should build a Bootstrap version of Jquery UI
tmcdonald 15y 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 https://github.com/thomas-mcdonald/bootstrap-sass
wushupork 15y ago
Not to knock Twitter Bootstrap off the pedestal, but Zurb Foundation is also pretty good. http://foundation.zurb.com/ 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
- hackernews 15y 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.
  - firefoxman1 15y 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 http://foundation.zurb.com/docs/forms.php ...scroll down to "Nice Forms"
    - hackernews 15y ago
      It just doesn't work for me. Compare that to: http://twitter.github.com/bootstrap/#forms http://twitter.github.com/bootstrap/#forms there is a big difference.
      - kellishaver 15y ago
        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.
      - wushupork 15y ago
        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)
travisfischer 15y ago
Twitter Bootstrap is great tool for solo devs to do rapid development. I have built http://smacktweets.com 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.
nikcub 15y 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 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/ 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 https://gist.github.com/1326820
- ammmir 15y 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/ 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 :)
xyzzyb 15y ago
Bootstrap is awesome. I've built my "about me" site http://sdball.github.com http://sdball.github.com and http://movieterminals.com 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.
spencerelliott 15y 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.
deleted 15y ago
[deleted]
- OstiaAntica 15y ago
  You have an SSL certificate problem with heroku, getting a warning.
  - deleted 15y ago
    [deleted]
    - southpolesteve 15y ago
      https without www is a pain on heroku. I would redirect everything to www. If it makes you feel any better, this doesn't work: https://amazon.com https://amazon.com
firefoxman1 15y 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 15y ago
  On my recent bootstrap-based hacking, adding a 'static' class for the topbar has consistently been customization number one. .topbar.static { position: static; }
- danneu 15y 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/ 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.
  - icebraining 15y ago
    Well, that's what the Home button - or in my case, the Fn+Left combo - is for.
- icebraining 15y 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/jquery%2Dsliding%2Dmenu/ http://www.webresourcesdepot.com/wp%2Dcontent/uploads/file/j...
joe-mccann 15y ago
http://dillinger.io 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 15y 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%2C-and-Packages https://github.com/twitter/bootstrap/wiki/Forks%2C-Plugins%2...
  - joe-mccann 15y ago
    I'll be open sourcing all of Dillinger soon so the port will be in there.
thegyppo 15y 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/ http://istockphoto.couponzor.com/
ssharp 15y 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 15y 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 15y 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 15y 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 15y 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 15y 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 15y ago
    Every american chain "grill" would disagree with you.
chrisconley 15y 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 15y ago
Is there anything similar to bootstrap? Just wondering what else is out there.
- deleted 15y ago
  [deleted]
- apechai 15y ago
  There's Skeleton http://www.getskeleton.com/ http://www.getskeleton.com/ and Blueprint http://blueprintcss.org/ http://blueprintcss.org/ Skeleton has an emphasis on responsive design and like Bootstrap, is also by a twitter employee. Blueprint's designs are a little outdated. Does anyone have experience with Bootstrap and Skeleton and how they compare?
tathagatadg 15y 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 15y 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/ http://frogbot.github.com/sassy-bootstrap/
- matsimitsu 15y 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 15y 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/ http://www.lacomanda.com/
leouznw 15y ago
such cool idea, it will save me a lot of time
MattBearman 15y ago
I like to think my latest little project (http://dashpoll.com 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.
keke_ta 15y ago
Using Bootstrap, I've built http://patrongeek.com http://patrongeek.com that is ranking system based on Kickstarter. This is my first web site. Bootstrap is awesome.

215 points by simonhamp 15y ago

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

jamesbressi 15y ago

Any open source ecomm sites being built?

lukeholder 15y ago
with twitter bootstrap?
- jamesbressi 15y 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 15y 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 15y 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 15y 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).
tonycoco 15y 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.
danneu 15y 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 15y 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 15y 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 15y ago

Looks really cool! I could see myself using it!

jaequery 15y ago

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

tonycoco 15y ago

We build http://obaz.com 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 http://github.com/anjlab/bootstrap-rails

gcaplan 15y ago
http://obaz.com http://obaz.com looks awesome, who did your design TonyCoco?
- tonycoco 15y ago
  Well, I did. http://forr.st/-tonycoco http://forr.st/-tonycoco
Chicago 15y ago
This looks nice.. you built this with Bootstrap?
wushupork 15y ago
The new obaz looks a lot better - well done!

rmason 15y 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 15y ago

I built http://markhansen.co.nz/scatter.fm http://markhansen.co.nz/scatter.fm and http://wirelessmap.markhansen.co.nz/ 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 15y 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!

pamelafox 15y 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/ http://www.everyday.io/ (Screenshot of logged in screen here: http://dl.dropbox.com/u/10998095/Screenshots/bootstraploggedin.png 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-bootstrap.html http://www.everyday.im/learning/switching-jquerymob-bootstra...). Thanks, bootstrap team!

Hrundi 15y 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 15y 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.

bcn 15y ago

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

Ecio78 15y ago
how is it done? I've read that there are problems with licensing: http://drupal.org/node/1284152 http://drupal.org/node/1284152 mainly for posting a twitter bootstrap derived theme on drupal.org thanks
- bcn 15y 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 http://drupal.org/node/1255934.
  - nikcub 15y ago
    crazy, this is all supposed to be 'free' and 'open' software. politics getting in the way

simonhamp 15y 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 http://builtwithbootstrap.tumblr.com/submit

wushupork 15y ago

Somebody should build a Bootstrap version of Jquery UI

tmcdonald 15y 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 https://github.com/thomas-mcdonald/bootstrap-sass

wushupork 15y ago

Not to knock Twitter Bootstrap off the pedestal, but Zurb Foundation is also pretty good. http://foundation.zurb.com/ 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

hackernews 15y 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.
- firefoxman1 15y 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 http://foundation.zurb.com/docs/forms.php ...scroll down to "Nice Forms"
  - hackernews 15y ago
    It just doesn't work for me. Compare that to: http://twitter.github.com/bootstrap/#forms http://twitter.github.com/bootstrap/#forms there is a big difference.
    - kellishaver 15y ago
      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.
    - wushupork 15y ago
      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)

travisfischer 15y ago

Twitter Bootstrap is great tool for solo devs to do rapid development. I have built http://smacktweets.com 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.

nikcub 15y 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 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/ 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 https://gist.github.com/1326820

ammmir 15y 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/ 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 :)

xyzzyb 15y ago

Bootstrap is awesome. I've built my "about me" site http://sdball.github.com http://sdball.github.com and http://movieterminals.com 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.

spencerelliott 15y 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.

deleted 15y ago

[deleted]

OstiaAntica 15y ago
You have an SSL certificate problem with heroku, getting a warning.
- deleted 15y ago
  [deleted]
  - southpolesteve 15y ago
    https without www is a pain on heroku. I would redirect everything to www. If it makes you feel any better, this doesn't work: https://amazon.com https://amazon.com

firefoxman1 15y 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 15y ago
On my recent bootstrap-based hacking, adding a 'static' class for the topbar has consistently been customization number one. .topbar.static { position: static; }
danneu 15y 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/ 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.
- icebraining 15y ago
  Well, that's what the Home button - or in my case, the Fn+Left combo - is for.
icebraining 15y 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/jquery%2Dsliding%2Dmenu/ http://www.webresourcesdepot.com/wp%2Dcontent/uploads/file/j...

joe-mccann 15y ago

http://dillinger.io 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 15y 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%2C-and-Packages https://github.com/twitter/bootstrap/wiki/Forks%2C-Plugins%2...
- joe-mccann 15y ago
  I'll be open sourcing all of Dillinger soon so the port will be in there.

thegyppo 15y 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/ http://istockphoto.couponzor.com/

ssharp 15y 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 15y 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 15y 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 15y 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 15y 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 15y 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 15y ago
  Every american chain "grill" would disagree with you.

chrisconley 15y 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 15y ago

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

deleted 15y ago
[deleted]
apechai 15y ago
There's Skeleton http://www.getskeleton.com/ http://www.getskeleton.com/ and Blueprint http://blueprintcss.org/ http://blueprintcss.org/ Skeleton has an emphasis on responsive design and like Bootstrap, is also by a twitter employee. Blueprint's designs are a little outdated. Does anyone have experience with Bootstrap and Skeleton and how they compare?

tathagatadg 15y 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 15y 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/ http://frogbot.github.com/sassy-bootstrap/

matsimitsu 15y 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 15y 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/ http://www.lacomanda.com/

leouznw 15y ago

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

MattBearman 15y ago

I like to think my latest little project (http://dashpoll.com 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.

keke_ta 15y ago

Using Bootstrap, I've built http://patrongeek.com http://patrongeek.com that is ranking system based on Kickstarter. This is my first web site. Bootstrap is awesome.