Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
lib
README.md
index.css
lg.css
md.css
package.json
responsive.css
sm.css

README.md

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.

You can’t perform that action at this time.