Launch Week Day 4: Introducing Data Exports.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@nib-styles/v2-typography

Package Overview
Dependencies
Maintainers
16
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nib-styles/v2-typography - npm Package Compare versions

Comparing version
4.0.0-fluid.1
 to
4.0.0
+171
dist/component.css
.v2-title {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
margin: 0; }
.v2-title--1 {
font-size: 54px;
font-weight: 300;
letter-spacing: -2px;
line-height: 60px; }
/*
* Add margins to titles when part of an article/document style page
*/
.v2-article .v2-title--1 {
margin-top: 60px;
margin-bottom: 25px; }
.v2-title--2 {
font-size: 36px;
font-weight: 300;
letter-spacing: -1px;
line-height: 48px; }
/*
* Add margins to titles when part of an article/document style page
*/
.v2-article .v2-title--2 {
margin-top: 50px;
margin-bottom: 20px; }
.v2-title--3 {
font-size: 24px;
font-weight: 300;
letter-spacing: -1px;
line-height: 32px; }
/*
* Add margins to titles when part of an article/document style page
*/
.v2-article .v2-title--3 {
margin-top: 40px;
margin-bottom: 15px; }
.v2-title--4 {
font-size: 18px;
font-weight: 400;
line-height: 24px; }
/*
* Add margins to titles when part of an article/document style page
*/
.v2-article .v2-title--4 {
margin-top: 30px;
margin-bottom: 15px; }
.v2-copy {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
font-weight: 400;
line-height: 1.43;
font-size: 14px;
color: #444; }
.v2-copy--white {
color: #fff; }
.v2-paragraph {
margin-top: 10px;
margin-bottom: 10px; }
.v2-link {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
font-wieght: 400;
cursor: pointer;
text-decoration: none;
border-bottom: 1px solid currentColor; }
.v2-link:hover {
border-bottom-width: 2px; }
.v2-link:active {
border-bottom-width: 1px; }
.v2-link--green {
color: #009623; }
.v2-link--grey {
color: #444; }
.v2-link--white {
color: #fff; }
.u-bold {
font-weight: bold; }
.u-italic {
font-style: italic; }
.u-uppercase {
text-transform: uppercase; }
.u-nowrap {
white-space: nowrap; }
.u-ellipsis {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis; }
.v2-list {
margin: 0;
padding: 0; }
.v2-list--copy {
padding-left: 40px;
margin-bottom: 20px; }
.v2-list--copy .v2-list__item {
margin-top: 7px; }
/*
* Base Icon List
*/
.icon-list {
list-style: none;
margin: 0;
padding: 0; }
.v2-article .icon-list {
list-style: none;
padding: 0 0 0 40px;
margin: 0 0 20px; }
.icon-list > .icon-list__item {
margin-bottom: .5em;
position: relative;
padding-left: 1.5em;
line-height: 1.4; }
.icon-list > .icon-list__item:before {
position: relative;
vertical-align: middle;
font-family: 'nibdings';
line-height: 1;
color: currentColor;
margin-right: .5em;
margin-left: -1.5em; }
/*
* Icon Shape Modifiers
*/
.icon-list--tick > .icon-list__item:before {
content: "\E01C";
top: -1px; }
.icon-list--cross > .icon-list__item:before {
content: "\E004";
top: -2px; }
.icon-list--chevron > .icon-list__item:before {
content: "\E022";
top: -2px; }
/*
* Icon Color Modifiers
*/
.icon-list--green > .icon-list__item:before {
color: #009623; }
.icon-list--white > .icon-list__item:before {
color: #fff; }
.icon-list--grey > .icon-list__item:before {
color: #444; }
+110
example/example.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Typography</title>
<style>
body {
padding: 1em;
}
</style>
<link href="example.bundle.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300,700" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="some-other-class">A mixed in heading</h1>
<p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.</p>
<h3 class="subheading">Lorem ipsum</h3>
<p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.</p>
<h3 class="subheading">Lorem ipsum</h3>
<p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.</p>
<article class="v2-article v2-copy">
<h1 class="v2-title v2-title--1">Title 1</h1>
<h2 class="v2-title v2-title--2">Title 2</h2>
<p class="v2-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus volutpat elit ut porta. Aliquam ullamcorper vestibulum aliquet. Nunc sodales nunc non dui congue lacinia. Integer vitae mi nisi. Donec rhoncus, dolor eget posuere semper, nunc massa dapibus dolor, vulputate laoreet diam ante at arcu. Aenean sed dolor porttitor tellus consequat cursus et et lacus. Praesent vulputate molestie rhoncus. Etiam porta mattis dui, vitae elementum magna scelerisque eget. Phasellus venenatis, nibh et fringilla cursus, nulla libero auctor orci, at bibendum nibh eros et diam. Cras sit amet rutrum velit. Mauris odio nisl, sollicitudin at placerat sed, congue sit amet purus. Vivamus ut consequat ex.</p>
<h3 class="v2-title v2-title--3">Title 3</h3>
<p class="v2-paragraph">Aliquam est elit, pharetra vitae orci eget, accumsan rutrum massa. Fusce volutpat ornare placerat. Nulla et est fringilla, dignissim nisi commodo, fringilla augue. Ut in massa sodales diam semper rutrum non non turpis. Etiam tempus pretium ultrices. Morbi justo mi, vehicula sit amet justo non, varius malesuada magna. Integer vel tellus quis nisi mattis aliquam sed vel diam. Integer mollis nisi sed fermentum scelerisque. Sed pharetra nunc sed tincidunt finibus. Nam eu sollicitudin nulla. Ut pharetra in metus in varius. Etiam posuere ligula ex, eu rhoncus leo scelerisque ut. Aliquam sollicitudin erat quis elit bibendum maximus. Aliquam a libero quam. Phasellus congue maximus ex in lobortis.</<p>
<h4 class="v2-title v2-title--4">Title 4</h4>
<p class="v2-paragraph">Vivamus eleifend accumsan elit ac euismod. Nunc varius porttitor mollis. Vivamus sed dui vitae lorem auctor viverra nec vel nisl. Pellentesque vehicula magna quis dapibus sollicitudin. Phasellus dictum id nisi nec dictum. Phasellus eu posuere quam. Vivamus id nunc vel lorem bibendum maximus quis vitae diam. Curabitur ac scelerisque dui. Etiam sit amet consequat ante. Nullam et ullamcorper lacus, quis luctus mauris. Aliquam facilisis dui vitae mi imperdiet auctor. In in enim eros. Aliquam eget turpis sit amet metus aliquet sagittis ac quis mi.</p>
<ul class="v2-list v2-list--copy">
<li class="v2-list__item">libero purus</li>
<li class="v2-list__item">sit amet laoreet nibh</li>
<li class="v2-list__item">commodo vitae</li>
<li class="v2-list__item">ligula iaculis</li>
</ul>
<p class="v2-paragraph">Donec elementum libero purus, sit amet laoreet nibh commodo vitae. Maecenas in ligula iaculis, interdum lectus id, lobortis arcu. Proin nisl purus, mattis at suscipit eu, ultrices ac elit. Nam lectus turpis, hendrerit ut interdum pretium, placerat id neque. Phasellus consequat eget quam quis ultrices. Nulla condimentum imperdiet vehicula. Curabitur dignissim urna nunc. Fusce sodales tellus nec diam aliquet ultricies. Sed et dui vel massa dapibus aliquet. Proin elementum ultricies neque sit amet vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum vel lacus in pharetra. Donec tristique arcu ac volutpat vestibulum. Sed consequat orci vel lectus scelerisque, sed eleifend quam aliquet. Curabitur sollicitudin eget leo ac porta. Fusce congue augue non metus posuere, eget maximus augue mollis.</p>
<ul class="icon-list icon-list--tick icon-list--green">
<li class="icon-list__item">Libero purus</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Commodo vitae</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--cross">
<li class="icon-list__item">Libero purus</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Commodo vitae</li>
</ul>
<p class="v2-paragraph">Uses relative padding/margins to ensure it works at all font sizes. If text breaks down to a second line it will align with the first, not fall beneath the icon.</p>
<ul class="icon-list icon-list--chevron icon-list--green" style="font-size:12px; width:480px;">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--cross" style="font-size:18px; width:480px;">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--tick icon-list--white v2-copy--white" style="font-size:21px; width:480px;background: #444; padding: 40px;">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--tick" style="font-size:30px; width:480px;">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<p class="v2-paragraph">Donec elementum libero purus, sit amet laoreet nibh commodo vitae. Maecenas in ligula iaculis, interdum lectus id, lobortis arcu. Proin nisl purus, mattis at suscipit eu, ultrices ac elit. Nam lectus turpis, hendrerit ut interdum pretium, placerat id neque. Phasellus consequat eget quam quis ultrices. Nulla condimentum imperdiet vehicula. Curabitur dignissim urna nunc. Fusce sodales tellus nec diam aliquet ultricies. Sed et dui vel massa dapibus aliquet. Proin elementum ultricies neque sit amet vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum vel lacus in pharetra. Donec tristique arcu ac volutpat vestibulum. Sed consequat orci vel lectus scelerisque, sed eleifend quam aliquet. Curabitur sollicitudin eget leo ac porta. Fusce congue augue non metus posuere, eget maximus augue mollis.</p>
<ul class="icon-list icon-list--chevron">
<li class="icon-list__item">Libero purus</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Commodo vitae</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
</article>
<h3 class="v2-title v2-title--3">Copy</h3>
<h4 class="v2-title v2-title--4">Small</h4>
<p class="p-sm">
Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.
</p>
<h4 class="v2-title v2-title--4">Medium</h4>
<p class="p-md">
Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.
</p>
<h4 class="v2-title v2-title--4">Large</h4>
<p class="p-lg">
Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.
</p>
<a href="#" class="v2-link v2-link--green">standalone link should have font-family</a>
</body>
+37
example/example.scss
@import "@nib-styles/v2-icons";
@import "../index"; // Include mixins
@import "../compiled"; // Included compiled
.some-other-class {
@include title($size: 1);
text-align: right;
text-decoration: underline;
transform: rotate(180deg);
}
.subheading {
@include title(3, 'white', true);
background: $color-queen-elizabeth;
padding: 5px;
}
.custom-paragraph {
@include copy($pad: true);
text-align: right;
}
.custom-link {
@include link($color: 'green');
}
.p-sm {
@include copy($size: 'small');
}
.p-md {
@include copy();
}
.p-lg {
@include copy($size: 'large');
}
+44
mixins/copy.scss
@mixin copy-common() {
font-family: $font-copy;
font-weight: 400;
line-height: 1.43; //20px at 14px
}
@mixin copy-size($size) {
@if $size == null {
font-size: 14px;
} @else if $size == 'small' {
font-size: 12px;
} @else if $size == 'large' {
font-size: 16px;
} @else {
@error('Invalid copy-size "#{$size}"');
}
}
@mixin copy-color($color) {
@if $color == null {
color: inherit;
} @else if $color == 'grey' {
color: $color-doc;
} @else if $color == 'white' {
color: $color-white;
} @else {
@error('Invalid copy-color "#{$color}"');
}
}
@mixin copy-padding() {
margin-top: 10px;
margin-bottom: 10px;
}
@mixin copy($size: null, $color: null, $pad: false) {
@include copy-common();
@include copy-size($size);
@include copy-color($color);
@if ($pad) {
@include copy-padding();
}
}
+38
mixins/link.scss
@mixin link-common() {
font-family: $font-copy;
font-wieght: 400;
cursor: pointer;
text-decoration: none;
border-bottom: 1px solid currentColor;
&:hover {
border-bottom-width: 2px;
}
&:active{
border-bottom-width: 1px;
}
}
@mixin link-color($color: null) {
@if $color == null {
color: inherit;
} @else if $color == 'green' {
color: $color-queen-elizabeth;
} @else if $color == 'grey' {
color: $color-doc;
} @else if $color == 'white' {
color: $color-white;
} @else {
@error('Invalid link-color "#{$color}"');
}
}
@mixin link($color: null) {
@include link-common();
@include link-color($color);
}
+72
mixins/title.scss
@mixin title-common() {
font-family: $font-title;
margin: 0;
}
@mixin title-size($size) {
@if $size == 1 {
font-size: 54px;
font-weight: 300;
letter-spacing: -2px;
line-height: 60px;
} @else if $size == 2 {
font-size: 36px;
font-weight: 300;
letter-spacing: -1px;
line-height: 48px;
} @else if $size == 3 {
font-size: 24px;
font-weight: 300;
letter-spacing: -1px;
line-height: 32px;
} @else if $size == 4 {
font-size: 18px;
font-weight: 400;
line-height: 24px;
} @else {
@error('Invalid title-size "#{$size}"');
}
}
@mixin title-color($color) {
@if $color == null {
color: inherit;
} @else if $color == 'white' {
color: $color-white;
} @else if $color == 'grey' {
color: $color-doc;
} @else if $color == 'green' {
color: $color-prince-charles;
} @else {
@error('Invalid title-color "#{$color}"');
}
}
@mixin title-padding($padding) {
@if $padding == 1 {
margin-top: 60px;
margin-bottom: 25px;
} @else if $padding == 2 {
margin-top: 50px;
margin-bottom: 20px;
} @else if $padding == 3 {
margin-top: 40px;
margin-bottom: 15px;
} @else if $padding == 4 {
margin-top: 30px;
margin-bottom: 15px;
} @else {
@error('Invalid title-padding "#{$padding}"');
}
}
@mixin title($size, $color: null, $pad: false) {
@include title-common();
@include title-size($size);
@include title-color($color);
@if $pad == true {
@include title-padding($size);
}
}
+85
partials/lists.scss
.v2-list {
margin: 0;
padding: 0;
//tried using "list-style-position: inside;" - it works great for the case of lists with items that only contain single lines of text but doesn't display
//correctly for items with multiple lines of text, or for items containing block elements e.g. <li><ul>...</ul><li> or <li><h4>...</h4></li>
//list-style-position: inside;
}
.v2-list--copy {
padding-left: 40px;
margin-bottom: 20px;
}
.v2-list--copy .v2-list__item {
margin-top: 7px;
}
/*
* Base Icon List
*/
.icon-list {
list-style: none;
margin: 0;
padding: 0;
}
.v2-article .icon-list {
list-style: none;
padding: 0 0 0 40px;
margin: 0 0 20px;
}
.icon-list > .icon-list__item {
margin-bottom: .5em;
position: relative;
padding-left: 1.5em;
line-height: 1.4;
}
.icon-list > .icon-list__item:before {
position: relative;
vertical-align: middle;
font-family: 'nibdings';
line-height: 1;
color: currentColor;
margin-right: .5em;
margin-left: -1.5em;
}
/*
* Icon Shape Modifiers
*/
.icon-list--tick > .icon-list__item:before {
content: "\E01C";
top:-1px;
}
.icon-list--cross > .icon-list__item:before {
content: "\E004";
top:-2px;
}
.icon-list--chevron > .icon-list__item:before {
content: "\E022";
top:-2px;
}
/*
* Icon Color Modifiers
*/
.icon-list--green > .icon-list__item:before {
color: $color-queen-elizabeth;
}
.icon-list--white > .icon-list__item:before {
color: $color-white;
}
.icon-list--grey > .icon-list__item:before {
color: $color-doc;
}
+24
partials/utils.scss
// No mixins required for single properties, easier to remember the actual css
.u-bold {
font-weight: bold;
}
.u-italic {
font-style: italic;
}
.u-uppercase {
text-transform: uppercase;
}
.u-nowrap {
white-space: nowrap;
}
.u-ellipsis {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
+28
-39
compiled.scss

@@ -1,26 +0,8 @@

// Include all the mixins and the fluid type scale
// Include all the mixins
@import "./index";
.v2-copy {
@include copy;
}
// ============ Title ============
.v2-copy--small {
@include copy($size: small);
}
.v2-copy--large {
@include copy($size: large);
}
.v2-copy--white {
color: $color-white;
}
.v2-paragraph {
@include paragraph;
}
.v2-title {
@include title-common;
@include title-common();
}

@@ -30,44 +12,51 @@

@for $i from 1 through 4 {
.v2-title--#{$i} {
@include title-size($i);
}
}
/*
* Add margins to titles when part of an article/document style page
*/
/*
* Add margins to titles when part of an article/document style page
*/
.v2-article .v2-title--#{$i} {
@include title-padding($i);
}
.v2-article .v2-title--1 {
@include title-padding(1);
}
.v2-article .v2-title--2 {
@include title-padding(2);
// ============ Copy ============
.v2-copy {
@include copy($color: 'grey');
}
.v2-article .v2-title--3 {
@include title-padding(3);
.v2-copy--white {
@include copy-color('white');
}
.v2-article .v2-title--4 {
@include title-padding(4);
.v2-paragraph {
@include copy-padding();
}
// ============ Link ============
.v2-link {
@include link;
@include link-common();
}
.v2-link--green {
color: $color-queen-elizabeth;
@include link-color('green');
}
.v2-link--grey {
color: $color-doc;
@include link-color('grey');
}
.v2-link--white {
color: $color-white;
@include link-color('white');
}
@import "./partials/_utils";
@import "./partials/_lists";
// ============ Utils ============
@import "./partials/utils";
@import "./partials/lists";
+2
-2
component.json
{
"name": "v2-typography",
"styles": [
"dist/compiled.css"
"dist/component.css"
],

@@ -9,2 +9,2 @@ "dependencies": {

}
}
}
+10
-4
index.scss
@import "@nib-styles/colors";
@import "./partials/_fluid";
@import "./mixins/_copy";
@import "./mixins/_links";
@import "./mixins/_titles";
$font-stack-open-sans: "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
$font-stack-roboto: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
$font-copy: $font-stack-open-sans;
$font-title: $font-stack-roboto;
@import "./mixins/copy";
@import "./mixins/link";
@import "./mixins/title";
+6
-5
package.json
{
"name": "@nib-styles/v2-typography",
"version": "4.0.0-fluid.1",
"version": "4.0.0",
"repository": {

@@ -13,8 +13,9 @@ "type": "git",

"devDependencies": {
"sass-composer": "2.0.0-beta12"
"sass-composer": "2.0.0-beta14"
},
"scripts": {
"build": "sass-composer compiled.scss -o dist/compiled.css",
"example.build": "sass-composer example/index.scss -o example/build.css"
"build:dist": "sass-composer compiled.scss -o dist/component.css",
"build:example": "sass-composer example/example.scss -o example/example.bundle.css",
"build": "npm run build:dist && npm run build:example"
}
}
}
+72
-78
README.md
# @nib-styles/v2-typography
Typography styles and mixins for nib. See the [nib-pattern-library](https://nib-pattern-library.firebaseapp.com/pages/typography.html) for usage.
nib styled typography
## Build
## Installation
npm run build
For older projects not using scss. To see an example:
npm install --save @nib-styles/v2-typography
npm run example.build
**Note**: Requires `Opens Sans` and `Roboto` fonts from Google Fonts:
```html
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300,700' />
```
## Using mixins
## Usage
Mixins allow us to have fewer classes on html elements, without needing to rewrite styles. For the typography mixins we have left behind the `v2-` prefix.
### Using mixins
There are mixins for titles, copy and links. For lists and utils you will need to use the compiled classes ***(see below)***
```scss
@import "@nib-styles/v2-typography";
### @include title($size: (1-4), $color: (grey/green/white), $pad: (false/true));
.product {
Mixin equivalent of `.v2-title`, plus `.v2-title--1/2/3/4`, plus new capability to adjust colour (grey default) and add padding (false by default)
&__title {
@include title(2, $color: 'grey', $padding: true)
}
### @include link($color: (inherit/green/grey/white));
&__description {
@include copy($color: 'grey', $padding: true)
}
Mixin equivalent of `.v2-link`, plus optional `.v2-link--green/grey/white`
&__link {
@include link($color: 'green')
}
### @include copy;
}
```
Mixin equivalent of `.v2-copy` class.
```html
<div class="product">
<h2 class="product__title">Top</h2>
<p class="product__description">
The best hospital cover you can get.
<a class="product__link">Join now!</a>
</p>
</div>
```
### @include paragraph;
### Using compiled classes
Mixin equivalent of `.v2-paragraph` class.
```scss
@import "@nib-styles/v2-typography/compiled";
```
CSS:
```html
<div class="v2-article">
<h2 class="v2-title v2-title--2 v2-title--grey">Top</h2>
<p class="v2-copy">
The best hospital cover you can get.
<a class="v2-link v2-link--green">Join now!</a>
</p>
</div>
```
@import "@nib-styles/v2-typography";
.box {
@include copy;
}
.custom-title {
@include title($size: 1, $color: green, $pad: false);
transform: rotate(180deg);
}
.custom-subheading {
@include title(2, white, true);
background: $green--elizabeth;
}
.custom-paragraph {
@include paragraph;
text-align: right;
}
.custom-link {
@include link(green);
}
## Mixins
HTML:
```scss
@include title($size, $color : null, $padding : false)
```
<div class="box">
<h1 class="custom-title">A mixed in heading</h1>
<h3 class="custom-subheading">Lorem ipsum</h3>
<p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felibitur vit risus i.</p>
</div>
## Using compiled classes
- `$size` Required. An integer from `1-4`.
CSS:
- `$color` Optional. May be `grey`, `green` or `white`. If no color is provided the title will inherit the color from its parent element.
@import "@nib-styles/v2-typography/dist/compiled";
- `$padding` Optional. If `true` an amount of top and bottom margin is applied.
```scss
@include copy($size : null, $color : null, $padding : false)
```
HTML:
- `$size` Optional. May be `small` or `large`.
<div class="v2-article v2-copy">
<h1 class="v2-title v2-title--3">Page title</h1>
<p class="v2-paragraph">This is a paragraph with a <a class="v2-link" href="#">link</a>.</p>
<ul class="v2-list v2-list--copy">
<li class="v2-list--item">One</li>
<li class="v2-list--item">Two</li>
<li class="v2-list--item">Three</li>
</ul>
</div>
- `$color` Optional. May be `grey`, `green` or `white`. If no color is provided the title will inherit the color from its parent element.
## Fluid Type Setting
`$padding` Optional. If `true` an amount of top and bottom margin is applied.
Fluidly set the type size between a specified min and max font size, over a specified viewport size range.
Current settings:
```scss
@include link($color : null)
```
- `min-font`: 14px
- `max-font`: 20px
- `min-width`: 400px
- `max-width`: 1200px
- `$color` Optional. May be `grey` or `white`. If no color is provided the title will inherit the color from its parent element.
This means that at screen sizes at or below 400px wide, the font will be 14px. Over 1200px and the font will be fixed at 20px. In between the font will be somewhere in between.
## Changelog
NB: These values are yet to be ratified by the designers.
### v4.0.0
## Modular Scale
- break: `copy()` color defaults to inherit
- break: `title()`, `copy()` and `link()` mixins error if they receive an invalid param
- add: `copy()` size configurable via mixin
- add: `$font-body` and `$font-title` variables
- fix/break: `link()`/`.v2-link` now has font specified so it doesn't have to be inside a `v2-copy` block
- fix: `title()` padding should be dependent on the title size
- fix: issues with mixins comparing strings and color names
- fix: documentation
Headings 1-4 and paragraph text obey a [perfect fourth](http://www.modularscale.com/?16&px&1.333&web&text) modular scale. All sizes must be specified relative to the root element using rems in order to follow the scale.
## Changelog
### v2.3.0

@@ -116,5 +114,1 @@

- Setting `color: inherit` on `.v2-link` by default
## To do
- List mixins
.idea/.name

Sorry, the diff of this file is not supported yet

-6
.idea/encodings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding">
<file url="PROJECT" charset="UTF-8" />
</component>
</project>
-6
.idea/jsLibraryMappings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{v2-typography node_modules}" />
</component>
</project>
-14
.idea/libraries/v2_typography_node_modules.xml
<component name="libraryTable">
<library name="v2-typography node_modules" type="javaScript">
<properties>
<option name="frameworkName" value="node_modules" />
<sourceFilesUrls>
<item url="file://$PROJECT_DIR$/node_modules" />
</sourceFilesUrls>
</properties>
<CLASSES>
<root url="file://$PROJECT_DIR$/node_modules" />
</CLASSES>
<SOURCES />
</library>
</component>
-13
.idea/misc.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectLevelVcsManager" settingsEditedManually="false">
<OptionsSetting value="true" id="Add" />
<OptionsSetting value="true" id="Remove" />
<OptionsSetting value="true" id="Checkout" />
<OptionsSetting value="true" id="Update" />
<OptionsSetting value="true" id="Status" />
<OptionsSetting value="true" id="Edit" />
<ConfirmationsSetting value="0" id="Add" />
<ConfirmationsSetting value="0" id="Remove" />
</component>
</project>
-8
.idea/modules.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/v2-typography.iml" filepath="$PROJECT_DIR$/.idea/v2-typography.iml" />
</modules>
</component>
</project>
.idea/v2-typography.iml

Sorry, the diff of this file is not supported yet

-6
.idea/vcs.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
-4
.idea/watcherTasks.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
</project>
-817
.idea/workspace.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="fd8dd24f-c1cd-4300-846b-1bc880743938" name="Default" comment="">
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/example/index.scss" afterPath="$PROJECT_DIR$/example/index.scss" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
</list>
<ignored path="v2-typography.iws" />
<ignored path=".idea/workspace.xml" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="ChangesViewManager" flattened_view="true" show_ignored="false" />
<component name="CreatePatchCommitExecutor">
<option name="PATCH_PATH" value="" />
</component>
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
<component name="FavoritesManager">
<favorites_list name="v2-typography" />
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file leaf-file-name="compiled.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/compiled.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="20" column="21" selection-start-line="20" selection-start-column="21" selection-end-line="20" selection-end-column="21" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="index.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/example/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="-14.384615">
<caret line="22" column="13" selection-start-line="22" selection-start-column="13" selection-end-line="22" selection-end-column="13" />
<folding>
<marker date="1453253474111" expanded="true" signature="692:695" placeholder="{...}" />
</folding>
</state>
</provider>
</entry>
</file>
<file leaf-file-name="package.json" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.35132033">
<caret line="18" column="1" selection-start-line="18" selection-start-column="1" selection-end-line="18" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="_fluid.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/partials/_fluid.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="32" column="1" selection-start-line="32" selection-start-column="1" selection-end-line="32" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="build.css" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/example/build.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="492" column="0" selection-start-line="492" selection-start-column="0" selection-end-line="492" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="_copy.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/mixins/_copy.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="14" column="19" selection-start-line="14" selection-start-column="19" selection-end-line="14" selection-end-column="19" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="_links.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/mixins/_links.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="22" column="1" selection-start-line="22" selection-start-column="1" selection-end-line="22" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/example/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="46" column="51" selection-start-line="46" selection-start-column="51" selection-end-line="46" selection-end-column="51" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="_titles.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/mixins/_titles.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="57" column="22" selection-start-line="57" selection-start-column="22" selection-end-line="57" selection-end-column="22" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="compiled.css" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/dist/compiled.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="15" column="39" selection-start-line="15" selection-start-column="39" selection-end-line="15" selection-end-column="39" />
<folding />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/lib/copy.css" />
<option value="$PROJECT_DIR$/lib/lists.css" />
<option value="$PROJECT_DIR$/lib/titles.css" />
<option value="$PROJECT_DIR$/packages.json" />
<option value="$PROJECT_DIR$/npm-debug.log" />
<option value="$PROJECT_DIR$/.gitignore" />
<option value="$PROJECT_DIR$/dir/compiled.css" />
<option value="$PROJECT_DIR$/example.html" />
<option value="$PROJECT_DIR$/lib/partials/_lists.scss" />
<option value="$PROJECT_DIR$/component.json" />
<option value="$PROJECT_DIR$/lib/partials/_copy.scss" />
<option value="$PROJECT_DIR$/lib/partials/_utils.scss" />
<option value="$PROJECT_DIR$/lib/index.scss" />
<option value="$PROJECT_DIR$/lib/partials/_titles.scss" />
<option value="$PROJECT_DIR$/lib/partials/_links.scss" />
<option value="$PROJECT_DIR$/partials/_titles.scss" />
<option value="$PROJECT_DIR$/partials/_copy.scss" />
<option value="$PROJECT_DIR$/partials/_links.scss" />
<option value="$PROJECT_DIR$/mixins/_links.scss" />
<option value="$PROJECT_DIR$/node_modules/@nib-styles/colors/index.scss" />
<option value="$PROJECT_DIR$/partials/_lists.scss" />
<option value="$PROJECT_DIR$/README.md" />
<option value="$PROJECT_DIR$/example/index.html" />
<option value="$PROJECT_DIR$/index.scss" />
<option value="$PROJECT_DIR$/compiled.scss" />
<option value="$PROJECT_DIR$/dist/compiled.css" />
<option value="$PROJECT_DIR$/mixins/_copy.scss" />
<option value="$PROJECT_DIR$/mixins/_titles.scss" />
<option value="$PROJECT_DIR$/partials/_fluid.scss" />
<option value="$PROJECT_DIR$/example/index.scss" />
<option value="$PROJECT_DIR$/package.json" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" />
<component name="JsBuildToolPackageJson" detection-done="true">
<package-json value="$PROJECT_DIR$/package.json" />
</component>
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
</component>
<component name="ProjectFrameBounds">
<option name="x" value="-8" />
<option name="y" value="-8" />
<option name="width" value="1936" />
<option name="height" value="1056" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="false">
<OptionsSetting value="true" id="Add" />
<OptionsSetting value="true" id="Remove" />
<OptionsSetting value="true" id="Checkout" />
<OptionsSetting value="true" id="Update" />
<OptionsSetting value="true" id="Status" />
<OptionsSetting value="true" id="Edit" />
<ConfirmationsSetting value="0" id="Add" />
<ConfirmationsSetting value="0" id="Remove" />
</component>
<component name="ProjectView">
<navigator currentView="ProjectPane" proportions="" version="1">
<flattenPackages />
<showMembers />
<showModules />
<showLibraryContents />
<hideEmptyPackages />
<abbreviatePackageNames />
<autoscrollToSource />
<autoscrollFromSource />
<sortByType />
<manualOrder />
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="partials" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="mixins" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="example" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="v2-typography" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="dist" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
</subPane>
</pane>
<pane id="Scratches" />
</panes>
</component>
<component name="PropertiesComponent">
<property name="last_opened_file_path" value="$PROJECT_DIR$/../nib-styles/react-form" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="HbShouldOpenHtmlAsHb" value="" />
<property name="js-jscs-nodeInterpreter" value="C:\Program Files (x86)\nodejs\node.exe" />
<property name="SearchEverywhereHistoryKey" value="&#9;FILE&#9;file://C:/dev/github/v2-typography/example/index.scss" />
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\dev\github\v2-typography\mixins" />
<recent name="C:\dev\github\v2-typography" />
<recent name="C:\dev\github\v2-typography\example" />
<recent name="C:\dev\github\v2-typography\lib\partials" />
</key>
</component>
<component name="RunManager">
<configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
<method />
</configuration>
<configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma" config-file="">
<envs />
<method />
</configuration>
<configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
<method />
</configuration>
<configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" working-dir="">
<method />
</configuration>
<configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
<option name="cucumberJsArguments" value="" />
<option name="executablePath" />
<option name="filePath" />
<method />
</configuration>
<configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
<node-options />
<gulpfile />
<tasks />
<arguments />
<pass-parent-envs>true</pass-parent-envs>
<envs />
<method />
</configuration>
<configuration default="true" type="js.build_tools.npm" factoryName="npm">
<command value="run-script" />
<scripts />
<envs />
<method />
</configuration>
<configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
<node-options />
<working-directory>$PROJECT_DIR$</working-directory>
<pass-parent-env>true</pass-parent-env>
<envs />
<ui>bdd</ui>
<extra-mocha-options />
<test-kind>DIRECTORY</test-kind>
<test-directory />
<recursive>false</recursive>
<method />
</configuration>
</component>
<component name="ShelveChangesManager" show_recycled="false" />
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="fd8dd24f-c1cd-4300-846b-1bc880743938" name="Default" comment="" />
<created>1432260904374</created>
<option name="number" value="Default" />
<updated>1432260904374</updated>
</task>
<servers />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
<editor active="false" />
<layout>
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.12633263" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
<window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="true" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.26066098" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="true" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Messages" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="SLIDING" type="SLIDING" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Application Servers" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32900432" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
</layout>
</component>
<component name="Vcs.Log.UiProperties">
<option name="RECENTLY_FILTERED_USER_GROUPS">
<collection />
</option>
<option name="RECENTLY_FILTERED_BRANCH_GROUPS">
<collection />
</option>
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager />
<watches-manager />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/mixins/_copy.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="19" selection-start-line="8" selection-start-column="19" selection-end-line="8" selection-end-column="19" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="79" column="0" selection-start-line="79" selection-start-column="0" selection-end-line="79" selection-end-column="0" />
</state>
</provider>
<provider editor-type-id="MarkdownPreviewEditor">
<state />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="42" column="0" selection-start-line="42" selection-start-column="0" selection-end-line="42" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="3" column="27" selection-start-line="3" selection-start-column="26" selection-end-line="3" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_titles.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="52" column="24" selection-start-line="52" selection-start-column="24" selection-end-line="52" selection-end-column="24" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/compiled.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="159" column="44" selection-start-line="159" selection-start-column="44" selection-end-line="159" selection-end-column="44" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/compiled.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="19" column="0" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="1" column="0" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
<folding>
<marker date="1453253474111" expanded="true" signature="692:695" placeholder="{...}" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_copy.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="19" selection-start-line="8" selection-start-column="19" selection-end-line="8" selection-end-column="19" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="79" column="0" selection-start-line="79" selection-start-column="0" selection-end-line="79" selection-end-column="0" />
</state>
</provider>
<provider editor-type-id="MarkdownPreviewEditor">
<state />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="42" column="0" selection-start-line="42" selection-start-column="0" selection-end-line="42" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="3" column="27" selection-start-line="3" selection-start-column="26" selection-end-line="3" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_titles.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="52" column="24" selection-start-line="52" selection-start-column="24" selection-end-line="52" selection-end-column="24" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/compiled.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="148" column="14" selection-start-line="148" selection-start-column="14" selection-end-line="148" selection-end-column="14" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/compiled.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="56" column="1" selection-start-line="56" selection-start-column="1" selection-end-line="56" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="15" column="1" selection-start-line="15" selection-start-column="1" selection-end-line="15" selection-end-column="1" />
<folding>
<marker date="1453253474111" expanded="true" signature="692:695" placeholder="{...}" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="3" column="27" selection-start-line="3" selection-start-column="27" selection-end-line="3" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_titles.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="62" column="1" selection-start-line="62" selection-start-column="1" selection-end-line="62" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/compiled.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="148" column="14" selection-start-line="148" selection-start-column="14" selection-end-line="148" selection-end-column="14" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/compiled.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="10" column="0" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="12" column="0" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="12" column="1" selection-start-line="12" selection-start-column="1" selection-end-line="12" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="4" column="0" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/component.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.26771653">
<caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/.gitignore">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="-3.148148">
<caret line="5" column="0" selection-start-line="5" selection-start-column="0" selection-end-line="5" selection-end-column="0" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/node_modules/@nib-styles/colors/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.42183623">
<caret line="10" column="0" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="98" column="0" selection-start-line="98" selection-start-column="0" selection-end-line="98" selection-end-column="0" />
</state>
</provider>
<provider editor-type-id="MarkdownPreviewEditor">
<state />
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.078071184">
<caret line="4" column="27" selection-start-line="4" selection-start-column="26" selection-end-line="4" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/compiled.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="20" column="21" selection-start-line="20" selection-start-column="21" selection-end-line="20" selection-end-column="21" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/partials/_lists.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_links.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="22" column="1" selection-start-line="22" selection-start-column="1" selection-end-line="22" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/compiled.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="15" column="39" selection-start-line="15" selection-start-column="39" selection-end-line="15" selection-end-column="39" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_titles.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="57" column="22" selection-start-line="57" selection-start-column="22" selection-end-line="57" selection-end-column="22" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_copy.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="14" column="19" selection-start-line="14" selection-start-column="19" selection-end-line="14" selection-end-column="19" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/partials/_fluid.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="32" column="1" selection-start-line="32" selection-start-column="1" selection-end-line="32" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/index.html">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="46" column="51" selection-start-line="46" selection-start-column="51" selection-end-line="46" selection-end-column="51" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/build.css">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.0">
<caret line="492" column="0" selection-start-line="492" selection-start-column="0" selection-end-line="492" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/example/index.scss">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="-14.384615">
<caret line="22" column="13" selection-start-line="22" selection-start-column="13" selection-end-line="22" selection-end-column="13" />
<folding>
<marker date="1453253474111" expanded="true" signature="692:695" placeholder="{...}" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state vertical-scroll-proportion="0.35132033">
<caret line="18" column="1" selection-start-line="18" selection-start-column="1" selection-end-line="18" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
</component>
</project>
-217
dist/compiled.css
.v2-copy {
color: #444;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-copy {
font-size: calc(14px + (20 - 14) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-copy {
font-size: 20px; } }
.v2-copy--small {
color: #444;
font-family: 'Open Sans', sans-serif;
font-size: 10.5px;
font-weight: 400;
line-height: 1.5; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-copy--small {
font-size: calc(10.5px + (15 - 10.5) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-copy--small {
font-size: 15px; } }
.v2-copy--large {
color: #444;
font-family: 'Open Sans', sans-serif;
font-size: 17.5px;
font-weight: 400;
line-height: 1.5; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-copy--large {
font-size: calc(17.5px + (25 - 17.5) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-copy--large {
font-size: 25px; } }
.v2-copy--white {
color: #fff; }
.v2-paragraph {
margin-top: 10px;
margin-bottom: 10px; }
.v2-title {
font-family: 'Roboto', sans-serif;
margin: 0; }
.v2-title--1 {
font-size: 44.198px;
font-weight: 300;
letter-spacing: -2px;
line-height: 1.1; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-title--1 {
font-size: calc(44.198px + (63.14 - 44.198) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-title--1 {
font-size: 63.14px; } }
.v2-title--2 {
font-size: 33.166px;
font-weight: 300;
letter-spacing: -1px;
line-height: 1.5; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-title--2 {
font-size: calc(33.166px + (47.38 - 33.166) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-title--2 {
font-size: 47.38px; } }
.v2-title--3 {
font-size: 24.878px;
font-weight: 300;
letter-spacing: -1px;
line-height: 1.5; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-title--3 {
font-size: calc(24.878px + (35.54 - 24.878) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-title--3 {
font-size: 35.54px; } }
.v2-title--4 {
font-size: 18.662px;
font-weight: 400;
line-height: 1.33; }
@media (min-width: 400px) and (max-width: 1200px) {
.v2-title--4 {
font-size: calc(18.662px + (26.66 - 18.662) * ( (100vw - 400px) / ( 1200 - 400) )); } }
@media (min-width: 1200px) {
.v2-title--4 {
font-size: 26.66px; } }
/*
* Add margins to titles when part of an article/document style page
*/
.v2-article .v2-title--1 {
margin-top: 4rem;
margin-bottom: 1.666rem; }
.v2-article .v2-title--2 {
margin-top: 3.333rem;
margin-bottom: 1.333rem; }
.v2-article .v2-title--3 {
margin-top: 2.666rem;
margin-bottom: 1rem; }
.v2-article .v2-title--4 {
margin-top: 2rem;
margin-bottom: 1rem; }
.v2-link {
color: inherit;
cursor: pointer;
transition: opacity 0.25s;
text-decoration: underline; }
.v2-link:hover {
opacity: 0.7; }
.v2-link:active {
opacity: 1; }
.v2-link--green {
color: #009623; }
.v2-link--grey {
color: #444; }
.v2-link--white {
color: #fff; }
.u-bold {
font-weight: bold; }
.u-italic {
font-style: italic; }
.u-uppercase {
text-transform: uppercase; }
.u-nowrap {
white-space: nowrap; }
.u-ellipsis {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis; }
.v2-list {
margin: 0;
padding: 0; }
.v2-list--copy {
padding-left: 40px;
margin-bottom: 20px; }
.v2-list--copy .v2-list__item {
margin-top: 7px; }
/*
* Base Icon List
*/
.icon-list {
list-style: none;
margin: 0;
padding: 0; }
.v2-article .icon-list {
list-style: none;
padding: 0 0 0 40px;
margin: 0 0 20px; }
.icon-list > .icon-list__item {
margin-bottom: .5em;
position: relative;
padding-left: 1.5em;
line-height: 1.4; }
.icon-list > .icon-list__item:before {
position: relative;
vertical-align: middle;
font-family: 'nibdings';
line-height: 1;
color: currentColor;
margin-right: .5em;
margin-left: -1.5em; }
/*
* Icon Shape Modifiers
*/
.icon-list--tick > .icon-list__item:before {
content: "\E01C";
top: -1px; }
.icon-list--cross > .icon-list__item:before {
content: "\E004";
top: -2px; }
.icon-list--chevron > .icon-list__item:before {
content: "\E022";
top: -2px; }
/*
* Icon Color Modifiers
*/
.icon-list--green > .icon-list__item:before {
color: #009623; }
.icon-list--white > .icon-list__item:before {
color: #fff; }
.icon-list--grey > .icon-list__item:before {
color: #444; }
-78
example/index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Typography</title>
<style>
body {
padding: 1em;
}
</style>
<link href="build.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400=|Roboto:300,400,700" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="mixins-section">
<h1 class="some-other-class">A mixed in heading</h1>
<p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.</p>
<h3 class="subheading">Lorem ipsum</h3>
<p class="custom-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.</p>
<h3 class="subheading">Lorem ipsum</h3>
<p class="custom-small-paragraph">Nunc urna mi, <a href="#" class="custom-link">faucibus sed egestas</a> quis, laoreet sed felis. Sed tincidunt dictum gravida. Nulla consectetur rutrum consequat. Mauris pharetra consectetur risus, sed tristique sem ultrices nec. Maecenas eget justo risus. Curabitur vitae consequat libero, sit amet varius justo. Sed tempor, risus non efficitur iaculis, sem turpis consequat mi, nec interdum orci magna ac risus. Nulla a lorem a erat placerat cursus eget nec odio. Pellentesque sollicitudin velit purus, quis placerat mauris euismod ac. Cras egestas quam nisi, vel semper nulla gravida sed.</p>
</div>
<article class="v2-article v2-copy">
<h1 class="v2-title v2-title--1">Compiled Title 1</h1>
<h2 class="v2-title v2-title--2">Compiled Title 2</h2>
<p class="v2-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus volutpat elit ut porta. Aliquam ullamcorper vestibulum aliquet. Nunc sodales nunc non dui congue lacinia. Integer vitae mi nisi. Donec rhoncus, dolor eget posuere semper, nunc massa dapibus dolor, vulputate laoreet diam ante at arcu. Aenean sed dolor porttitor tellus consequat cursus et et lacus. Praesent vulputate molestie rhoncus. Etiam porta mattis dui, vitae elementum magna scelerisque eget. Phasellus venenatis, nibh et fringilla cursus, nulla libero auctor orci, at bibendum nibh eros et diam. Cras sit amet rutrum velit. Mauris odio nisl, sollicitudin at placerat sed, congue sit amet purus. Vivamus ut consequat ex.</p>
<h3 class="v2-title v2-title--3">Compiled Title 3</h3>
<p class="v2-paragraph">Aliquam est elit, pharetra vitae orci eget, accumsan rutrum massa. Fusce volutpat ornare placerat. Nulla et est fringilla, dignissim nisi commodo, fringilla augue. Ut in massa sodales diam semper rutrum non non turpis. Etiam tempus pretium ultrices. Morbi justo mi, vehicula sit amet justo non, varius malesuada magna. Integer vel tellus quis nisi mattis aliquam sed vel diam. Integer mollis nisi sed fermentum scelerisque. Sed pharetra nunc sed tincidunt finibus. Nam eu sollicitudin nulla. Ut pharetra in metus in varius. Etiam posuere ligula ex, eu rhoncus leo scelerisque ut. Aliquam sollicitudin erat quis elit bibendum maximus. Aliquam a libero quam. Phasellus congue maximus ex in lobortis.</<p>
<h4 class="v2-title v2-title--4">Compiled Title 4</h4>
<p class="v2-paragraph">Vivamus eleifend accumsan elit ac euismod. Nunc varius porttitor mollis. Vivamus sed dui vitae lorem auctor viverra nec vel nisl. Pellentesque vehicula magna quis dapibus sollicitudin. Phasellus dictum id nisi nec dictum. Phasellus eu posuere quam. Vivamus id nunc vel lorem bibendum maximus quis vitae diam. Curabitur ac scelerisque dui. Etiam sit amet consequat ante. Nullam et ullamcorper lacus, quis luctus mauris. Aliquam facilisis dui vitae mi imperdiet auctor. In in enim eros. Aliquam eget turpis sit amet metus aliquet sagittis ac quis mi.</p>
<ul class="v2-list v2-list--copy">
<li class="v2-list__item">libero purus</li>
<li class="v2-list__item">sit amet laoreet nibh</li>
<li class="v2-list__item">commodo vitae</li>
<li class="v2-list__item">ligula iaculis</li>
</ul>
<p class="v2-paragraph">Donec elementum libero purus, sit amet laoreet nibh commodo vitae. Maecenas in ligula iaculis, interdum lectus id, lobortis arcu. Proin nisl purus, mattis at suscipit eu, ultrices ac elit. Nam lectus turpis, hendrerit ut interdum pretium, placerat id neque. Phasellus consequat eget quam quis ultrices. Nulla condimentum imperdiet vehicula. Curabitur dignissim urna nunc. Fusce sodales tellus nec diam aliquet ultricies. Sed et dui vel massa dapibus aliquet. Proin elementum ultricies neque sit amet vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum vel lacus in pharetra. Donec tristique arcu ac volutpat vestibulum. Sed consequat orci vel lectus scelerisque, sed eleifend quam aliquet. Curabitur sollicitudin eget leo ac porta. Fusce congue augue non metus posuere, eget maximus augue mollis.</p>
<ul class="icon-list icon-list--tick icon-list--green">
<li class="icon-list__item">Libero purus</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Commodo vitae</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--cross">
<li class="icon-list__item">Libero purus</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Commodo vitae</li>
</ul>
<p class="v2-paragraph">Uses relative padding/margins to ensure it works at all font sizes. If text breaks down to a second line it will align with the first, not fall beneath the icon.</p>
<ul class="icon-list icon-list--chevron icon-list--green">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--cross">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
<ul class="icon-list icon-list--tick icon-list--white v2-copy--white" style="font-size:21px;background: #444; padding: 40px;">
<li class="icon-list__item">Fusce sodales tellus nec diam aliquet ultricies</li>
<li class="icon-list__item">Sit amet laoreet nibh</li>
<li class="icon-list__item">Fusce congue augue non metus posuere, eget maximus augue mollis</li>
<li class="icon-list__item">Wigula iaculis</li>
</ul>
</article>
</div>
</body> 
-43
example/index.scss
@import "../index"; // Include mixins
@import "../dist/compiled.css"; // Included compiled
@import "@nib-styles/v2-icons";
.wrapper {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
}
.mixins-section {
@include copy;
}
.some-other-class {
@include title($size: 1);
text-align: center;
text-decoration: underline;
transform: rotate(357deg);
margin-bottom: 2rem;
}
.subheading {
@include title(3, white, true);
background: $color-queen-elizabeth;
padding: .25rem;
margin-bottom: 1rem;
}
.custom-paragraph {
@include paragraph;
text-align: center;
margin-bottom: 2rem;
}
.custom-small-paragraph {
@include copy($size: small);
@include paragraph;
}
.custom-link {
@include link(green);
}
-22
mixins/_copy.scss
@mixin copy($color: grey, $size: normal) {
@if $color == grey {
color: $color-doc;
} @else if $color == white {
color: $color-white;
}
font-family: 'Open Sans', sans-serif;
@if $size == large {
@include fluidType(1.25);
} @else if $size == small {
@include fluidType(.75);
}@else if $size == normal {
@include fluidType(1);
}
font-weight: 400;
line-height: 1.5;
}
@mixin paragraph() {
margin-top: 10px;
margin-bottom: 10px;
} 
-23
mixins/_links.scss
@mixin link($color: inherit) {
@if $color == inherit {
color: inherit;
} @else if $color == green {
color: $color-queen-elizabeth;
} @else if $color == grey {
color: $color-doc;
} @else if $color == white {
color: $color-white;
}
cursor: pointer;
transition: opacity 0.25s;
text-decoration: underline;
&:hover {
opacity: 0.7;
}
&:active{
opacity: 1;
}
}
-91
mixins/_titles.scss
@mixin title-common() {
font-family: 'Roboto', sans-serif;
margin: 0;
}
@mixin title-size($size) {
// Perfect Fourth Scale
@if $size == 1 {
//font-size: 3.157rem;
@include fluidType(3.157);
font-weight: 300;
letter-spacing: -2px;
line-height: 1.1;
} @else if $size == 2 {
//font-size: 2.369rem;
@include fluidType(2.369);
font-weight: 300;
letter-spacing: -1px;
line-height: 1.5;
} @else if $size == 3 {
//font-size: 1.777rem;
@include fluidType(1.777);
font-weight: 300;
letter-spacing: -1px;
line-height: 1.5;
} @else if $size == 4 {
//font-size: 1.333rem;
@include fluidType(1.333);
font-weight: 400;
line-height: 1.33;
}
//@media (min-width: 600px) {
// // Perfect Fifth Scale
// @if $size == 1 {
// font-size: 5.063rem;
// font-weight: 300;
// letter-spacing: -2px;
// line-height: 1.1;
// } @else if $size == 2 {
// font-size: 3.375rem;
// font-weight: 300;
// letter-spacing: -1px;
// line-height: 1.5;
// } @else if $size == 3 {
// font-size: 2.25rem;
// font-weight: 300;
// letter-spacing: -1px;
// line-height: 1.5;
// } @else if $size == 4 {
// font-size: 1.5rem;
// font-weight: 400;
// line-height: 1.33;
// }
//}
}
@mixin title-color($color) {
@if $color == grey {
color: $color-doc;
} @else if $color == green {
color: $color-prince-charles;
} @else if $color == white {
color: $color-white;
} @else if $color == inherit {
color: inherit;
}
}
@mixin title-padding($padding) {
@if $padding == 1 {
margin-top: 4rem;
margin-bottom: 1.666rem;
} @else if $padding == 2 {
margin-top: 3.333rem;
margin-bottom: 1.333rem;
} @else if $padding == 3 {
margin-top: 2.666rem;
margin-bottom: 1rem;
} @else if $padding == 4 {
margin-top: 2rem;
margin-bottom: 1rem;
}
}
@mixin title($size, $color: inherit, $padding: false) {
@include title-common();
@include title-size($size);
@include title-color($color);
@include title-padding($padding);
}
-33
partials/_fluid.scss
// These values are the minimum and maximum viewport sizes to apply the font scaling
$min-width: 400;
$max-width: 1200;
// These values represent the range of font-size to apply
// These values effect the base font-size, headings and other elements will scale proportionally
$min-font: 14;
$max-font: 20;
@function font-size($scale) {
$min-font: 14 * $scale;
$max-font: 20 * $scale;
@return (
calc(#{$min-font}px + (#{$max-font} - #{$min-font}) * ( (100vw - #{$min-width}px) / ( #{$max-width} - #{$min-width}) ))
);
}
@mixin fluidType($scale) {
font-size: #{$min-font * $scale}px;
@media (min-width: #{$min-width}px) and (max-width: #{$max-width}px) {
& {
font-size: font-size($scale);
}
}
@media (min-width: #{$max-width}px) {
& {
font-size: #{$max-font * $scale}px;
}
}
}
-85
partials/_lists.scss
.v2-list {
margin: 0;
padding: 0;
//tried using "list-style-position: inside;" - it works great for the case of lists with items that only contain single lines of text but doesn't display
//correctly for items with multiple lines of text, or for items containing block elements e.g. <li><ul>...</ul><li> or <li><h4>...</h4></li>
//list-style-position: inside;
}
.v2-list--copy {
padding-left: 40px;
margin-bottom: 20px;
}
.v2-list--copy .v2-list__item {
margin-top: 7px;
}
/*
* Base Icon List
*/
.icon-list {
list-style: none;
margin: 0;
padding: 0;
}
.v2-article .icon-list {
list-style: none;
padding: 0 0 0 40px;
margin: 0 0 20px;
}
.icon-list > .icon-list__item {
margin-bottom: .5em;
position: relative;
padding-left: 1.5em;
line-height: 1.4;
}
.icon-list > .icon-list__item:before {
position: relative;
vertical-align: middle;
font-family: 'nibdings';
line-height: 1;
color: currentColor;
margin-right: .5em;
margin-left: -1.5em;
}
/*
* Icon Shape Modifiers
*/
.icon-list--tick > .icon-list__item:before {
content: "\E01C";
top:-1px;
}
.icon-list--cross > .icon-list__item:before {
content: "\E004";
top:-2px;
}
.icon-list--chevron > .icon-list__item:before {
content: "\E022";
top:-2px;
}
/*
* Icon Color Modifiers
*/
.icon-list--green > .icon-list__item:before {
color: $color-queen-elizabeth;
}
.icon-list--white > .icon-list__item:before {
color: $color-white;
}
.icon-list--grey > .icon-list__item:before {
color: $color-doc;
}
-24
partials/_utils.scss
// No mixins required for single properties, easier to remember the actual css
.u-bold {
font-weight: bold;
}
.u-italic {
font-style: italic;
}
.u-uppercase {
text-transform: uppercase;
}
.u-nowrap {
white-space: nowrap;
}
.u-ellipsis {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
} 
.npmignore

Sorry, the diff of this file is not supported yet