Strapless

Make your HTML look good.

Strapless is a color-changing CSS boilerplate and a powerful LessCSS library for colors and patterns.

Accented

Square

Complementary

Complementary-b

Triadic

Triadic-b

Tetradic

Tetradic-b

Monochromatic

Monochromatic-b

Ebb

Flow

Why Strapless?

Strapless isn't a CSS micro/mini/nano-framework. It's a CSS boilerplate. It just makes your plain HTML look good.

With only six semantic CSS classes to worry about (action, reaction, success, failure, info, warning), Strapless frees you from the overprescriptive cruft of frameworks. Use the grid you like. Snag a dropdown menu that works for your project, not the one we picked and named for you. You were probably going to do that anyway, right?

Strapless aims to let you work how you want, building your project from the ground up, instead of chiseling it out of a we-know-better block of marble.

Basically, Strapless makes your HTML look like this page. Try it out now by changing the base color. Then, download that color's CSS file and use it to start building— from the ground up.

Philosophy

Install Strapless

Get Strapless through npm:

npm install strapless

Or GitHub:

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

Or just download it like a normal person. Click "Get CSS" to get just the CSS for the current preview color.

How to use Strapless

  1. Pick the color you like and "Get CSS." Use that CSS in your project.
  2. Alternatively, grab the Less version off of Github and use that in your project, for enhanced customization and flexibility.

Elements

All of Strapless's components happen to be HTML elements too. There are no classes to remember, just different ways to put together HTML tags. Here are some examples.

<main>

The main element should give a high-level description of the page and a quick follow-up action.

The main element

This is the lead paragraph.

A longer, more descriptive line can follow. Please write punchy copy and refrain from punching people.

<main class="success">
    <h2>The <em>main</em> element</h2>
    <p>This is the lead paragraph.</p>
    <p>A longer, more descriptive line can follow. Please write 
    punchy copy and refrain from punching people.</p>
    <aside>
        <button class="reaction">Button #1</button>
        <button>Button #2</button>
    </aside>
</main>

The quick brown fox jumps
over the lazy dog.

<main class="action">
    <h1>The quick brown fox jumps <br>over the lazy dog.</h1>
    <button>Chase the fox away</button>
</main>

<section>

Use of the <section> element (seen throughout this page) is encouraged. Sections have default CSS for spacing out your content that's aimed at getting it looking good on the first pass.

Section title

Sections support semantic classes. This one is using reaction.

<section class="reaction">
    <h2>Section title</h2>
    <p>Sections support semantic classes. 
    This one is using <code>reaction</code>.</p>
</section>

<p>

Paragraphs (like this one!) are by default limited to 55 characters width (or whatever @text-measure is set to). They have an aggressive, but not too aggressive, line height of 1.62 (also a variable!). 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>

Of course, without a class they just look like normal paragraphs.

<p>Of course, without a class they just look like normal paragraphs.</p>

<span>

Spans with semantic classes will appear bolder and take the color of the semantic class. Careful, though... sometimes action, reaction or info can end up looking like links.

<span class="success">appear bolder</span>
<span class="failure">looking like links</span>

<aside>

Asides center everything inside them using flexbox. On mobile, they stack up their contents. Asides are an easy way to present multiple pieces of content side by side.

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

It's useful for buttons:

<aside>
    <button>I'm centered!</button>
    <button class="failure">Me too</button>
</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>
    <button>Okay</button>
</aside>

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

<aside>
    <h6>Join our newsletter</h6>
    <form>
        <aside>
            <input type="text" name="firstname">
            <button class="reaction">Submit</button>
        </aside>
    </form>
</aside>

<aside>
    <p>You're down to <span class="warning">596</span> credits.</p>
</aside>

Nesting more than one aside inside another will rapidly accelerate the entropic heat death of the universe. Use a full grid solution to avoid prematurely warping the fabric of reality.

<button>

Buttons are just button elements. There's no button class.

<button>Example button</button>

Buttons can take a semantic class.

<button class="info">Example button</button>

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. Sometimes they have darker background colors than the rest of the theme.

<aside class="success">
    <p>Buttons will inherit colors from color class parents, so you 
    don't need redundant classes.</p>
    <button>Got it!</button>
</aside>

<table>

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

<h1>

Headlines are centered by default.

This is headline text. (h1)

This is headline text. (h2)

This is headline text. (h3)

This is headline text. (h4)

This is headline text. (h5)
This is headline text. (h6)

H5 and H6 are all-caps by default, because otherwise they're super boring.

<form>

Enter your information

<form>
    <h3>Enter your information</h3>
    <label>First name:</label>
    <input type="text" name="firstname">
    <label>Last name:</label>
    <input type="text" name="lastname">
    <label>Textarea:</label>
    <textarea rows="4">Placeholder text</textarea>
    <footer class="action">
        <button class="reaction">Submit</button>
        <button >Cancel</button>
    </footer>
</form>

Strapless aims to make simple form markup look good by default. There's no extra markup or JS conventions to worry about. Strapless forms also work well with semantic classes, like this success form here:


<blockquote>

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

They alternate switching sides by default, no classes needed.

Blushing is the color of virtue. Diogenes

They don't support semantic classes.

<etc>

Pre-formatted text:

This is pre-formatted text


Horizontal rule:


<hr>


<hr class="info">

Paragraphs may also contain abbreves and AIAFDPS.

Sometimes you just need an an inline code snippet.

Colors

Color palettes

Strapless starts with a base color:

From that base color, it generates a theme with four main colors:

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

Strapless doesn't simply lighten or darken-- it picks nearby analogs and manipulates them to avoid the typical "washing out" feeling of normal lightening and darkening. It also uses contrast ratio as a threshold, leaving your schemes with an even, consistent vibe.

@color2 is typically a complement:

@color3 and @code4 round out the color palette, their positions largely dependent on which color wheel you give Strapless (the CSS version is 'accented' by default).

Color wheels

Strapless color schemes are driven by color wheels. In all, 12 different color wheels are included. They're shown at the top of this page.

Semantic colors

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

And a full suite of grays:

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

The CSS version only supports the basic accented color scheme. The CSS version also includes named color classes for all the main colors and subcolors (This works as a convenient way to document Strapless's colors-- color classes aren't recommended to be used in the same way as semantic classes).

Patterns

It's got patterns! For the Less version. (Limited CSS support coming soon.)

Patterns work like background images... Because they are.

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

Crosshatch

Bathmat

Pegboard

Argyle

Checkerboard

Dots

Stripes

Honeycomb

Noise

Chevrons

Since they're mixins, patterns don't gum up your CSS file until you use them.

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

Patterns are intended to give Strapless users a way to quickly add texture and depth to their sites.

Special thanks

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