Overview

The library comes with some pre-defined UI components. You can use them as-is, modify with your own CSS, or subclass them in Sass. Stateful components like sf-collapse require the tiny JavaScript file included with the library.

Most components are class-based and should be used like so: <label class="sf-label"></label>. Some components take additional options like so: <label class="sf-label sf-label-dense"></label>.

sf-article

sf-article symbolises a block of readable text. It provides default cosmetic styling, like whitespace, link decorations, and convenience classes for images. Available as .sf-article and is by default applied to the native article tag.

Use it wherever you want typographic styling. Suited for text compiled from Markdown, like this documentation.

This whole page is an example, but here's a smaller one.

<article>
  <img src="images/square/script.jpg" class="right small">
  <h1>Article header</h1>
  <p>Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens.</p>
  <p>Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos.</p>
</article>

Article header

Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens.

Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos.

sf-collapse

sf-collapse can be toggled to show or hide its contents.

<div class="sf-collapse theme-text-primary">
  <div class="sf-collapse-head">Click me to toggle collapse</div>
  <div class="sf-collapse-body">
    <h3>Collapsed header</h3>
    <p>Collapsed paragraph</p>
  </div>
</div>

Options

To uncollapse the component by default, use .active.

<div class="sf-collapse theme-text-accent">
  <div class="sf-collapse-head active">Click me to toggle collapse</div>
  <div class="sf-collapse-body">
    <h3>I'm uncollapsed by default!</h3>
    <p>This is my paragraph</p>
  </div>
</div>

You can also enable an invisible overlay that collapses the element when clicking anywhere outside of it by adding the .sf-collapse-overlay option:

<div class="sf-collapse sf-collapse-overlay theme-warn">
  <div class="sf-collapse-head">Click me to toggle collapse</div>
  <div class="sf-collapse-body">
    <h3>Click anywhere outside to close me!</h3>
    <p>This is my paragraph</p>
  </div>
</div>

sf-dropdown

sf-dropdown is a basic dropdown list. By default, it appears on :hover:

<div class="sf-dropdown">
  <div class="sf-dropdown-head">hover me to see a dropdown</div>
  <div class="sf-dropdown-body">
    <span>I'm the first item</span>
    <span>I'm the second item</span>
    <span>I'm the third item</span>
  </div>
</div>

You can also make it toggle-able by adding the data-sf-toggle option to the label. This automatically disables the :hover effect.

<div class="sf-dropdown theme-primary">
  <div class="sf-dropdown-head pad" data-sf-toggle>click me to toggle a dropdown</div>
  <div class="sf-dropdown-body">
    <span class="active">Click outside to toggle off</span>
    <span>I'm the second item</span>
    <span>I'm the third item</span>
  </div>
</div>

The dropdown position may be changed to top, right or left:

<div class="sf-dropdown sf-dropdown-top">
  <div class="sf-dropdown-head">this dropdown goes upwards</div>
  <div class="sf-dropdown-body">
    <span>I'm the first item</span>
    <span>I'm the second item</span>
    <span>I'm the third item</span>
  </div>
</div>

sf-tabset

sf-tabset is a tabbed panel. To select a tab, apply the class .active to a matching label/tab pair. The bundled JS file does this automatically on clicks.

<div class="sf-tabset theme-text-accent">
  <!-- Header -->
  <div class="sf-tabset-head theme-accent">
    <div class="sf-tab-head active">First tab (preselected)</div>
    <div class="sf-tab-head">...</div>
    <div class="sf-tab-head">...</div>
  </div>

  <!-- Body -->
  <div class="sf-tabset-body">
    <div class="sf-tab-body active">...</div>
    <div class="sf-tab-body">...</div>
    <div class="sf-tab-body">...</div>
  </div>
</div>

.sf-tabset-fixed

To fixate the header, annotate the tabset with sf-tabset-fixed and add a height property to the body:

<div class="sf-tabset sf-tabset-fixed theme-text-warn">
  <div class="sf-tabset-head theme-warn">
    <div class="sf-tab-head active">First tab (preselected)</div>
    <div class="sf-tab-head">...</div>
    <div class="sf-tab-head">...</div>
  </div>

  <div class="sf-tabset-body" style="height: 10em">
    <div class="sf-tab-body active">...</div>
    <div class="sf-tab-body">...</div>
    <div class="sf-tab-body">...</div>
  </div>
</div>

sf-modal

.sf-modal is a fixed popup dialog. To display it, use an element with the [data-sf-toggle-id] attribute pointing to the modal's id. It will toggle the modal when clicked.

To close a modal, click its overlay or its close button, or hit the Esc key.

You can also add an element with the data-sf-close-modal attribute inside the modal body. Clicking it will dismiss the modal.

The modal close button is added automatically when it's first opened. If you add an element with the .sf-modal-close class in advance, it won't be added automatically. Don't forget to include the data-sf-close-modal attribute.

By default, the modal body takes up up to half the screen, growing wider on small displays. There are two extra size options:

<div class="sf-modal sf-modal-narrow">...</div>
<div class="sf-modal sf-modal-wide">...</div>

See the examples.

<!-- Opens modal when clicked -->
<button data-sf-toggle-id="demo-modal-normal">Open normal-sized modal</button>

<!-- Hidden until activated -->
<div id="demo-modal-normal" class="sf-modal">
  <div class="sf-modal-body">
    <h1>I'm a normal-sized modal</h1>
    <h2>Click overlay or hit Esc to close me.</h2>
    <p>...</p>
    <p><button data-sf-close-modal>Click to close</button></p>
  </div>
</div>

Cloning

You may optionally enclose the sf-modal element into a <template id="..."> tag. The template must have a valid id, and the modal doesn't need one.

In this case, clicking an element with a [data-sf-toggle-id] attribute pointing to the template will spawn a clone of the modal. The clone will be removed from the DOM when closed.

A typical use case is embedding YouTube videos or any other media content. With a normal (non-cloned) modal, playback would continue after a modal is closed. However, when a cloned modal is closed, any media content automatically stops.

<button data-sf-toggle-id="demo-modal-cloned">Open modal with YouTube video</button>
<p>The YT player in this modal is inert until the modal is opened.</p>

<template id="demo-modal-cloned">
  <div class="sf-modal sf-modal-wide">
    <div class="sf-modal-body">
      <div class="sf-embed">
        <iframe src="http://youtube.com/embed/mvH9mwkvWIU" allowFullScreen="true"></iframe>
      </div>
      <p>When this modal is closed, video playback stops.</p>
      <p><button data-sf-close-modal>Click to close</button></p>
    </div>
  </div>
</template>

<template id="demo-modal-cloned">
  <div class="sf-modal sf-modal-wide">
    <div class="sf-modal-body">
      <div class="sf-embed">
        <iframe src="http://youtube.com/embed/mvH9mwkvWIU" allowFullScreen="true"></iframe>
      </div>
      <p>When this modal is closed, video playback stops.</p>
      <p><button data-sf-close-modal>Click to close</button></p>
  </div>
</template>

The reason for a template tag is that in supporting browsers, template contents are completely inert. Embedded content like YouTube videos won't activate until the modal is opened. This can make a huge difference for your page loading speed and perceived performance.

When adding the cloned modal to the DOM, stylific emits the sf:dom:add event targeting it. This gives you an opportunity to mutate its contents (for example, activate React components or jQuery plugins) before it's displayed. When the clone is closed, it's removed from the DOM.

sf-navbar

Each website needs a navigation bar. Open a separate demo to resize the page more easily.

Note how little markup is required.

<div class="sf-navbar">
  <a href="/">Home</a>
  <a class="active" href="/robots">Robots</a>
  <a href="/medical-cybernetics">Medical Cybernetics</a>
  <a href="/partners">Partners</a>
</div>

Folding navbar

sf-navbar can automatically fold on narrow displays, grouping extra elements into a sliding dropdown. You can configure the ordinal number of the child at which to fold by adjusting the $sf-navbar-nth-child variable.

To enable folding, add a <div class="sf-navbar-toggle">...</div> between the elements where you want the navbar to fold. Resize your viewport to see the folding in effect or view the demo.

<div class="sf-navbar">
  <a href="/">Home</a>
  <a class="active" href="/robots">Robots</a>
  <a href="/medical-cybernetics">Medical Cybernetics</a>
  <div class="sf-navbar-toggle"></div>
  <a href="/partners">Partners</a>
  <a href="/achievements">Achievements</a>
</div>

.sf-navbar-fold

With a folding navbar, use the fold option to tell it to always fold, regardless of the viewport width.

<div class="sf-navbar sf-navbar-fold theme-primary">
  <a href="/">Home</a>
  <a class="active" href="/robots">Robots</a>
  <a href="/medical-cybernetics">Medical Cybernetics</a>
  <div class="sf-navbar-toggle"></div>
  <a href="/partners">Partners</a>
  <a href="/achievements">Achievements</a>
</div>

.sf-navbar-fixed

Add the fixed option to glue the navbar to the top of the viewport:

<div class="sf-navbar sf-navbar-fixed">
  <a href="/">Home</a>
  <a class="active" href="/robots">Robots</a>
  <a href="/medical-cybernetics">Medical Cybernetics</a>
  <a href="/partners">Partners</a>
  <a href="/achievements">Achievements</a>
</div>

The next element in the document flow (in this example, the implied site content) will be automatically offset by the navbar height. It must not be absolutely positioned or floating.

.sf-navbar-tabs

This is a version of sf-navbar for use inside the document. Has a lighter shadow and doesn't have a default z-index.

<div class="sf-navbar sf-navbar-tabs">
  <a href="#section-one">Section One</a>
  <a class="active" href="#section-two">Section Two</a>
  <a href="#section-three">Section Three</a>
  <a href="#section-four">Section Four</a>
</div>

sf-footer

Each website needs a footer that pushes itself to the bottom of the viewport (often incorrectly called "sticky"). It's usually difficult to implement when the footer height is unknown. sf-footer does this for you. The footer at the bottom of this page is a demo. Go to an empty page to see how it works.

sf-footer relies on the flex-column body layout, which is a global default defined in layout.scss.

Example footer:

<div class="sf-footer">
  <div class="sf-footer-body">
    <span>2020—2030 © slowpoke</span>
    <span>⇑</span>
  </div>
</div>

sf-tooltip

[data-sf-tooltip] is an attribute-based tooltip implementation that uses pseudoelements. Its colours are automatically adjusted to be the grayscale inverses of the base text and background colours.

<span data-sf-tooltip="I'm a top positioned tooltip!">Hover me to see a top tooltip.</span>

<span data-sf-tooltip="I'm a right positioned tooltip!"
      class="sf-position-right">Hover me to see a right tooltip.</span>

<span data-sf-tooltip="I'm a bottom positioned tooltip!"
      class="sf-position-bottom">Hover me to see a bottom tooltip.</span>

<span data-sf-tooltip="I'm a left positioned tooltip!"
      class="sf-position-left">Hover me to see a left tooltip.</span>

<span data-sf-tooltip="I appear on focus! Click outside to toggle me off."
      data-sf-trigger="focus" contenteditable>Focus me to see a tooltip.</span>

<div data-sf-tooltip="I'm an input tooltip that appears on hover and focus!" data-sf-trigger="hover focus">
  <input placeholder="Hover or focus me to see a tooltip.">
</div>

The trigger attribute supports the following values: hover, focus, disabled, target, active. They correspond to their namesake pseudoclass selectors and may be combined. You can also include .sf-tooltip-visible to make the tooltip visible at all times.

Note: since tooltips are implemented with pseudoelements, they can't be directly used on elements that aren't allowed to have children, such as <input>. The example above demonstrates a workaround: wrap an input into another element and use the tooltip attributes on its parent.

sf-input

This style is applied by default to <input> and <textarea> elements, and is also exposed as .sf-input. It's purely cosmetic. Normalises user agent styles and adds some nice defaults.

<input placeholder="I'm a basic input." value="I'm a basic input.">

<input class="theme-text-primary" placeholder="I use the text-primary theme." value="I use the text-primary theme.">

<input class="theme-accent" placeholder="I use the accent theme." value="I use the accent theme.">

<input class="theme-warn" placeholder="I use the warn theme." value="I use the warn theme.">

<input disabled value="I'm disabled">

<textarea style="width: 100%; display: block" placeholder="I'm a basic textarea.">I'm a basic textarea.</textarea>

<textarea class="theme-primary" style="width: 100%; display: block" placeholder="I use the primary theme.">I use the primary theme.</textarea>

sf-button

This style is applied by default to <button> and <input type="button">, and is also exposed as the .sf-button class. Normalises user agent styles and adds some nice defaults.

<button>default button</button>

<button class="sf-button-flat">flat button</button>

<button class="theme-text-primary">text-primary themed button</button>

<button class="theme-primary">primary themed button</button>

<button class="theme-text-accent">text-accent themed button</button>

<button disabled>disabled button</button>

sf-label

Styling for form input groups. Has two versions:

• vertical: .sf-label
• horizontal: .sf-label-row

<label class="sf-label theme-text-primary">
  <span>Name</span>
  <input placeholder="type name...">
</label>

<label class="sf-label-row theme-accent">
  <span>Email</span>
  <input type="email" placeholder="type email...">
</label>

Can be used on a form or any other element:

<form class="sf-label theme-text-primary">
  <span>Name</span>
  <input placeholder="type name...">
</form>

<p class="sf-label-row theme-text-accent">
  <span>Email</span>
  <input type="email" placeholder="type email...">
</p>

.sf-label-dense

Condensed version for inlining buttons with inputs.

<label class="sf-label-row sf-label-dense">
  <input class="flex-6 theme-text-primary" placeholder="take the blue pill...">
  <button class="flex-1 theme-primary row-center-center">go</button>
</label>

<label class="sf-label-row sf-label-dense">
  <button class="flex-1 theme-warn row-center-center">go</button>
  <input class="flex-6 theme-text-warn" placeholder="or the red pill...">
</label>

sf-embed

Responsive embed, pilfered from Bootstrap.

Has two aspect ratio options:

• 16:9 (default): .sf-embed, .sf-embed-16-to-9
• 4:3: .sf-embed-4-to-3

See the source to find which children are adjusted automatically.

<div class="sf-embed"><iframe src="..."></div>
<div class="sf-embed-4-to-3"><iframe src="..."></iframe></div>
<div class="sf-embed"><div class="sf-embed-item"></div></div>

sf-jumbo

sf-jumbo is a big-ass banner to stick at the top of a page. Saves you a few minutes of typing the styles for positioning, underlay, etc. Like everything else, it's sized in em, so adjusting the font size automatically changes its height.

<div class="sf-jumbo" style="background-image: url(images/aite.jpg)">
  <h1>Catchy slogan</h1>
  <p>Super awesome marketing speak</p>
</div>

To reposition the children, simply add .col-start-stretch or .col-center-stretch (see Layout).

<div class="sf-jumbo col-start-stretch" style="background-image: url(images/citadel-blue.jpg)">
  <h1>I'm Commander Shepard</h1>
  <p>And this is my favourite store on the Citadel</p>
</div>