@nib-styles/v2-typography
v5.0.0
Published
nib styled typography
Downloads
6
Keywords
Readme
@nib-styles/v2-typography
nib styled typography
Installation
npm install --save @nib-styles/v2-typography
Note: Requires Opens Sans
and Roboto
fonts from Google Fonts:
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300,700' />
Usage
Using mixins
@import "@nib-styles/v2-typography";
.product {
&__title {
@include title(2, $color: 'grey', $pad: true)
}
&__description {
@include copy($color: 'grey', $pad: true)
}
&__link {
@include link($color: 'green')
}
}
<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>
Using compiled classes
@import "@nib-styles/v2-typography/compiled";
<div class="v2-article">
<h2 class="v2-title v2-title--2 v2-title--color-doc">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>
Mixins
@include title($size, $color : null, $padding : false)
$size
Required. An integer from1-4
.$color
Optional. May begrey
,green
orwhite
. If no color is provided the title will inherit the color from its parent element.$padding
Optional. Iftrue
an amount of top and bottom margin is applied.
@include copy($size : null, $color : null, $padding : false)
$size
Optional. May besmall
orlarge
.$color
Optional. May begrey
,green
orwhite
. If no color is provided the title will inherit the color from its parent element.
$padding
Optional. If true
an amount of top and bottom margin is applied.
@include link($color : null)
$color
Optional. May begreen
,grey
orwhite
. If no color is provided the title will inherit the color from its parent element.
Functions
text-color-disabled($color)
$color
Required. The normal text color.
Changelog
5.0.0
- break: bump version of
v2-icons
v4.3.0
- fix: colour should default to
currentColour
when no color is specified
v4.2.0
- add: a reusable function for generating the disabled text color
v4.0.2
- fix: both color names and color name strings work for
title()
,copy()
andlink()
mixins e.g.copy($color: green)
,copy($color: 'green')
v4.0.1
- fix: bumped the package version to display the latest readme on npmjs.com
v4.0.0
- break:
copy()
color defaults to inherit - break:
title()
,copy()
andlink()
mixins error if they receive an invalid param - add:
copy()
size configurable via mixin - add:
$font-copy
and$font-title
variables - fix/break:
link()
/.v2-link
now has font specified so it doesn't have to be inside av2-copy
block - fix:
title()
padding should be dependent on the title size - fix: issues with mixins comparing strings and color names
- fix: documentation
v2.3.0
- Mixins!!
v2.2.0
- Setting
color: inherit
on.v2-link
by default