Ditch the frameworks.
Write markup with HTML.

Strapless is a color-changing CSS boilerplate.
It's a better starting point for styling your site.

Why Strapless?

Strapless isn't a CSS micro/mini/nano-framework. It's a CSS boilerplate. It makes your standard HTML look great, like this page.

Learning Strapless is easy: 1) Know HTML. 2) Use main, section and aside (inside sections) elements to lay out your content. 3) Use the action, reaction, info, warning, success and failure classes to endow HTML elements with their corresponding semantic looks.

Install Strapless

If you're new to CSS and/or Less, or your project is something small or prototype-y, you probably want the CSS version. Pick a color you like, then get the CSS version. If you're comfortable with Less, however, try one of the following:

Get Strapless through npm:

npm install strapless

Or grab it off GitHub:

git clone git@github.com:Tivix/strapless.git

Strapless is designed to serve as a base for your project's Less or CSS. Download it once and start your project.

For the simplest, quickest start, just use it like an extra-thick normalize.css, adding your own styles after it (if you add any at all).

Strapless is written in Less, which is flexible and easy to use. The best way to use Strapless is to download it and adopt Strapless's Less files and architecture as the starting point for your own project's styles.


Do more with just HTML.

There aren't many conventions to remember, HTML-wise. We keep HTML elements as simplified building blocks and dump the stylization complexity where it belongs — in the CSS, not the markup.

Of course, the Less version also mirrors that philosophy, so it has bunches of conventions and mix-ins to learn, use and master.

In other words: Strapless is either a simple CSS boilerplate or a bells-and-whistles architectural scaffold for your Less project.


Strapless is designed around typography and color.

Color palettes

Strapless starts with a base color, which you give it:


From that base color, it generates four scheme colors:

@color1 @color2 @color3 @color4

Each of those colors has subcolors, one of which is lighter (a), one of which is an alternate (b), and one of which is darker (c).

@color1 @color1a @color1b @color1c

@color2 is typically a complement:

@color2 @color2a @color2b @color2c

@color3 and @color4 round out the color palette. Their positions depend on which color wheel is set in settings.less. The CSS version uses 'accented' by default.

@color3 @color3a @color3b @color3c

@color4 @color4a @color4b @color4c

Semantic colors

From the base color, Strapless figures out six semantic colors/classes:

@action @reaction @info @warning @success @failure

And some useful grays:

@gray-lighter @gray-light @gray @gray-dark @gray-darker

All of these colors adjust to the color scheme while still retaining their semantic meaning.

Color scheme variants

Strapless color schemes are driven by color wheels. In all, 12 different color wheels are included. Here's each of the wheel outputs from the single base color:














Strapless comes with 11 color- and text-friendly pattern backgrounds.

Using them is easy: They're mixins that use the pattern's name and take any color as an argument, like .pegboard(@color1) or .blueprint(@info).

.blueprint (@color1);
.blueprint (@color2c);
.blueprint (@success);
.crosshatch (@color1);
.crosshatch (@color1a, 2);
.crosshatch (@color1b, 3);
.bathmat (@color1, .75);
.bathmat (@color1a);
.bathmat (@color1b);
.pegboard (@color2);
.pegboard (@color3);
.pegboard (@color4c);
.argyle (@color1a);
.argyle (@color3a);
.argyle (@color4b);
.checkerboard (@color1);
.checkerboard (@color1a);
.checkerboard (@color1b, .5);
.dots (@color1);
.dots (@color2);
.dots (@color2a);
.stripes (@color3);
.stripes (@color3a);
.stripes (@color3b);
.honeycomb (@color4);
.honeycomb (@success);
.honeycomb (@failure);
.chevrons (@color4);
.chevrons (@info);
.chevrons (@warning);

Patterns accept an optional second argument, the scale of the texture, which defaults to 1.

Patterns work like background images, because they're encoded SVG files.


Strapless doesn't ship with any components or have any javascript. It does however include wide support for native HTML elements.


The main element works as a page's central element. It uses a section inside to organize its content.

This is the main element.

<main class="action">
      <h1>This is the main element.</h1>
      <footer><button>It has buttons sometimes</button></footer>

Using a semantic class with this element is a good way to set the tone for something like an error page:

The database crashed!

Just kidding. It's fine. This is just an example of a main element on a failure page.

<main class="failure">
      <h1>The database crashed!</h1>
      <p>Just kidding. It's fine. This is just an example of a main element on a failure page.</p>
        <button class="warning">See error report</button>
        <button>Go back a page</button>


Use of the <section> element (seen throughout this page) is encouraged.

Sections organize content.

Sections have space

This success section has an internal outlined div to show how much space is available.

Text measure rules are mostly enforced by @max-width, which is wider than a typical column in a 2-column or more grid system.

In other words, Strapless mostly plays nice with grids but might run into issues in layouts where the larger of two columns is more than ~60% the width of the content.


Paragraphs (like this one) are by default limited to 60ish characters width (@max-width determines this). Like buttons and tables, paragraphs support all the semantic classes.

I'm informing you of something.

<p class="info">I'm informing you of something.</p>

I've made a huge mistake.

<p class="failure">I've made a huge mistake.</p>

Without a class they just look like normal paragraphs.

<p>Without a class they just look like normal paragraphs.</p>


Spans with semantic classes will take the color of the semantic class. They look like someone took a highlighter to the page.

<span class="info">semantic classes</span>
<span class="failure">took a highlighter to the page</span>


Asides pull and de-emphasize content from the main body of the text.

<aside>This is an aside.</aside>

Asides support semantic classes, which makes them good for notification messages:

<aside class="failure">
    <p>You just deleted the <strong>entire site</strong>.</p>

<aside class="success">
    You've updated your profile.

The Less/CSS for aside can be found in aside.less.

    <h6>Sign up for volleyball</h6>
        <input type="text" name="firstname">
        <button class="reaction">Submit</button>

      You're down to
      <span class="warning">596</span>

Asides only work inside of sections. Use them elsewhere at your own risk.


Buttons are just button elements.

<button>Example button</button>

Buttons can take a semantic class. You can also use the button class to make things that aren't buttons look like buttons.

A link

<a class="info button">A link</a>

There are six semantic buttons by default, shown here:

Semantic colors respond to the color scheme too, so @success will always be the right green (along with its corresponding button). They don't have any other classes to worry about, until you add them, but they do respond well to font size changes:

Buttons always have tinted (white) text.


# First Last
1 Raya Langley
2 Hop Tillman
3 Buffy Rojas
4 Emerson Pratt

# First Last
1 Raya Langley
2 Hop Tillman
3 Buffy Rojas
4 Emerson Pratt

Tables, like buttons, by default support all the semantic color classes.


Headline text scales with the page size, stopping when it's big enough.

Man bites dog (h1)

Man bites dog (h2)

Man bites dog (h3)

Man bites dog (h4)

Man bites dog (h5)
Man bites dog (h6)

Headlines scale proportionally with the page, up until they get big enough and stop.


Strapless has simple form support:

Enter your information

    <h3>Enter your information</h3>
    <label>First name:</label>
    <input type="text" name="firstname">
    <label>Last name:</label>
    <input type="text" name="lastname">
    <textarea rows="4"></textarea>
    <footer class="action">


You may delay, but time will not. Benjamin Franklin
    You may delay, but time will not.
    <cite>Benjamin Franklin</cite>

They alternate switching sides by default.

Blushing is the color of virtue. Diogenes


Pre-formatted text:

This is pre-formatted text

Horizontal rule:


<hr class="info">

Paragraphs may also contain abbreves and AIAFDPS.

Sometimes you just need an an inline code snippet.

Less mix-ins

Strapless uses Less, a CSS pre-processor. It comes with a whole bunch of Less mix-ins for managing colors and contrast.

Text contrast mix-ins


Contrasts the text color against the given background color. This mixin determines whether to lighten or darken to meet contrast standards, then meets them by lightening or darkening enough. Since it has the option of both, this mixin can support AA-level contrast for any given background color.


Does the same thing, except it also sets the bacground color to @color, a useful pattern for just quickly turning something into some other color.


Always results in white text. If the text isn't contrastful enough, then it will darken the background color to meet text contrast standards. This is the only text contrast mixin that changes the background color.

Color utility mix-ins

.set-contrast-ratio(@a, @b);

Sets the Less variable @contrast-ratio to the contrast ratio between the two arguments, which both need to be colors. The argument positions don't really matter.

.set-distance(@a, @b);

Sets @distance to the distance between two colors, in perceptual RGB space.


Sets @average to the average color of a list of colors. This works like Less's average(), but its argument @colors can be a list with any number of colors.

Relative color design

Properly used, the tools in Strapless allow you to practice relative color design, where the colors in your project are defined by their positional relationships to each other and rooted to a base (or "brand") color.

Relative color design allows you to drastically change the look of your project depending on @base-color. This design principle flows well with the following:


The targets.less file contains some ruleset mixins, including responsiveness mixins and mixins for targeting certain types of elements, such as block-level.

Utility classes

In violation of our philosophy on having as few classes as possible, Strapless also offers some guilty pleasure utility classes.

Strapless reuses the same names for everything. So there's a @padding Less variable, a .padding CSS class, and a .padding() Less mix-in. The class sets an element's padding to the variable and the Less mixin extends the class.

And they all work like that. Think of padding: @padding;, .padding(); and class="padding" all shortcut ways of saying the same thing, all appropriate in different situations.

Is the class padding semantically appropriate? Probably not. It doesn't say anything. But... sometimes you just need to add some padding! Or a margin-bottom, etc etc.

And so it's the same with colors too. In the same way you can give a span a success class, you can also give it a color2b or gray-dark class.

Using Strapless's intentionally meaningless palette position names as HTML classes is not semantic and definitely not a best practice. It's like using the class name teal except worse because teal actually says something, in comparison.

But sometimes you need to make something color3a.

Special thanks

This library wouldn't be possible without the following awesome OSS contributions: