8 ms·
1pxdeep v1.0 released: Now a Bootstrap 3 theme
- scottydelta 13y agothe color combinations are very dull.
- rriepe 13y agoMore saturated colors get more dramatic themes, if that's what you're looking for: http://rriepe.github.io/1pxdeep/#ff3f38 http://rriepe.github.io/1pxdeep/#ff3f38 It's also completely built on SchemeLESS, so you can easily override any color in the theme. I think "dull" is a pretty good tradeoff for generally working with any color you give it.
- mvzink 13y agoI actually was going to point out that less saturated colors get... well, maybe not more dramatic, but in-my-opinion-"better" themes. For example, with this one, any but 'complementary' are almost usable http://rriepe.github.io/1pxdeep/#e9ede4 http://rriepe.github.io/1pxdeep/#e9ede4 Also, anybody that's using this should be sure to add a rule like input { outline: none} or it completely ruins the whole 1pxdeep theme with OS-defined outlines on clicked buttons. On the demo, this may not work for the main "Scheme now" button, but #change_color { outline: none } will.
- rriepe 13y agoLess saturated colors definitely produce better themes. The very-close-to-white colors (and white itself) behave weird in general but I liked all the results so I just kept it. Should fix that navbar contrast issue though... Be careful with outline:none. It's an accessibility issue: http://blog.paciellogroup.com/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/ http://blog.paciellogroup.com/2012/04/how-to-remove-css-outl...
- quaunaut 13y agoShould the modal be overtaking the screen? It feels odd, almost buggy, in use. Otherwise though, I really like this. The more muted color scheme is much more my style than defaults.
- rriepe 13y agoIt's a trade-off: You lose the context of the document but you gain more err... modality. Bootstrap uses transparency by default to preserve the page context, but that just didn't work as well with the color theming.
- moondowner 13y agoThis approach works well for apps made for phones and tablets. On the desktop it feels odd for me too.
- wasd 13y agoLooks great but your #navbar-brand link is broken.
- FreshCode 13y agoThis is awesome! Is it possible to have a light background, while still having strong accents?
- rriepe 13y agoIf you're looking for a more color-friendly base Bootstrap (not 3... yet), check out Flamingo, which also uses SchemeLESS: http://rriepe.github.io/flamingo/ http://rriepe.github.io/flamingo/ If you like 1pxdeep's stylings, start with a @seed-color of white, and then edit @color2, @color3 and @color4 in scheme.less to your liking. It will generate appropriate subcolors from those (which you can also overwrite, if you want).
- FreshCode 13y agoThank you, rriepe. It would be great if 1pxdeep let me pick color1, color2 and color3 with sensible defaults.
- judah 13y agoInteresting. I've often gone to colorschemedesigner.com to generate some base colors, then tweak my Bootstrap template for those. 1pxdeep seems to merge the two. Suggestion: give some good example schemes for each category (e.g. "example good tetrad scheme") Good examples would help because when I played around with several colors, I couldn't find anything that didn't remind me of hot dog stands or MySpace pages.
- rapind 13y agoVery cool. Don't visit on your phone though. Client side less will hammer it. (Not a critique)
- rriepe 13y agoApologies to anyone who got nabbed by this. Bootstrap 3's changes, while fantastic, made it much harder to optimize the previewer on this version, since I couldn't just load everything in asynchronously on top of the basic Bootstrap stuff.
- mst 13y agoChrome on my Nexus 7 was a little bit sluggish but basically fine. I was mostly too busy going "ooh, pretty" to mind, anyway :)
- DougBTX 13y agoUgh, that's what it is? Locked up Safari Mobile, had to force close it.
- spyder 13y agoEven on desktop Firefox it displayed the "Unresponsive script" ... (Script: http://rriepe.github.io/1pxdeep/js/less.js:8 http://rriepe.github.io/1pxdeep/js/less.js:8) warning for me at the first load and I had to press "Stop script" five times. But after reloading the page it seems OK.
- caiob 13y agoWhy is Bootstrap still using LESS?
- malandrew 13y ago... as opposed to SASS? What's wrong with LESS?
- caiob 13y agohttps://gist.github.com/chriseppstein/674726 https://gist.github.com/chriseppstein/674726
- drivebyacct2 13y agoSASS scoping/shadowing rules are dumb.
- sampk 13y agoYou think the simplicity of LESS is what's wrong with it?
- danpalmer 13y agoI must agree, Bootstrap is the only project I've encountered using LESS in the last year or so. There was a time when they both seemed to have the same amount of use, but it has been obvious to me that SASS won a while ago.
- sampk 13y agoSo that non-programmers can use Bootstrap.
- chrisfarms 13y agoAm I going mad, or am I surpose to be able to click on things on that color selector? .... I think something is overlayed on top of the controls getting in the way [latest FF - Linux] EDIT: fixes if I make the browser window wider than 1024ish
- rriepe 13y agoLooks like it's broken for everything but the smallest and largest layouts. EDIT: It's fixed now, thanks for pointing it out.
- ckluis 13y agoThoughts on adding secondary or tertiary color selector?
- rriepe 13y agoI probably won't. You can overwrite any color in scheme.less, though, if you download it and play around with it. You can also tweak things like the theme's contrast, and the breaks where it considers things "light" and "dark". My big wishlist item is a "Download current theme's CSS" but that's pretty tricky to do. If it had something like that, I'd consider making the preview tool more powerful.
- hiroprot 13y agoI'd love it if I could preview what everything looks like right on that page after I change the individual colors at the bottom.
- rriepe 13y agoI've been considering building something like that out for SchemeLESS, but I'm not quite sure how to implement it yet. If I do it there, I'll definitely be adding it to this page.
- mm021 13y ago50+ requests to load the page? This locked up my browser for a good while. I don't really want to even consider a css/less framework that takes 5s to load its dependencies.
- jeffasinger 13y agoI think a lot of the slowness is because it's being compiled in your browser. It would be much better if you compiled all the less files down to one minified css file.
- rriepe 13y agoYep, just use LESS normally and you'll see the huge up-front load times go away.
- mm021 13y agoI totally understand that. I just wish the OP did.
- rriepe 13y agoThe demo requires client-side LESS to work.
- mm021 13y ago"working" does not make a site good. I understand that the site requires client-side less to "work". I simply wanted to point out that this "working" is painfully slow and miserable for the user. By my own definition, this does not "work". Edit: Just noticed this was the OP I was replying to... If you want to make the site exemplary, then make it fast. Use all manner of web optimizations for the example, to show what's truly possible. It's not just about design, it's about experience.
- KaoruAoiShiho 13y agoSo you'd rather it be fast but doesn't work?
- calinet6 13y agoAs a designer, this is why computers don't have our jorbs yet. Algorithmic color generation is really really hard. (Trust me, I've researched and developed tools for it quite a bit, using everything from golden ratio to exotic classifiers). Nothing reliably beats the creative human when it comes to color aesthetics.
- rriepe 13y ago1pxdeep is more about showcasing relative color design, not so much the colors themselves. I stand behind the algorithmic color generation I've put into SchemeLESS, but it's intended as a starting point. The theme doesn't just take any seed color, it takes any SchemeLESS color scheme. If you don't like the @color3 you get, overwrite it. You'll get a new @color3a, @color3b, and @color3c. Don't like those? Overwrite them too. Or just change the variables used in the rules SchemeLESS uses to generate them. Make no mistake, this is a tool by a designer that's intended for other designers. This isn't about competing with designers or replacing designers. It's about enabling designers to work with color in powerful ways without significantly adding to the tech debt of a project.
- calinet6 13y agoFor sure, it's a great starting point, and you're right it's a good tool. Not criticizing the existence of the tool or the work that went into it, just noting when playing with it myself that there's a large gap between the generated colors and usable colors. Not sure if that gap is due to the generation or just the nature of algorithmic color selection, but it does exist.
- kawadhiya21 13y agoAm I the only one who feels that the colors are not good enough. I didn't like any color associated with the theme.
- ivanbrussik 13y agolove it, but looks terrible in #f29eba
- forlorn 13y agoThe theme building tool I've always missed! <3
- Whistledrip 13y agoAm I crazy, or does it not agree with the color relations from http://colorschemedesigner.com/ http://colorschemedesigner.com/? Using #602375 (dark purple) as a seed color with Complement mode yields the complement as being a dark green, whereas in ColorSchemeDesigner the complement is more of an olive color?
- rriepe 13y agoNope, color wheels are crazy. Different wheel, different results. I'm guessing LESS and CSD3 don't use the same wheel.
- daddykotex 13y agolooks nice :), Try it with #FFFFFF, this is some nice contrast.
- kolev 13y agoButtons are not flat, so, how can this be flat-ish?!
- VeejayRampay 13y agoSeems extremely similar to another project with the same philosophy: http://pikock.github.io/bootstrap-magic http://pikock.github.io/bootstrap-magic It's very nice to see how customizable all those CSS frameworks really are. The days of not having to fiddle with all those colors are upon us.