Skip to main content
Skip to main content

Web Style Guidelines
and Resources

Strata - Version Three

Code Library: Backgrounds

Rattlesnake Pattern

/* Head */
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-backgrounds-rs.min.css">

This is a white div using s3-bi-rs-l-lg-gd.
Padding is controled by s3-bi-rs-l-lg.

This is a white div using s3-bi-rs-r-md-gt.
Padding is controled by s3-bi-rs-r-lg.

Left-Aligned

Background Large Medium Small X-Small
s3-bi-rs-l-lg-gt s3-bi-rs-l-md-gt s3-bi-rs-l-sm-gt s3-bi-rs-l-xs-gt
s3-bi-rs-l-lg-gd s3-bi-rs-l-md-gd s3-bi-rs-l-sm-gd s3-bi-rs-l-xs-gd
s3-bi-rs-l-lg-s s3-bi-rs-l-md-s s3-bi-rs-l-sm-s s3-bi-rs-l-xs-s
s3-bi-rs-l-lg-s50 s3-bi-rs-l-md-s50 s3-bi-rs-l-sm-s50 s3-bi-rs-l-xs-s50
s3-bi-rs-l-lg-s25 s3-bi-rs-l-md-s25 s3-bi-rs-l-sm-s25 s3-bi-rs-l-xs-s25
s3-bi-rs-l-lg-k s3-bi-rs-l-md-k s3-bi-rs-l-sm-k s3-bi-rs-l-xs-k
s3-bi-rs-l-lg-c s3-bi-rs-l-md-c s3-bi-rs-l-sm-c s3-bi-rs-l-xs-c
s3-bi-rs-l-lg-c50 s3-bi-rs-l-md-c50 s3-bi-rs-l-sm-c50 s3-bi-rs-l-xs-c50
s3-bi-rs-l-lg-c25 s3-bi-rs-l-md-c25 s3-bi-rs-l-sm-c25 s3-bi-rs-l-xs-c25

Left-Aligned Padding

Large Medium Small X-Small
s3-bi-rs-l-lg s3-bi-rs-l-md s3-bi-rs-l-sm s3-bi-rs-l-xs

Right-Aligned

Background Large Medium Small X-Small
s3-bi-rs-r-lg-gt s3-bi-rs-r-md-gt s3-bi-rs-r-sm-gt s3-bi-rs-r-xs-gt
s3-bi-rs-r-lg-gd s3-bi-rs-r-md-gd s3-bi-rs-r-sm-gd s3-bi-rs-r-xs-gd
s3-bi-rs-r-lg-s s3-bi-rs-r-md-s s3-bi-rs-r-sm-s s3-bi-rs-r-xs-s
s3-bi-rs-r-lg-s50 s3-bi-rs-r-md-s50 s3-bi-rs-r-sm-s50 s3-bi-rs-r-xs-s50
s3-bi-rs-r-lg-s25 s3-bi-rs-r-md-s25 s3-bi-rs-r-sm-s25 s3-bi-rs-r-xs-s25
s3-bi-rs-r-lg-k s3-bi-rs-r-md-k s3-bi-rs-r-sm-k s3-bi-rs-r-xs-k
s3-bi-rs-r-lg-c s3-bi-rs-r-md-c s3-bi-rs-r-sm-c s3-bi-rs-r-xs-c
s3-bi-rs-r-lg-c50 s3-bi-rs-r-md-c50 s3-bi-rs-r-sm-c50 s3-bi-rs-r-xs-c50
s3-bi-rs-r-lg-c25 s3-bi-rs-r-md-c25 s3-bi-rs-r-sm-c25 s3-bi-rs-r-xs-c25

Right-Aligned Padding

Large Medium Small X-Small
s3-bi-rs-r-lg s3-bi-rs-r-md s3-bi-rs-r-sm s3-bi-rs-r-xs

Saw Pattern

/* Head */
<link rel="stylesheet" type="text/css" href="/_/s3/css/extend/strata-backgrounds-saw.min.css">
/* Body */
<div class="s3-gd s3-bi-saw-md-gt"></div>
Example garnet division with a class of row.
Example gold division with a class of row.

The saw pattern image is applied to an empty division matching that of the previous division. The background color of this empty division should match the follwing division.
Simple Example:

/* Body */
<div class="row s3-gt">
	First Non-Empty Division.
</div>
<div class="s3-gd s3-bi-saw-md-gt"></div>
<div class="s3-gd">
	Second Non-Empty Division.
</div>

Background Large Medium Small X-Small
s3-bi-saw-lg-gt s3-bi-saw-md-gt s3-bi-saw-sm-gt s3-bi-saw-xs-gt
s3-bi-saw-lg-gt1k s3-bi-saw-md-gt1k s3-bi-saw-sm-gt1k s3-bi-saw-xs-gt1k
s3-bi-saw-lg-gt2k s3-bi-saw-md-gt2k s3-bi-saw-sm-gt2k s3-bi-saw-xs-gt2k
s3-bi-saw-lg-gt3k s3-bi-saw-md-gt3k s3-bi-saw-sm-gt3k s3-bi-saw-xs-gt3k
s3-bi-saw-lg-gd s3-bi-saw-md-gd s3-bi-saw-sm-gd s3-bi-saw-xs-gd
s3-bi-saw-lg-gd1c s3-bi-saw-md-gd1c s3-bi-saw-sm-gd1c s3-bi-saw-xs-gd1c
s3-bi-saw-lg-gd2c s3-bi-saw-md-gd2c s3-bi-saw-sm-gd2c s3-bi-saw-xs-gd2c
s3-bi-saw-lg-gd3c s3-bi-saw-md-gd3c s3-bi-saw-sm-gd3c s3-bi-saw-xs-gd3c
s3-bi-saw-lg-c s3-bi-saw-md-c s3-bi-saw-sm-c s3-bi-saw-xs-c
s3-bi-saw-lg-w s3-bi-saw-md-w s3-bi-saw-sm-w s3-bi-saw-xs-w
s3-bi-saw-lg-n2w s3-bi-saw-md-n2w s3-bi-saw-sm-n2w s3-bi-saw-xs-n2w
s3-bi-saw-lg-n1w s3-bi-saw-md-n1w s3-bi-saw-sm-n1w s3-bi-saw-xs-n1w
s3-bi-saw-lg-n s3-bi-saw-md-n s3-bi-saw-sm-n s3-bi-saw-xs-n
s3-bi-saw-lg-n1s s3-bi-saw-md-n1s s3-bi-saw-sm-n1s s3-bi-saw-xs-n1s
s3-bi-saw-lg-n2s s3-bi-saw-md-n2s s3-bi-saw-sm-n2s s3-bi-saw-xs-n2s
s3-bi-saw-lg-s s3-bi-saw-md-s s3-bi-saw-sm-s s3-bi-saw-xs-s
s3-bi-saw-lg-k s3-bi-saw-md-k s3-bi-saw-sm-k s3-bi-saw-xs-k