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.
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 :)
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.
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.
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?
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..
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.
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/ does for VIM color schemes.
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?
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.
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! :)
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.
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!
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.
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.
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...
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.
56 comments
[ 0.16 ms ] story [ 90.3 ms ] threadHow did you generate the different themes, and are they stored in different css/less files?
You can check them out on the gh-pages branch in GitHub: https://github.com/thomaspark/bootswatch
I really like how your site generates a bootstrap color theme from an image of your choice.. works very well.
I'm terrible at creating nice colour-sets and looking forward to making my bootstrap based projects less 'out of the box' looking.
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?
e.g.: http://www.lavishbootstrap.com/?image_url=http://design-seed...
Great implementation.
P.S. That would be even cooler if there were more dark themes.
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.
Thanks
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 .
Personally, I don't mind doing the extra step of lessc if I can get exactly what I want. Thanks for the effort.
Thanks for creating this!
- 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.
Either way, it's great to have one of these frameworks finally pick up steam, that's been long overdue!
PS: Overheard on Twitter (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."
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 :)