8 ms·

Show HN: Bootswatch, free swatches for your Bootstrap site

407 points by parkov 15y ago

quan 15y ago
Wow, what a coincidence! I just created a very similar project http://www.lavishbootstrap.com/ http://www.lavishbootstrap.com/ How did you generate the different themes, and are they stored in different css/less files?
- parkov 15y ago
  Cool project! I ended up doing most of it by hand. I started by just playing around with variables.less, but it wasn't giving me the variety I wanted, so I added an extra less file for more custom stuff. You can check them out on the gh-pages branch in GitHub: https://github.com/thomaspark/bootswatch https://github.com/thomaspark/bootswatch
- creatom 15y ago
  You website gives an error.
  - quan 15y ago
    Bad idea posting to HN with only 1 dyno, I cached the default color scheme so homepage should load a lot faster now.
    - joshmanders 15y ago
      Application error.
    - stephenhuey 15y ago
      It's up for me now! I only had to refresh once. Thanks for providing this.
    - nyrb 15y ago
      still getting application error.
- ed209 15y ago
  nice work. I think you could tune this a bit more to pick the right colours for the right elements, bad contrast and clashing colours sometimes appear. but nice effort, bookmarked :)
  - quan 15y ago
    thanks, some intelligent way to automatically assign colors would be nice. May be I'll look at colors brightness and hue. For now, you can manually reassign them if the generated theme doesn't work.
    - ismarc 15y ago
      It's over a dozen hours later, but... In the past I've used relative luminance to determine whether to display light or dark text on a colored background (take relative luminance of both, determine contrast ratio, don't remember exactly what ratio was required, I believe 5:1). You could use a similar method for the generated colors and use low ratios for things like gradients and high ratios for highlight buttons, etc.
- kcima 15y ago
  Original post is cool, but has only 6 color schemes. I really like how your site generates a bootstrap color theme from an image of your choice.. works very well.
- brador 15y ago
  I really like this, maybe add some more sample images, the ones that are there don't work so well...
- ilcavero 15y ago
  very cool site you should be the one in front page, do you get the colors out of the picture at random or you do some analysis to assign the darkest color to the background or something similar?
- systemsoverload 15y ago
  If you want to get insta-front-paged, you should look into some kind of hooks into adobe kuler themes...
- jentulman 15y ago
  Very nice, I just tried feeding it a few recent penny-arcade strips (I've always like their colouring) and it' thrown back some nice choices.
- rrrhys 15y ago
  This is fantastic, you should make a submission so it gets the credit it deserves. I'm terrible at creating nice colour-sets and looking forward to making my bootstrap based projects less 'out of the box' looking.
- redslazer 15y ago
  That looks really amazing, i have also tried a couple of pictures and it works really well. I was wondering if it would be possible to share a link with the picture attached allready, so you could show the theme to other people easily?
  - quan 15y ago
    Just append image_url parameter like this: http://www.lavishbootstrap.com/?image_url=http://farm2.staticflickr.com/1156/5104802230_103b475358.jpg http://www.lavishbootstrap.com/?image_url=http://farm2.stati...
- mattmaroon 15y ago
  That's awesome and deserves a post of its own. I'd love to see a feature that let you preview some dummy site with the theme you generate.
- josscrowcroft 15y ago
  Combine with http://design-seeds.com/ http://design-seeds.com/ for maximum "hell yeah" e.g.: http://www.lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/CarnivalHues505.png http://www.lavishbootstrap.com/?image_url=http://design-seed...
- nrbafna 15y ago
  I had been putting away the idea of doing for several weekends now. Great implementation.
creatom 15y ago
Just awesome, that's exactly what Bootstrap was missing! I hope your project will grow big, good luck! P.S. That would be even cooler if there were more dark themes.
thehodge 15y ago
This is fantastic and just what bootstrap needs to stop people complaining about all the bootstrap sites looking the same.. I hope this stays on the frontpage a while so more people can find out and contribute..
radagaisus 15y ago
Nice work. thanks!
jsavimbi 15y ago
That's really nice, thank you. All I did was download the file and replaced my existing bootstrap.min.css with it and it works great.
mcobrien 15y ago
This is great! One minor thing I noticed is that on the homepage, the bottom three swatches don't seem to link to individual files properly -- they all download the bootstrap.min.css, regardless of what you choose in the split button.
deleted 15y ago
[deleted]
PaulAnunda 15y ago
this is awesome, thanks for the contribution!
joshmanders 15y ago
What would be awesome is a way to select all custom colors and build a unique bootstrap swatch right on the site with live preview, like http://bytefluent.com/vivify/ http://bytefluent.com/vivify/ does for VIM color schemes.
jonny_eh 15y ago
This is very very cool. It'd be even cooler if users could customize the themes right on the site, but that's probably obvious and not easy to implement.
- moe 15y ago
  At the current pace of the bootstrap ecosystem I wouldn't be surprised to see that announced here on HN within the next couple weeks...
rvenugopal1 15y ago
This is awesome. I presume this is targeted at Bootstrap 2.0. Correct? One question I have is, how do you plan to deal with changing versions of Bootstrap. Just so I understand, are you recommending dropping the chosen variables.less along with bootstrap less files to compile it? Thanks
- parkov 15y ago
  Yes, it's targeting 2.0. Both the CSS and LESS files will be kept in sync with Bootstrap. So you won't need to compile anything, just download the latest swatch CSS.
  - rvenugopal1 15y ago
    I didn't see a target bootstrap version at http://bootswatch.com/spacelab/bootstrap.min.css http://bootswatch.com/spacelab/bootstrap.min.css Hence, I assumed that we had to compile the less files. Also, not everyone will be willing to move to the latest version of bootstrap. It might be easier to let github manage the multiple versions with a download page similar to this https://github.com/wycats/handlebars.js/downloads https://github.com/wycats/handlebars.js/downloads . Personally, I don't mind doing the extra step of lessc if I can get exactly what I want. Thanks for the effort.
railsmax 15y ago
That's really cool!!! Thanks a lot !!!
tormentor 15y ago
Awesome! Soon all our sites will look like bootstrap but now with a variety of different colors. THANKS!! CSS is so hard.
- tormentor 15y ago
  lmfao your all idiots. this is why stupid shit like this makes it to the top. im going to reddit
  - joshmanders 15y ago
    Heaven forbid something helpful to the community and makes it easier to get something useful to a level of eye pleasing is a wrong thing.
    - tormentor 15y ago
      Heaven forbid you actually learn some CSS and change a couple of HEX codes.
Blocks8 15y ago
Nice site. I bookmarked it but it would be cool to sign up for a email when there are new themes available. A very passive way to stay top of mind. Thanks for creating this!
tormentor 15y ago
http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-starting-from-scratch-2 http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-st...
stdbrouw 15y ago
It's interesting to see Bootstrap is slowly turning into what jQuery UI was always supposed to be.
- vyrotek 15y ago
  Agreed. The current state of jQuery UI is what pushed me to consider other frameworks such as Dojo (which I'm really enjoying). I've also started using Bootstrap on a new project and really like it as well. I just need more components! :)
  - whatusername 15y ago
    Do you know of a good alternative to jqui Sortable? That's the only reason I still keep it around for a couple of projects.
  - mitchellmckenna 15y ago
    What are some of the components you think it's missing?
    - vyrotek 15y ago
      I've been spoiled by Dojo with these components: - Rich DataGrid with ajax pagination & filtering - DropDown with ajax source for typeahead feature I also think Bootstrap needs an initial set of distinct looking themes. Not just different colors but fonts, padding, sizes etc. It would help me feel confident that I would be able to create something that doesn't look like everyone else's site.
- moe 15y ago
  I find it doubly interesting since bootstrap isn't even very good code (albeit slowly improving). Completeness, documentation and brand name really trump technical excellence here. Either way, it's great to have one of these frameworks finally pick up steam, that's been long overdue!
  - 15y ago
alanmeaney 15y ago
Thanks Thomas, this is great. Really wanted to customize bootstrap for a demo site for a project I'm working on and your Spacelab swatch is perfect, saved me loads of time. I'll drop you a mail for a peak when it's live, should be in the next week or so.
wildmXranat 15y ago
As a developer, I'm not kidding when I say that Bootstrap and related projects made it feel like perpetual Christmas. Thanks mate!
- joshmanders 15y ago
  Agreed whole heartily.
corroded 15y ago
Isn't this almost the same as this? wrapbootstrap.com/themes which was featured a couple of days ago? Maybe you could submit your "swatches" as themes and earn a couple of bucks :)
pinchyfingers 15y ago
My life keeps getting better. Thanks you, Thomas and Quan, both. I always leave the front-end work for last because design is ridiculously more difficult than coding. Guys like your are easing the anxiety I feel every time I start trying to figure out colors, fonts, layout, etc.
josscrowcroft 15y ago
I love the concept - my only problem with it is that the six starter themes (swatches) featured on the site aren't really attractive enough, more like failed experiments... it could benefit from a design-off where popular designers create a swatch with their own take on the Bootstrap, and submit it to the site... PS: Overheard on Twitter (https://twitter.com/#!/bcherry/status/169960949967626241 https://twitter.com/#!/bcherry/status/169960949967626241): New web dev trend: "Yo dawg I heard you like Bootstrap so I made bootstrap for your Bootstrap so you can bootstrap while you Bootstrap."
arturadib 15y ago
More and more folks are realizing the power of Open Source - why limit it to functional code when we all need design just as much? This is a fantastic trend, and (I hope) just the beginning.
mobytea 15y ago
great stuff, lavishbootstrap is great too. hope that maybe the kuler color schema or the colourlovers api get inside!

407 points by parkov 15y ago

quan 15y ago

Wow, what a coincidence! I just created a very similar project http://www.lavishbootstrap.com/ http://www.lavishbootstrap.com/ How did you generate the different themes, and are they stored in different css/less files?

parkov 15y ago
Cool project! I ended up doing most of it by hand. I started by just playing around with variables.less, but it wasn't giving me the variety I wanted, so I added an extra less file for more custom stuff. You can check them out on the gh-pages branch in GitHub: https://github.com/thomaspark/bootswatch https://github.com/thomaspark/bootswatch
creatom 15y ago
You website gives an error.
- quan 15y ago
  Bad idea posting to HN with only 1 dyno, I cached the default color scheme so homepage should load a lot faster now.
  - joshmanders 15y ago
    Application error.
  - stephenhuey 15y ago
    It's up for me now! I only had to refresh once. Thanks for providing this.
  - nyrb 15y ago
    still getting application error.
ed209 15y ago
nice work. I think you could tune this a bit more to pick the right colours for the right elements, bad contrast and clashing colours sometimes appear. but nice effort, bookmarked :)
- quan 15y ago
  thanks, some intelligent way to automatically assign colors would be nice. May be I'll look at colors brightness and hue. For now, you can manually reassign them if the generated theme doesn't work.
  - ismarc 15y ago
    It's over a dozen hours later, but... In the past I've used relative luminance to determine whether to display light or dark text on a colored background (take relative luminance of both, determine contrast ratio, don't remember exactly what ratio was required, I believe 5:1). You could use a similar method for the generated colors and use low ratios for things like gradients and high ratios for highlight buttons, etc.
kcima 15y ago
Original post is cool, but has only 6 color schemes. I really like how your site generates a bootstrap color theme from an image of your choice.. works very well.
brador 15y ago
I really like this, maybe add some more sample images, the ones that are there don't work so well...
ilcavero 15y ago
very cool site you should be the one in front page, do you get the colors out of the picture at random or you do some analysis to assign the darkest color to the background or something similar?
systemsoverload 15y ago
If you want to get insta-front-paged, you should look into some kind of hooks into adobe kuler themes...
jentulman 15y ago
Very nice, I just tried feeding it a few recent penny-arcade strips (I've always like their colouring) and it' thrown back some nice choices.
rrrhys 15y ago
This is fantastic, you should make a submission so it gets the credit it deserves. I'm terrible at creating nice colour-sets and looking forward to making my bootstrap based projects less 'out of the box' looking.
redslazer 15y ago
That looks really amazing, i have also tried a couple of pictures and it works really well. I was wondering if it would be possible to share a link with the picture attached allready, so you could show the theme to other people easily?
- quan 15y ago
  Just append image_url parameter like this: http://www.lavishbootstrap.com/?image_url=http://farm2.staticflickr.com/1156/5104802230_103b475358.jpg http://www.lavishbootstrap.com/?image_url=http://farm2.stati...
mattmaroon 15y ago
That's awesome and deserves a post of its own. I'd love to see a feature that let you preview some dummy site with the theme you generate.
josscrowcroft 15y ago
Combine with http://design-seeds.com/ http://design-seeds.com/ for maximum "hell yeah" e.g.: http://www.lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/CarnivalHues505.png http://www.lavishbootstrap.com/?image_url=http://design-seed...
nrbafna 15y ago
I had been putting away the idea of doing for several weekends now. Great implementation.

creatom 15y ago

Just awesome, that's exactly what Bootstrap was missing! I hope your project will grow big, good luck! P.S. That would be even cooler if there were more dark themes.

thehodge 15y ago

This is fantastic and just what bootstrap needs to stop people complaining about all the bootstrap sites looking the same.. I hope this stays on the frontpage a while so more people can find out and contribute..

radagaisus 15y ago

Nice work. thanks!

jsavimbi 15y ago

That's really nice, thank you. All I did was download the file and replaced my existing bootstrap.min.css with it and it works great.

mcobrien 15y ago

This is great! One minor thing I noticed is that on the homepage, the bottom three swatches don't seem to link to individual files properly -- they all download the bootstrap.min.css, regardless of what you choose in the split button.

deleted 15y ago

[deleted]

PaulAnunda 15y ago

this is awesome, thanks for the contribution!

joshmanders 15y ago

What would be awesome is a way to select all custom colors and build a unique bootstrap swatch right on the site with live preview, like http://bytefluent.com/vivify/ http://bytefluent.com/vivify/ does for VIM color schemes.

jonny_eh 15y ago

This is very very cool. It'd be even cooler if users could customize the themes right on the site, but that's probably obvious and not easy to implement.

moe 15y ago
At the current pace of the bootstrap ecosystem I wouldn't be surprised to see that announced here on HN within the next couple weeks...

rvenugopal1 15y ago

This is awesome. I presume this is targeted at Bootstrap 2.0. Correct? One question I have is, how do you plan to deal with changing versions of Bootstrap. Just so I understand, are you recommending dropping the chosen variables.less along with bootstrap less files to compile it? Thanks

parkov 15y ago
Yes, it's targeting 2.0. Both the CSS and LESS files will be kept in sync with Bootstrap. So you won't need to compile anything, just download the latest swatch CSS.
- rvenugopal1 15y ago
  I didn't see a target bootstrap version at http://bootswatch.com/spacelab/bootstrap.min.css http://bootswatch.com/spacelab/bootstrap.min.css Hence, I assumed that we had to compile the less files. Also, not everyone will be willing to move to the latest version of bootstrap. It might be easier to let github manage the multiple versions with a download page similar to this https://github.com/wycats/handlebars.js/downloads https://github.com/wycats/handlebars.js/downloads . Personally, I don't mind doing the extra step of lessc if I can get exactly what I want. Thanks for the effort.

railsmax 15y ago

That's really cool!!! Thanks a lot !!!

tormentor 15y ago

Awesome! Soon all our sites will look like bootstrap but now with a variety of different colors. THANKS!! CSS is so hard.

tormentor 15y ago
lmfao your all idiots. this is why stupid shit like this makes it to the top. im going to reddit
- joshmanders 15y ago
  Heaven forbid something helpful to the community and makes it easier to get something useful to a level of eye pleasing is a wrong thing.
  - tormentor 15y ago
    Heaven forbid you actually learn some CSS and change a couple of HEX codes.

Blocks8 15y ago

Nice site. I bookmarked it but it would be cool to sign up for a email when there are new themes available. A very passive way to stay top of mind. Thanks for creating this!

tormentor 15y ago

http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-starting-from-scratch-2 http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-st...

stdbrouw 15y ago

It's interesting to see Bootstrap is slowly turning into what jQuery UI was always supposed to be.

vyrotek 15y ago
Agreed. The current state of jQuery UI is what pushed me to consider other frameworks such as Dojo (which I'm really enjoying). I've also started using Bootstrap on a new project and really like it as well. I just need more components! :)
- whatusername 15y ago
  Do you know of a good alternative to jqui Sortable? That's the only reason I still keep it around for a couple of projects.
- mitchellmckenna 15y ago
  What are some of the components you think it's missing?
  - vyrotek 15y ago
    I've been spoiled by Dojo with these components: - Rich DataGrid with ajax pagination & filtering - DropDown with ajax source for typeahead feature I also think Bootstrap needs an initial set of distinct looking themes. Not just different colors but fonts, padding, sizes etc. It would help me feel confident that I would be able to create something that doesn't look like everyone else's site.
moe 15y ago
I find it doubly interesting since bootstrap isn't even very good code (albeit slowly improving). Completeness, documentation and brand name really trump technical excellence here. Either way, it's great to have one of these frameworks finally pick up steam, that's been long overdue!
- 15y ago

alanmeaney 15y ago

Thanks Thomas, this is great. Really wanted to customize bootstrap for a demo site for a project I'm working on and your Spacelab swatch is perfect, saved me loads of time. I'll drop you a mail for a peak when it's live, should be in the next week or so.

wildmXranat 15y ago

As a developer, I'm not kidding when I say that Bootstrap and related projects made it feel like perpetual Christmas. Thanks mate!

joshmanders 15y ago
Agreed whole heartily.

corroded 15y ago

Isn't this almost the same as this? wrapbootstrap.com/themes which was featured a couple of days ago? Maybe you could submit your "swatches" as themes and earn a couple of bucks :)

pinchyfingers 15y ago

My life keeps getting better. Thanks you, Thomas and Quan, both. I always leave the front-end work for last because design is ridiculously more difficult than coding. Guys like your are easing the anxiety I feel every time I start trying to figure out colors, fonts, layout, etc.

josscrowcroft 15y ago

I love the concept - my only problem with it is that the six starter themes (swatches) featured on the site aren't really attractive enough, more like failed experiments... it could benefit from a design-off where popular designers create a swatch with their own take on the Bootstrap, and submit it to the site... PS: Overheard on Twitter (https://twitter.com/#!/bcherry/status/169960949967626241 https://twitter.com/#!/bcherry/status/169960949967626241): New web dev trend: "Yo dawg I heard you like Bootstrap so I made bootstrap for your Bootstrap so you can bootstrap while you Bootstrap."

arturadib 15y ago

More and more folks are realizing the power of Open Source - why limit it to functional code when we all need design just as much? This is a fantastic trend, and (I hope) just the beginning.

mobytea 15y ago

great stuff, lavishbootstrap is great too. hope that maybe the kuler color schema or the colourlovers api get inside!