Skip to content

Latest commit

 

History

History
106 lines (80 loc) · 2.38 KB

README.md

File metadata and controls

106 lines (80 loc) · 2.38 KB
Raw

sircus-tools-background

npm version

Installation

npm:

$ npm install sircus-tools-background sircus-variables

Usage

CSS:

@import "sircus-tools-background";
@import "sircus-variables";

html

/* background-color */
<div class="t-bgWhite">...</div>
<div class="t-bgBlack">...</div>

<div class="t-bgGray90">...</div>
<div class="t-bgGray80">...</div>
<div class="t-bgGray70">...</div>
<div class="t-bgGray60">...</div>
<div class="t-bgGray50">...</div>
<div class="t-bgGray40">...</div>
<div class="t-bgGray30">...</div>
<div class="t-bgGray20">...</div>
<div class="t-bgGray10">...</div>
<div class="t-bgGray5">...</div>

<div class="t-bgPrimary">...</div>
<div class="t-bgPrimaryDark">...</div>
<div class="t-bgPrimaryLight">...</div>

<div class="t-bgSecondary">...</div>
<div class="t-bgSecondaryDark">...</div>
<div class="t-bgSecondaryLight">...</div>

<div class="t-bgSuccess">...</div>
<div class="t-bgSuccessDark">...</div>
<div class="t-bgSuccessLight">...</div>

<div class="t-bgNotice">...</div>
<div class="t-bgNoticeDark">...</div>
<div class="t-bgNoticeLight">...</div>

<div class="t-bgWarning">...</div>
<div class="t-bgWarningDark">...</div>
<div class="t-bgWarningLight">...</div>

<div class="t-bgError">...</div>
<div class="t-bgErrorDark">...</div>
<div class="t-bgErrorLight">...</div>

/* background-size */
<div class="t-bgCover">...</div>
<div class="t-bgContain">...</div>

/* background-position */
<div class="t-bgCenter">...</div>
<div class="t-bgCenterTop">...</div>
<div class="t-bgCenterBottom">...</div>

<div class="t-bgLeft">...</div>
<div class="t-bgLeftTop">...</div>
<div class="t-bgLeftBottom">...</div>

<div class="t-bgRight">...</div>
<div class="t-bgRightTop">...</div>
<div class="t-bgRightBottom">...</div>

/* background-attachment */
<div class="t-bgFixed">...</div>

/* background-repeat */
<div class="t-bgNoRepeat">...</div>

Responsive classes

@import "sircus-tools-background/responsive";
/*  OR  */
@import "sircus-tools-background/sm";
@import "sircus-tools-background/md";
@import "sircus-tools-background/lg";

e.g:

<div class="t-sm-bgCover">...</div>
<div class="t-md-bgContain">...</div>
<div class="t-lg-bgPrimary">...</div>

License

Released under the MIT license.