README
sircus-tools-typography
Installation
npm:
$ npm install sircus-tools-typography sircus-variables
Usage
CSS:
@import "sircus-tools-typography";
@import "sircus-variables";
html:
/* color */
<p class="t-colorWhite"></p>
<p class="t-colorBlack"></p>
<p class="t-colorGray90"></p>
<p class="t-colorGray80"></p>
<p class="t-colorGray70"></p>
<p class="t-colorGray60"></p>
<p class="t-colorGray50"></p>
<p class="t-colorGray40"></p>
<p class="t-colorGray30"></p>
<p class="t-colorGray20"></p>
<p class="t-colorGray10"></p>
<p class="t-colorGray5"></p>
<p class="t-colorPrimary"></p>
<p class="t-colorPrimaryDark"></p>
<p class="t-colorPrimaryLight"></p>
<p class="t-colorSecondary"></p>
<p class="t-colorSecondaryDark"></p>
<p class="t-colorSecondaryLight"></p>
<p class="t-colorSuccess"></p>
<p class="t-colorSuccessDark"></p>
<p class="t-colorSuccessLight"></p>
<p class="t-colorNotice"></p>
<p class="t-colorNoticeDark"></p>
<p class="t-colorNoticeLight"></p>
<p class="t-colorWarning"></p>
<p class="t-colorWarningDark"></p>
<p class="t-colorWarningLight"></p>
<p class="t-colorError"></p>
<p class="t-colorErrorDark"></p>
<p class="t-colorErrorLight"></p>
/* font-weight */
<p class="t-normal"></p>
<p class="t-bold"></p>
<p class="t-bolder"></p>
<p class="t-lighter"></p>
/* font-style */
<p class="t-italic"></p>
/* text-decoration */
<p class="t-decoNone"></p>
<p class="t-underline"></p>
<p class="t-overline"></p>
<p class="t-through"></p>
/* text-transform */
<p class="t-lowercase"></p>
<p class="t-uppercase"></p>
<p class="t-capitalize"></p>
/* white-space */
<p class="t-nowrap"></p>
<p class="t-pre"></p>
/* font-family */
<p class="t-enSans"></p>
<p class="t-enSerif"></p>
<p class="t-enMonospace"></p>
<p class="t-jaSans"></p>
<p class="t-jaSerif"></p>
<p class="t-jaMonospace"></p>
/* font-size */
<p class="t-fontGt"></p>
<p class="t-fontHg"></p>
<p class="t-fontXl"></p>
<p class="t-fontLg"></p>
<p class="t-fontMd"></p>
<p class="t-fontSm"></p>
<p class="t-fontXs"></p>
/* line-height */
<p class="t-lineHeightXs"></p>
<p class="t-lineHeightSm"></p>
<p class="t-lineHeightMd"></p>
<p class="t-lineHeightLg"></p>
<p class="t-lineHeightXl"></p>
/* line-height */
<p class="t-lineHeightXs"></p>
<p class="t-lineHeightSm"></p>
<p class="t-lineHeightMd"></p>
<p class="t-lineHeightLg"></p>
<p class="t-lineHeightXl"></p>
/* letter-spacing */
<p class="t-letterSpacingXs"></p>
<p class="t-letterSpacingSm"></p>
<p class="t-letterSpacingMd"></p>
<p class="t-letterSpacingLg"></p>
<p class="t-letterSpacingXl"></p>
Responsive classes
@import "sircus-tools-typography/responsive";
/* OR */
@import "sircus-tools-typography/sm";
@import "sircus-tools-typography/md";
@import "sircus-tools-typography/lg";
e.g:
<div class="t-sm-lineHeightXs">...</div>
<div class="t-md-lowercase">...</div>
<div class="t-lg-letterSpacingXl">...</div>
License
Released under the MIT license.