1pxdeep v1.0 released: Now a Bootstrap 3 theme

http://rriepe.github.io/1pxdeep/

by rriepe • 13 years ago

160 48 13 years ago

rriepe.github.io

scottydelta• 13 years ago

the color combinations are very dull.

rriepe12• 13 years ago

More saturated colors get more dramatic themes, if that's what you're looking for:

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• 13 years ago

I 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

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.

quaunaut• 13 years ago

Should 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.

rriepe12• 13 years ago

It'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• 13 years ago

This approach works well for apps made for phones and tablets. On the desktop it feels odd for me too.

wasd• 13 years ago

Looks great but your #navbar-brand link is broken.

FreshCode2• 13 years ago

This is awesome! Is it possible to have a light background, while still having strong accents?

rriepe12• 13 years ago

If 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/

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).

FreshCode2• 13 years ago

Thank you, rriepe. It would be great if 1pxdeep let me pick color1, color2 and color3 with sensible defaults.

judah• 13 years ago

Interesting. 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• 13 years ago

Very cool. Don't visit on your phone though. Client side less will hammer it. (Not a critique)

rriepe12• 13 years ago

Apologies 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• 13 years ago

Chrome on my Nexus 7 was a little bit sluggish but basically fine. I was mostly too busy going "ooh, pretty" to mind, anyway :)

DougBTX• 13 years ago

Ugh, that's what it is? Locked up Safari Mobile, had to force close it.

spyder• 13 years ago

Even on desktop Firefox it displayed the "Unresponsive script" ... (Script: 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.

caiob2• 13 years ago

Why is Bootstrap still using LESS?

malandrew• 13 years ago

... as opposed to SASS?

What's wrong with LESS?

caiob2• 13 years ago

https://gist.github.com/chriseppstein/674726

danpalmer• 13 years ago

I 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.

sampk2• 13 years ago

So that non-programmers can use Bootstrap.

chrisfarms• 13 years ago

Am 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

rriepe12• 13 years ago

Looks like it's broken for everything but the smallest and largest layouts. EDIT: It's fixed now, thanks for pointing it out.

ckluis• 13 years ago

Thoughts on adding secondary or tertiary color selector?

hiroprot• 13 years ago

I'd love it if I could preview what everything looks like right on that page after I change the individual colors at the bottom.

rriepe12• 13 years ago

I'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.

mm0213• 13 years ago

50+ 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• 13 years ago

I 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.

rriepe12• 13 years ago

Yep, just use LESS normally and you'll see the huge up-front load times go away.

mm0213• 13 years ago

I totally understand that. I just wish the OP did.

calinet62• 13 years ago

As 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.

rriepe12• 13 years ago

1pxdeep 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.

calinet62• 13 years ago

For 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• 13 years ago

Am I the only one who feels that the colors are not good enough. I didn't like any color associated with the theme.

ivanbrussik• 13 years ago

love it, but looks terrible in #f29eba

forlorn• 13 years ago

The theme building tool I've always missed! <3

Whistledrip• 13 years ago

Am I crazy, or does it not agree with the color relations from 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?

rriepe12• 13 years ago

Nope, color wheels are crazy. Different wheel, different results. I'm guessing LESS and CSD3 don't use the same wheel.

daddykotex• 13 years ago

looks nice :), Try it with #FFFFFF, this is some nice contrast.

kolev• 13 years ago

Buttons are not flat, so, how can this be flat-ish?!

VeejayRampay• 13 years ago

Seems extremely similar to another project with the same philosophy: 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.

1pxdeep v1.0 released: Now a Bootstrap 3 theme

Related Stories