1pxdeep

Flat(ish) Bootstrap 3 theme.
Changes color.

Download GitHub Project

A breezy install.

Just two steps with LESS.

Be sure to use the LESS version of Bootsrap.

1. Include scheme.less anywhere.

2. Include 1pxdeep.less after all Bootstrap LESS.

A working index.less might look like this:

@import "scheme.less"; // color scheme
@import "bootstrap.less"; // bootstrap
@import "1pxdeep.less"; // 1pxdeep theme
@import "style.less"; // your own styles

Need help with LESS? Try the LESS CSS project page.

Color, meet class.

Coloring hasn't been this easy since "stay in the lines."

Add a .color1 class to breathe color into any Bootstrap element.

<button class="btn btn-default color1">Color 1</button>

Try it with .color2, .color3, and .color4 too— all basic SchemeLESS colors double as utility color classes in 1pxdeep:

Color 1 Color 2 Color 3 Color 4

Some elements, like panels and buttons, support subcolor classes such as .color1b:

Standard Bootstrap buttons are served in a schemified flavor:

Primary Success Warning Danger

It's all relative.

Get to work with schemes; don't waste time with colors.

Relative color design is designing by relative visual weight, or designing with color schemes. 1pxdeep brings that concept to Bootstrap.

Here are two simple tables, based on @color2 and @color3.

Sometimes the first is magenta, sometimes it's cerulean, but it's always .color1.

Don't design for specific colors; design for schemes. Your colors might change tomorrow, anyway.

Need to rebrand? Save your current layout with the change of just one LESS variable.

Just plain indecisive? Great. Decide later.

Scheme less.

Work as much or as little on scheming as you want to.

Edit your SchemeLESS color scheme by editing scheme.less.

Not touching anything gives you a @seed-color of #578562, which generates this page's default scheme.

Edit @seed-color to get an entirely new scheme. Tweak from there, editing the color wheel, luma breaks and mix-ins until you're happy with the results.

You can even overwrite colors entirely— a great way to passive-aggressively commentate on the quality of SchemeLESS's default scheme generator.

Looking for just a smart default color scheme file for LESS? Visit the GitHub project for SchemeLESS

A light, easy feel.

But still the Bootstrap you love.

Below are some examples of Bootstrap elements.

Change the page's color scheme to get a better idea of how it affects the look of the examples.

Some helpful tips.

• 1pxdeep generally works better with a @seed-color that's on the less saturated side.

• Using panels and wells will give depth and structure to the page, while giving you more control over background colors.

• Any text/readability issues can usually be fixed with the .contrast(@color) mix-in, which accepts the intended background color as an argument.

• Most elements are @color1 or @color1b without a color class.

• Compile your LESS. This page runs client-side LESS for demonstration purposes.

Your full palette.

All 16 colors, as generated by SchemeLESS (scheme.less)