Sixteen

Docs: https://cotidia.github.io/UI

Install sixteen with npm

$ npm install sixteen

On your project level, import the required Sixteen components:

@import "sixteen/settings";

@import "sixteen/components/reset";
@import "sixteen/components/util";
@import "sixteen/components/type";

@import "sixteen/components/alert";
@import "sixteen/components/animation";
@import "sixteen/components/badge";
@import "sixteen/components/button";
@import "sixteen/components/datepicker";
@import "sixteen/components/dialog";

// Form
@import "sixteen/components/form/base";
@import "sixteen/components/form/table";

@import "sixteen/components/grid";
@import "sixteen/components/label";
@import "sixteen/components/menu";
@import "sixteen/components/table";
@import "sixteen/components/tag";
@import "sixteen/components/tab";
@import "sixteen/components/tooltip";
@import "sixteen/components/layout";

Save the file as _site.scss

Create your own settings file to override default values:

@import "/path/to/node_modules/sixteen/settings";

$font_size: 16px;
$base_line_height: 1.5em;

Save the settings file as _settings.scss, it should be placed in the same folder as site.scss.

Responsive font scaling system

As of version 0.3.0, sixteen now has a font scaling system built in, with the scale being responsive. This means that you can define both:

• How the base font size (16px by default) will scale between mobile, tablet and laptop/desktop.
• How the font size of "normal" text scales up and down through the type scale range (micro up to jumbo).

To opt out of either of these features (either in totality or for a given responsive range) just set the "multiplier" value to 1 (or the same as another responsive range to continue the range).

Additionally, we have a line height scaling factor, which determines how the line height changes through the type scale range. This is mainly in because you will generally want the line height to go down a little as the font size increases. (1.5em at 12px is fine, but at 64px it's too big, and 1.2em is better, for example.) Because this scale works just like the standard type scale, you must provide a valude less than 1 if you want the line-heigh to actually decrease as the font size increases.

So the following settings need to go in your previously-created _settings.scss file in order to set the font scaling up (though the values below are the defaults as of v0.3.0).

// How to modify the base font size between the different viewports.
$font_size_multiplier--mobile: 1;
$font_size_multiplier--tablet: 1;
$font_size_multiplier--desktop: 1;

// The actual ratio between neighbouring font size variants (normal/emphasis, large/hero, etc.).
$font_size_ratio_multiplier--mobile: 1.125;
$font_size_ratio_multiplier--tablet: 1.333;
$font_size_ratio_multiplier--desktop: 1.333;

// How the line height should change between size variants (normal/emphasis, large/hero, etc.).
// Remember that this multiplier increases as the perceived font size increases, so to tighten the
// line height, you should use a number less than 1.
$line_height_ratio_multiplier: 0.94269;

// Actual base font size and line height that everything is calculated from.
$base_font_size: 16px;
$base_line_height: 1.5em;

You can see that the default font size is 16px and the default line height is 1.5em. Additionally, by default, we have no scaling of the base 16px font size between mobile, tablet and laptop/desktop. The font scale itself is also consistent between tablet and laptop/desktop, but does change for mobile.

The responsive type scaling is achieved through the following methods:

• The html font size is set exactly to the base font size with the mobile, tablet laptop/desktop scaling factor applied.
• The actual font size of individual elements is then specified in rems, calculated as a scaling factor of this base font size, which is simply calculated by taking the font scale type asked for and raising the scaling factor to the power of its distance from normal.

To give some concrete values here's what should be generated by these default values:

Font size | Mobile | Tablet | Laptop/Desktop ------------|---------------------------|---------------------------|-------------------------- html | 16px | 16px | 16px Micro | 0.7901rem = 12.6416px | 0.5628rem = 9.0048px | 0.5628rem = 9.0048px Small | 0.8889rem = 14.2224px | 0.7502rem = 12.0032px | 0.7502rem = 12.0032px Normal | 1rem = 16px | 1rem = 16px | 1rem = 16px Emphasis | 1.125rem = 18px | 1.333rem = 21.328px | 1.333rem = 21.328px Medium | 1.2656rem = 20.2496px | 1.7769rem = 28.4304px | 1.7769rem = 28.4304px Large | 1.4238rem = 22.7808px | 2.3686rem = 37.8976px | 2.3686rem = 37.8976px Hero | 1.6018rem = 25.6288px | 3.1573rem = 50.5168px | 3.1573rem = 50.5168px Jumbo | 1.8020rem = 28.832px | 4.2087rem = 67.3392px | 4.2087rem = 67.3392px

In order to actually use the font scaling system, you must not set the font-size (or line-height) property directly, but instead use the font_size mixin, defined in sixteen's type.scss. That file also defines the various scale names - $font_size--{name}.

So to set a paragraph element with the class of lead to use emphasis font sizing, you use the following SCSS:

p.lead {
    @include font_size($font_size--emphasis);
}

That will automatically add font-size and line-height as well as the relevant media queries in order to cover the three responsive ranges (mobile, tablet, laptop/desktop).

Custom buttons

Button settings:

$border-radius: 2px;
$button_border_width: 2px;

Example:

.btn {
    &--secondary {
        @include button-solid-attributes($brand_secondary);

        &.btn--outline {
            @include button-outline-attributes($brand_secondary);
        }

        &.btn--link {
            @include button-link-attributes($brand_secondary);
        }
    }
}