Classes CSS

Classes CSS

Source: classes.scss, line 192

1.1.1 Text Size

[ .minion | .text-minion | .min | .text-min ] -> 60%
[ .half | .text-half ] -> 75%
[ .small | .text-small ] -> 85%
[ .normal | .text-normal ] -> 100%
[ .medium | .text-medium ] -> 125%
[ .big | .text-big ] -> 150%
[ .huge | .text-huge ] -> 180%
[ .double | .text-double | .max | .text-max ] -> 200%
[ .triple | .text-triple ] -> 300%
[ .quadruple | .text-quadruple ] -> 400%

Example

Minion
Half
Small
Normal
Medium
Big
Huge
Double
Triple
Quadruple
<div class="sg sg-size">
	<span class="minion">Minion</span>
</div>
<div class="sg sg-size">
	<span class="half">Half</span>
</div>
<div class="sg sg-size">
	<span class="half">Small</span>
</div>
<div class="sg sg-size">
	<span class="normal">Normal</span>
</div>
<div class="sg sg-size">
	<span class="medium">Medium</span>
</div>
<div class="sg sg-size">
	<span class="big">Big</span>
</div>
<div class="sg sg-size">
	<span class="huge">Huge</span>
</div>
<div class="sg sg-size">
	<span class="double">Double</span>
</div>
<div class="sg sg-size">
	<span class="triple">Triple</span>
</div>
<div class="sg sg-size">
	<span class="quadruple">Quadruple</span>
</div>

Source: classes.scss, line 287

1.1.2 Alignment

[ .left | .textleft | .text-left | .content-left > * | .all-left * ]
[ .right | .textright | .text-right | .content-right > * | .all-right * ]
[ .center | .textcenter | .text-center | .content-center > * | .all-center * ]
[ .justify | .textjustify | .text-justify | .content-justify > * | .all-justify * ]

Example

Align Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Align Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Align Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Align Justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="sg sg-alignment">
	<h6>Align Left</h6>
	<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="sg sg-alignment">
	<h6>Align Right</h6>
	<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="sg sg-alignment">
	<h6>Align Center</h6>
	<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="sg sg-alignment">
	<h6>Align Justify</h6>
	<div class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

Source: classes.scss, line 405

1.3.1 Mask

[ .mask | .image-banner ]
[ .mask.-middle | .image-banner.-middle ]
[ .mask.-bottom | .image-banner.-bottom ]
[ .mask span | .image-banner span ]

Example

Mask Top
Mask Middle
Mask Bottom
Mask Span
Text Over Masked Image
<div class="sg sg-mask">
	<h6>Mask Top</h6>
	<div class="mask"><img src="../../img/example.jpg"></div>
</div>
<div class="sg sg-mask">
	<h6>Mask Middle</h6>
	<div class="mask -middle"><img src="../../img/example.jpg"></div>
</div>
<div class="sg sg-mask">
	<h6>Mask Bottom</h6>
	<div class="mask -bottom"><img src="../../img/example.jpg"></div>
</div>
<div class="sg sg-mask">
	<h6>Mask Span</h6>
	<div class="mask"><img src="../../img/example.jpg"><span>Text Over Masked Image</span></div>
</div>

Example

Not Pixelated
Pixelated
<div class="sg sg-pixelated">
	<h6>Not Pixelated</h6>
	<img src="../../img/example.jpg">
</div>
<div class="sg sg-pixelated">
	<h6>Pixelated</h6>
	<img class="pixelated" src="../../img/example.jpg">
</div>

Source: classes.scss, line 529

1.4.1 Hidden

Hidden element.
[ .hidden | .invisible | .none | .displaynone | .display-none ]

Example

<div class="sg sg-display">
	<div class="hidden">Display Hidden</div>
</div>

Source: classes.scss, line 545

1.4.2 Block

Block element.
[ .block | .displayblock | .display-block ]

Example

Display Block
Display Block
<div class="sg sg-display">
	<div class="block">Display Block</div>
	<div class="block">Display Block</div>
</div>

Source: classes.scss, line 562

1.4.3 Inline Block

Inline Block element.
[ .inlineblock | .displayinlineblock | .display-inline-block | [data-switch] ]

Example

Display Inline Block
Display Inline Block
<div class="sg sg-display">
	<div class="inlineblock">Display Inline Block</div>
	<div class="inlineblock">Display Inline Block</div>
</div>

Source: classes.scss, line 579

1.4.4 Inline

Inline element.
[ .inline | .displayinline | .display-inline ]

Example

Display Inline
Display Inline
<div class="sg sg-display">
	<div class="inline">Display Inline</div>
	<div class="inline">Display Inline</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-column">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-wrap">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-nowrap">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-column -astart">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-column -aend">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-column -acenter">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-column -astretch">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row -jstart">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row -jend">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row -jcenter">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row -jstretch">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row -jaround">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row -jbetween">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row">
		<div class="-grow"></div>
		<div class="-grow"></div>
		<div class="-grow"></div>
	</div>
</div>

Example

<div class="sg sg-flex">
	<div class="-row">
		<div class="-nogrow"></div>
		<div class="-nogrow"></div>
		<div class="-nogrow"></div>
	</div>
</div>

Source: classes.scss, line 972

1.5.1 Fixed

[ .affix | .fixed | .positionfixed | .position-fixed ]

Source: classes.scss, line 982

1.5.2 Absolute

[ .absolute | .positionabsolute | .position-absolute ]

Source: classes.scss, line 992

1.5.3 Relative

[ .relative | .positionrelative | .position-relative ]

Source: classes.scss, line 1002

1.5.4 Bottom

[ .affix-bottom | .fixed-bottom | .positionfixed-bottom | .position-fixed-bottom | .absolute-bottom | .positionabsolute-bottom | .position-absolute-bottom | .relative-bottom | .positionrelative-bottom | .position-relative-bottom ]

Source: classes.scss, line 1016

1.5.5 Top

[ .affix-top | .fixed-top | .positionfixed-top | .position-fixed-top | .absolute-top | .positionabsolute-top | .position-absolute-top | .relative-top | .positionrelative-top | .position-relative-top ]

Source: classes.scss, line 1030

1.5.6 Left

[ .affix-left | .fixed-left | .positionfixed-left | .position-fixed-left | .absolute-left | .positionabsolute-left | .position-absolute-left | .relative-left | .positionrelative-left | .position-relative-left ]

Source: classes.scss, line 1044

1.5.7 Right

[ .affix-right | .fixed-right | .positionfixed-right | .position-fixed-right | .absolute-right | .positionabsolute-right | .position-absolute-right | .relative-right | .positionrelative-right | .position-relative-right ]

Source: classes.scss, line 1058

1.5.8 Middle

[ .fixed.middle | .absolute.middle ]

Example

Overlay
<div class="sg sg-lay">
	<div class="sg"></div>
	<div class="overlay">Overlay</div>
</div>

Example

Underlay
<div class="sg sg-lay">
	<div class="sg"></div>
	<div class="underlay">Underlay</div>
</div>

Source: classes.scss, line 1128

1.6.1 Float None

[ .align-none | .alignnone | .float-none | .floatnone | .content-float-none > * | .all-float-none * ]

Example

<div class="sg sg-float">
	<div class="align-none"></div>
	<div class="align-none"></div>
</div>

Source: classes.scss, line 1149

1.6.2 Float Left

[ .align-left | .alignleft | .float-left | .floatleft | .content-float-left > * | .all-float-left * ]

Example

<div class="sg sg-float">
	<div class="align-left"></div>
	<div class="align-left"></div>
</div>

Source: classes.scss, line 1169

1.6.3 Float Right

[ .align-right | .alignright | .float-right | .floatright | .content-float-right > * | .all-float-right * ]

Example

<div class="sg sg-float">
	<div class="align-right"></div>
	<div class="align-right"></div>
</div>

Source: classes.scss, line 1189

1.6.4 Float Center

[ .align-center | .aligncenter | .float-center | .floatcenter | .content-float-center > * | .all-float-center * ]

Example

<div class="sg sg-float">
	<div class="align-center"></div>
	<div class="align-center"></div>
</div>

Example

	<div class="sg sg-float">
	<div class="align-left"></div>
	<div class="align-left"></div>
	<div class="align-left clear-none"></div>
	<div class="align-left"></div>
</div>

Source: classes.scss, line 1230

1.6.6 Clear

[ .clearfix | .clear:before | .clear:after ]

Example

	<div class="sg sg-float">
	<div class="align-left"></div>
	<div class="align-left"></div>
	<div class="align-left clearfix"></div>
	<div class="align-left"></div>
</div>

Example

1
Prepended Element
<div class="sg sg-pend">
	<div class="prepend">1</div>Prepended Element
</div>

Source: classes.scss, line 1285

1.7.2 Append

Append.
[ .append | blockquote .append ]

Example

Appended Element
1
<div class="sg sg-pend">
	Appended Element<div class="append">1</div>
</div>

Source: classes.scss, line 1306

1.7.3 No Scroll

No Scroll.
[ .scroll ]
[ .no-scroll ]

Example

Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula, purus eu semper varius, ligula elit tincidunt tortor, eu porttitor elit mi at justo. Nulla luctus ex et nisi cursus malesuada. Nullam dui diam, cursus quis elit et, varius pharetra nunc. Quisque sollicitudin purus vitae consequat tristique.
No Scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula, purus eu semper varius, ligula elit tincidunt tortor, eu porttitor elit mi at justo. Nulla luctus ex et nisi cursus malesuada. Nullam dui diam, cursus quis elit et, varius pharetra nunc. Quisque sollicitudin purus vitae consequat tristique.
<div class="sg sg-scroll">
	<h6>Scroll</h6>
	<div class="scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula, purus eu semper varius, ligula elit tincidunt tortor, eu porttitor elit mi at justo. Nulla luctus ex et nisi cursus malesuada. Nullam dui diam, cursus quis elit et, varius pharetra nunc. Quisque sollicitudin purus vitae consequat tristique.</div>
</div>
<div class="sg sg-scroll">
	<h6>No Scroll</h6>
	<div class="no-scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula, purus eu semper varius, ligula elit tincidunt tortor, eu porttitor elit mi at justo. Nulla luctus ex et nisi cursus malesuada. Nullam dui diam, cursus quis elit et, varius pharetra nunc. Quisque sollicitudin purus vitae consequat tristique.</div>
</div>

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula, purus eu semper varius, ligula elit tincidunt tortor, eu porttitor elit mi at justo. Nulla luctus ex et nisi cursus malesuada. Nullam dui diam, cursus quis elit et, varius pharetra nunc. Quisque sollicitudin purus vitae consequat tristique.
<div class="sg sg-no-pad">
	<div class="no-pad">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula, purus eu semper varius, ligula elit tincidunt tortor, eu porttitor elit mi at justo. Nulla luctus ex et nisi cursus malesuada. Nullam dui diam, cursus quis elit et, varius pharetra nunc. Quisque sollicitudin purus vitae consequat tristique.</div>
</div>

Source: classes.scss, line 1352

1.7.5 Box

[ .box | .layer ]

Example

Box or Layer
<div class="sg sg-box">
	<div class="box">Box or Layer</div>
</div>

Source: classes.scss, line 1382

1.7.6 Full

[ .fullheight | .full-height ]
[ .fullwidth | .full-width | .full | .content-full > * | .all-full * ]

Example

Full Height
Full Width
<div class="sg sg-full">
	<div class="fullheight">Full Height</div>
</div>
<div class="sg sg-full">
	<div class="fullwidth">Full Width</div>
</div>

Source: classes.scss, line 1410

1.7.7 Column

[ data-column ] -> [ solo | first | last | auto ] [ data-column-width ] -> [ 11 | 12 | 13 | 23 | 14 | 34 | 15 | 25 | 35 | 45 | 16 | 56 | 17 | 18 | 19 ]

Example

1/1 Solo
1/2 First
1/2 Last
2/3 First
1/3 Last
3/4 First
1/4 Last
1/5 First
4/5 Last
2/5 First
3/5 Last
1/6 First
5/6 Last
1/7 First
1/7
1/7
1/7
1/7
1/7
1/7 Last
1/8 First
3/4
1/8 Last
1/9 First
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9 Last
Auto
<div class="sg sg-columns">
	<div data-column="solo" data-column-width="11">1/1 Solo</div>
	<div data-column="first" data-column-width="12">1/2 First</div>
	<div data-column="last" data-column-width="12">1/2 Last</div>
	<div data-column="first" data-column-width="23">2/3 First</div>
	<div data-column="last" data-column-width="13">1/3 Last</div>
	<div data-column="first" data-column-width="34">3/4 First</div>
	<div data-column="last" data-column-width="14">1/4 Last</div>
	<div data-column="first" data-column-width="15">1/5 First</div>
	<div data-column="last" data-column-width="45">4/5 Last</div>
	<div data-column="first" data-column-width="25">2/5 First</div>
	<div data-column="last" data-column-width="35">3/5 Last</div>
	<div data-column="first" data-column-width="16">1/6 First</div>
	<div data-column="last" data-column-width="56">5/6 Last</div>
	<div data-column="first" data-column-width="17">1/7 First</div>
	<div data-column data-column-width="17">1/7</div>
	<div data-column data-column-width="17">1/7</div>
	<div data-column data-column-width="17">1/7</div>
	<div data-column data-column-width="17">1/7</div>
	<div data-column data-column-width="17">1/7</div>
	<div data-column="last" data-column-width="17">1/7 Last</div>
	<div data-column="first" data-column-width="18">1/8 First</div>
	<div data-column data-column-width="34">3/4</div>
	<div data-column="last" data-column-width="18">1/8 Last</div>
	<div data-column="first" data-column-width="19">1/9 First</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column data-column-width="19">1/9</div>
	<div data-column="last" data-column-width="19">1/9 Last</div>
	<div data-column="auto">Auto</div>
</div>

Source: classes.scss, line 1522

1.8 Shapes

Square.
[ .square ]
[ .rounded | .rounded-min | .rounded-small | .rounded-medium | .rounded-big | .rounded-max ]
[ .rounded .round-top | .rounded .round-bottom | .rounded .round-left | .rounded .round-right ]
[ .rounded .round-head-left | .rounded .round-head-right ]
[ .rounded .round-foot-left | .rounded .round-foot-right ]
[ .rounded .round-leaf-left | .rounded .round-leaf-right ]
[ .rounded .round-petal-left | .rounded .round-petal-right ]
[ .rounded .round-drop-left | .rounded .round-drop-right ]
[ .circle | .circle-min | .circle-small ]

Example

Square
Rounded
Rounded Min
Rounded Small
Rounded Medium
Rounded Big
Rounded Max
Rounded Top
Rounded Bottom
Rounded Left
Rounded Right
Rounded Head Left
Rounded Head Right
Rounded Foot Left
Rounded Foot Right
Rounded Leaf Left
Rounded Leaf Right
Rounded Petal Left
Rounded Petal Right
Rounded Drop Left
Rounded Drop Right
Circle
Circle Min
Circle Small
<div class="sg sg-shapes">
	<div class="square">Square</div>
	<div class="rounded">Rounded</div>
	<div class="rounded-min">Rounded Min</div>
	<div class="rounded-small">Rounded Small</div>
	<div class="rounded-medium">Rounded Medium</div>
	<div class="rounded-big">Rounded Big</div>
	<div class="rounded-max">Rounded Max</div>
	<div class="rounded round-top">Rounded Top</div>
	<div class="rounded round-bottom">Rounded Bottom</div>
	<div class="rounded round-left">Rounded Left</div>
	<div class="rounded round-right">Rounded Right</div>
	<div class="rounded round-head-left">Rounded Head Left</div>
	<div class="rounded round-head-right">Rounded Head Right</div>
	<div class="rounded round-foot-left">Rounded Foot Left</div>
	<div class="rounded round-foot-right">Rounded Foot Right</div>
	<div class="rounded round-leaf-left">Rounded Leaf Left</div>
	<div class="rounded round-leaf-right">Rounded Leaf Right</div>
	<div class="rounded round-petal-left">Rounded Petal Left</div>
	<div class="rounded round-petal-right">Rounded Petal Right</div>
	<div class="rounded round-drop-left">Rounded Drop Left</div>
	<div class="rounded round-drop-right">Rounded Drop Right</div>
	<div class="circle">Circle</div>
	<div class="circle-min">Circle Min</div>
	<div class="circle-small">Circle Small</div>
</div>