Spirit

Light, modern & customisable

A customisable CSS framework that strives to be small, yet complete. With a strong focus on typography, clean spacing, and semantic naming conventions, Spirit is the perfect CSS microframework for everyone.

Variables

A convenient set of Sass variables for you to create your own version of Spirit.

// native font snippet from Bootstrap
$native-sans-font: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Helvetica Neue",
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol" !default;

$native-serif-font: Georgia,
Times,
"Times New Roman",
serif;

$sans-font: 'Public Sans',
sans-serif;
$serif-font: 'Butler',
serif;

// breakpoint sizes
$mobile: 768px;
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;

// grid vars
$grid-tc: repeat(12, 1fr);
$grid-tr: repeat(12, 1fr);
$col-gap: 1rem;
$row-gap: 1rem;
$grid-cs: 1;
$grid-ce: -1;
$grid-rs: 1;
$grid-re: -1;

// colors
$navy: #001F3F;
$blue: #0074D9;
$aqua: #7FDBFF;
$teal: #39CCCC;
$olive: #3D9970;
$green: #2ECC40;
$lime: #01FF70;
$yellow: #FFDC00;
$orange: #FF851B;
$red: #FF4136;
$fuchsia: #F012BE;
$purple: #B10DC9;
$maroon: #85144B;
$white: #FFFFFF;
$gray: #AAAAAA;
$silver:#DDDDDD;
$black: #111111;

// link styles
$link-dark: #0F52BA;
$link-light: #0080FF;
$link-mid: #0074D9;
                

Typography

Opiniated styles are applied on the HTML heading elements in order to fluidly style them. Use the variables available to customise them to your need.

Typefaces used

These are freely available, high quality typefaces. Butler, Public Sans

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Custom sizes

Custom sizes are not fluid, but they let you 'lock' the font-size of text across all device widths.

.size-1

.size-2

.size-3

.size-4

.size-5

.size-6

.size-7

Blockquotes

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United States
and close to 5 million globally.
</blockquote>
            

Links

Links are specially styled to look better in a block of text.

Scale text

A utility class to make the font-size of text content slightly smaller than it's parent. It uses fluid sizing in order to be perfectly responsive.

This sentence, for example, is scaled down.

Title

This provides a sans-serif title font, with extra weight.

Grids:

Use Grids to create responsive layouts that flow in two dimensions. The default grid is 12x12 cells, this can easily be extended to any arbitrary number by using CSS variables. This one stays the same across all viewports:

<r-grid style="--columns:6; --rows:6">

    <r-cell rowspan=2>, 2</r-cell>

    <r-cell colspan=3>3</r-cell>

    <r-cell></r-cell>

    <r-cell colspan=7-8>7-8</r-cell>

    <r-cell colspan=2+2>2+2</r-cell>

    <r-cell colspan=5-8>5-8</r-cell>

    <r-cell colspan=1-4>1-4</r-cell>

    <r-cell colspan=6..>6..</r-cell>

    <r-cell colspan=2..>2..</r-cell>

    <r-cell colspan=4..>4..</r-cell>

    <r-cell rowspan=5-6 colspan=1-2>1-2, 5-6</r-cell>

    <r-cell colspan=4-5>4-5</r-cell>

</r-grid>
                

This is a responsive grid:

<r-grid columns=6 columns-s=3 rows=2>

    <r-cell colspan=2 colspan-s=row>2 / row</r-cell>

    <r-cell colspan=3-6 colspan-s=row>3, 6 / row</r-cell>

    <r-cell colspan=1-2 colspan-s=1>1-2 / 1</r-cell>

    <r-cell colspan=3.. colspan-s=2..>3.. / 2</r-cell>

</r-grid>

Note: This is a heavily modified version of the Raster Grid Subsystem.

Flexbox utilities:

Composable flexbox utilities allows you to quickly style content that flows in one-dimension. Applying class="container row is-fullheight flex-center" to a div element creates the following content:

<div class="container row is-fullheight flex-center bg-silver">

    <p class="size-7">Lorem ipsum.</p>

</div>
                

Infinitely nestable rows and columns allow you to effortlessly create incredibly complex layouts. Use the full power of Flexbox and Grid to bend CSS to your will.

<div class="container breakout row bg-silver" style="min-height: 9rem;">

    <div class="row border border--black">

        <div class="column border border--black">Row 1, Column 1</div>

        <div class="column border border--black">Row 1, Column 2</div>

        <div class="column border border--black">Row 1, Column 3</div>

    </div>

    <div class="row border border--black">

        <div class="column border border--black">Row 2, Column 1</div>

        <div class="column border border--black">Row 2, Column 2</div>

    </div>

</div>
                

Note: Fixed width content within a flex container may overflow on smaller displays.

Forms:

Simple styles with rational defaults, to provide a cohesive design.

<form action="#">

    <div class="field">

        <label for="name">Your name: </label>

        <input type="text" placeholder="John Smith" />

        <div class="help">Don't worry, your information is safe with us.</div>

    </div>

    <div class="field">

        <label for="email">Email ID: </label>

        <input type="email" placeholder="john@email.com" />

    </div>

    <div class="field">

        <label for="name">Country: </label>

        <select>

            <option>Select dropdown</option>

            <option>With options</option>

        </select>

    </div>

    <div class="field">

        <label for="textarea">Textarea:</label>

        <textarea class="textarea" placeholder="e.g. Hello world"></textarea>

    </div>

    <button type="button">Button</button>

    <p>You can use the color utilities to mix and match your own styles of elements. For example:</p>

    <button type="button" class="bg-green white border border--black lighten">Custom button</button>

</form>
    

Tables:

Tables are minimally styled, and come with a handy .table-container class for horizontally scrollable tables.

<!-- 

    Standard HTML markup will suffice,

    for most use cases. The wrapper class 

    is provided for cases where overflow is expected.

-->

<div class="table-container">

    <!-- Table markup -->

</div>
    

Images

Images are styled using an aspect ratio box technique. It requires you to add the aspect ratio of the image using the style attribute.

Random images from Unsplash:

<figure style="--aspect-ratio:1.5;">

    <picture>

        <source srcset="./static/1.webp" type="image/webp">

        <img src="./static/1.jpg" alt="Unsplash">

    </picture>

    <figcaption>
        This image uses --aspect-ratio: 1.5
    </figcaption>

</figure>

<figure style="--aspect-ratio:768/1023;">

    <picture>

        <source srcset="./static/2.webp" type="image/webp">

        <img src="./static/2.jpg" alt="Unsplash">

    </picture>

    <figcaption>
        This image uses --aspect-ratio: 1344/1789
    </figcaption>

</figure>
                

These images will maintain their aspect ratio across all viewports. In combination with using the picture tag, responsive images has never been easier.

Note: Based on code from this article. In particular, Thierry Koblentz's work.

Elements

A collection of other useful elements and styles.

Box

<div class="box">

    <p>Box element.</p>

</div>

Lists

Horizontal rule:

A restyled horizontal rule element you can use to add class to your design.

Article wrapper & breakout

It's common to see articles limit the width of the content on wide displays in order to improve readability. Spirit provides a Grid powered wrapper for this situation, which is completely responsive. As a bonus, it also supplies a customisable .breakout class which you can use to allow elements to be fullwidth, responsively.

This effect is easily nestable, as seen on this very element. All the content on this page has been wrapped in this style, with this element being wrapped twice.

Note: Code based on this article.

Spacing utilities

Use these utility classes to perfectly position your content using margins and padding.

Available class prefixes:

In order to use these classes, combine a prefix with one of the following levels to achieve the desired result. For example, .mr-3 defines margin-right: 1.75 rem.

Special class: .mx-auto sets margin: auto on the left and right. Useful for centering content, but honestly, you should just use flexbox.

Responsive helpers

A host of helper classes to conditionally display content based on the viewport width. There are 9 helper classes. Resize your window to see the effect.

1. This sentence is hidden on mobile devices.
2. This sentence is hidden on tablets.
3. This sentence is hidden on desktops.
4. This sentence is hidden on widescreen.
5. This sentence is hidden upto touch devices.
6. This sentence is hidden from tablet and above.
7. This sentence is hidden from desktop and above.
8. This sentence is hidden from widescreen and above.
9. This sentence is hidden from fullhd and above.

Note: These helpers were taken directly from Bulma CSS.

Color helpers

Spirit includes a tiny set of classes to quickly style the background, font-color or border-color of any element.

First stable release with proper documentation is on the way. Stay tuned!