
1pxdeep v1.0 released: Now a Bootstrap 3 theme - rriepe
http://rriepe.github.io/1pxdeep/
======
judah
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.

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

~~~
rriepe
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.

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

~~~
rriepe
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
Chrome on my Nexus 7 was a little bit sluggish but basically fine. I was
mostly too busy going "ooh, pretty" to mind, anyway :)

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

~~~
rriepe
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/](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
Thank you, rriepe. It would be great if 1pxdeep let me pick color1, color2 and
color3 with sensible defaults.

------
caiob
Why is Bootstrap still using LESS?

~~~
malandrew
... as opposed to SASS?

What's wrong with LESS?

~~~
caiob
[https://gist.github.com/chriseppstein/674726](https://gist.github.com/chriseppstein/674726)

~~~
sampk
You think the simplicity of LESS is what's wrong with it?

------
chrisfarms
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

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

~~~
ckluis
Thoughts on adding secondary or tertiary color selector?

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

------
Whistledrip
Am 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
Nope, color wheels are crazy. Different wheel, different results. I'm guessing
LESS and CSD3 don't use the same wheel.

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

~~~
rriepe
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.

~~~
calinet6
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.

------
VeejayRampay
Seems 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.

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

------
scottydelta
the color combinations are very dull.

~~~
rriepe
More 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
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](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
Less 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-
outl...](http://blog.paciellogroup.com/2012/04/how-to-remove-css-outlines-in-
an-accessible-manner/)

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

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

~~~
rriepe
The demo requires client-side LESS to work.

~~~
mm021
"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.

~~~
manojlds
Are you understanding what's happening? The site uses client side less so that
it can do some of the dynamic stuff. YOUR site, using this theme, won't have
to do that.

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

~~~
rriepe
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.

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

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

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

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

------
ivanbrussik
love it, but looks terrible in #f29eba

