Just two steps with LESS.
Be sure to use the LESS version of Bootsrap.
Include scheme.less anywhere.
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.
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:
Some elements, like panels and buttons, support subcolor classes such as .color1b:
Standard Bootstrap buttons are served in a schemified flavor:
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.
Work as much or as little on scheming as you want to.
Edit your SchemeLESS color scheme by editing
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
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.
<form class="panel"> <div class="panel-heading color3a"> <h3 class="panel-title">log in</h3> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="e-mail"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="password"> </div> <div class="panel-footer color3c"> <button type="submit" class="btn btn-default btn-lg btn-block color3a">submit</button> </div> </form>
<h5 class="text-center">Loading assets...</h5> <div class="progress color2"> <div class="progress-bar color3" style="width: 42%"></div> </div>
<h4>Aliens destroyed</h4> <ul class="list-group color1"> <li class="list-group-item">Crawler <span class="badge color1">113</span></li> <li class="list-group-item">Tripod <span class="badge color1">40</span></li> <li class="list-group-item">Xenomorph <span class="badge color1">12</span></li> <li class="list-group-item">Mothership <span class="badge color1">1</span></li> </ul> <p class="text-center"> <a data-toggle="modal" href="#test_modal" class="btn btn-info">Launch demo modal</a> </p> <!-- Buttons like .btn-info get schemified, so they're always blue -->
<h3>Men will</h3> <p>men will be lovers of themselves</p> <p>men will be men</p> <p>men will dream dreams</p> <p>men will call evil good</p> <p class="pull-right">— <em><a href="https://twitter.com/GooglePoetics">Google Poetics</a></em></p> <!-- Sometimes you don't need to use color classes at all -->
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.
All 16 colors, as generated by SchemeLESS (scheme.less)