Ditch the frameworks.
Write markup with HTML.
Strapless is a color-changing CSS boilerplate.
It's a better starting point for styling your site.
Strapless is a color-changing CSS boilerplate.
It's a better starting point for styling your site.
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
failure classes to endow HTML elements with their corresponding semantic looks.
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 firstname.lastname@example.org: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.
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.
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
@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
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.
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
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.
The main element works as a page's central element. It uses a
section inside to organize its content.
<main class="action"> <h1>This is the main element.</h1> <footer><button>It has buttons sometimes</button></footer> </main>
Using a semantic class with this element is a good way to set the tone for something like an error page:
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> <footer> <button class="warning">See error report</button> <button>Go back a page</button> </footer> </main>
Use of the
<section> element (seen throughout this page) is encouraged.
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> <button>Okay</button> </aside>
<aside class="success"> You've updated your profile. </aside>
The Less/CSS for aside can be found in
<aside> <h6>Sign up for volleyball</h6> <form> <input type="text" name="firstname"> <button class="reaction">Submit</button> </form> </aside>
<aside> <p> You're down to <span class="warning">596</span> credits. </p> </aside>
Asides only work inside of sections. Use them elsewhere at your own risk.
Tables, like buttons, by default support all the semantic color classes.
Headline text scales with the page size, stopping when it's big enough.
Headlines scale proportionally with the page, up until they get big enough and stop.
Strapless has simple form support:
<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"></textarea> <footer class="action"> <button>Submit</button> <button>Cancel</button> </footer> </form>
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.
Blushing is the color of virtue. Diogenes
This is pre-formatted text
Paragraphs may also contain abbreves and AIAFDPS.
Sometimes you just need an
an inline code snippet.
Strapless uses Less, a CSS pre-processor. It comes with a whole bunch of Less mix-ins for managing colors and contrast.
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.
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.
@distance to the distance between two colors, in perceptual RGB space.
@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.
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:
Implementing night-time/dark mode? It's as simple as tweaking a variable.
Changing a red logo to a green logo used to mean changing tons of red things into green things too. With Strapless you can just change the underlying palette.
Need to make the same thing lots of different colors (or any user-chosen color)? Strapless ensures contrastful, readable results no matter the color input.
targets.less file contains some ruleset mixins, including responsiveness mixins and mixins for targeting certain types of elements, such as block-level.
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
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.
This library wouldn't be possible without the following awesome OSS contributions: