1pxdeep v1.0 released: Now a Bootstrap 3 theme | Hacker News Reader

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

rriepe.github.io

160 pointsrriepe48 comments

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.

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.

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.

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

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

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.

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

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

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.

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

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

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

Why is Bootstrap still using LESS?

... as opposed to SASS?

What's wrong with LESS?

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

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

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.

So that non-programmers can use Bootstrap.

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

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

Thoughts on adding secondary or tertiary color selector?

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.

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?

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

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.

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.

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.

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.

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

the color combinations are very dull.

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.

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.

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

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.

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.

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

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

The demo requires client-side LESS to work.

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

So you'd rather it be fast but doesn't work?

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.

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.

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.

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

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

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

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

love it, but looks terrible in #f29eba

Reply on news.ycombinator.com