Living Styleguide.

The living style guide for mixn.io is a part of the design system and helps with defining a visual language for all aspects, in particular components, of this website.

Colors

$raw-white
$deep-black
$eyed-black
$vaping-green
$hot-red
$smokin-purple

Headings

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna.

Lists

Lists can also be one–columned and/or accented.

Text Selection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna.

Code

Code can be displayed inline, as well as inside a dedicated block. The Tilt component below is able to hold code as well, which allows for a more prominent display.

The context of this
function foo() {
  console.log(this);
}

foo(); // window
new foo(); // foo {}
foo.call('lol'); // 'lol'
foo.apply('lol'); // 'lol'
foo.bind('lol')(); // 'lol'

Tilt

A tilt is a very flexible component, that comes in various styles and sizes. Tilts can also be paired with several other components to display & hold all sorts of data.

Hello world.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Foobar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna.

index.js
// This file has no content
Golden Gaten Bridge

Form Elements

Buttons