Source: classes.scss, line 186
1.1 Typography
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 337
1.2 Links
Source: classes.scss, line 343
1.2.1 Pointer Events
[ .disabled ]
[ .enabled ]
Example
Disabled
Enabled
<div class="sg sg-pointer-events">
<h6>Disabled</h6>
<button class="disabled">BUTTON</button>
</div>
<div class="sg sg-pointer-events">
<h6>Enabled</h6>
<button class="enabled">BUTTON</button>
</div>Source: classes.scss, line 371
1.2.2 Cursor
[ .pointer | .pointer * ]
[ .no-pointer | .no-pointer * ]
Example
Cursor Pointer
Cursor Default
<div class="sg sg-cursor">
<div class="pointer" style="border:1px solid #000;padding:5px">Cursor Pointer</div>
</div>
<div class="sg sg-cursor">
<div class="no-pointer" style="border:1px solid #000;padding:5px">Cursor Default</div>
</div>Source: classes.scss, line 399
1.3 Images
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>Source: classes.scss, line 497
1.3.2 Pixelated
[ .pixelated ]
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 523
1.4 Display
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>Source: classes.scss, line 596
1.4.5 Flex
Source: classes.scss, line 602
1.4.5.1 Flex Column
Flex Column element.
[ .-column ]
Example
<div class="sg sg-flex">
<div class="-column">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 625
1.4.5.2 Flex Row
Flex Column element.
[ .-row ]
Example
<div class="sg sg-flex">
<div class="-row">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 648
1.4.5.3 Flex Wrap
Flex Wrap element.
[ .-wrap ]
Example
<div class="sg sg-flex">
<div class="-wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 673
1.4.5.4 Flex No Wrap
Flex No Wrap element.
[ .-nowrap ]
Example
<div class="sg sg-flex">
<div class="-nowrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 698
1.4.5.5 Flex Align Flex Start
Flex Align Flex Start element.
[ .-astart ]
Example
<div class="sg sg-flex">
<div class="-column -astart">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 720
1.4.5.6 Flex Align Flex End
Flex Align Flex End element.
[ .-aend ]
Example
<div class="sg sg-flex">
<div class="-column -aend">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 742
1.4.5.7 Flex Align Center
Flex Align Flex Center element.
[ .-acenter ]
Example
<div class="sg sg-flex">
<div class="-column -acenter">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 764
1.4.5.8 Flex Align Stretch
Flex Align Flex Stretch element.
[ .-astretch ]
Example
<div class="sg sg-flex">
<div class="-column -astretch">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 786
1.4.5.9 Flex Justify Flex Start
Flex Justify Flex Start element.
[ .-jstart ]
Example
<div class="sg sg-flex">
<div class="-row -jstart">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 808
1.4.5.10 Flex Justify Flex End
Flex Justify Flex End element.
[ .-jend ]
Example
<div class="sg sg-flex">
<div class="-row -jend">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 830
1.4.5.11 Flex Justify Center
Flex Justify Center element.
[ .-jcenter ]
Example
<div class="sg sg-flex">
<div class="-row -jcenter">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 852
1.4.5.12 Flex Justify Stretch
Flex Justify Stretch element.
[ .-jstretch ]
Example
<div class="sg sg-flex">
<div class="-row -jstretch">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 874
1.4.5.13 Flex Justify Space Around
Flex Justify Space Around element.
[ .-jaround ]
Example
<div class="sg sg-flex">
<div class="-row -jaround">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 896
1.4.5.14 Flex Justify Space Between
Flex Justify Space Between element.
[ .-jbetween ]
Example
<div class="sg sg-flex">
<div class="-row -jbetween">
<div></div>
<div></div>
<div></div>
</div>
</div>Source: classes.scss, line 918
1.4.5.15 Flex Grow
Flex Grow element.
[ .-grow ]
Example
<div class="sg sg-flex">
<div class="-row">
<div class="-grow"></div>
<div class="-grow"></div>
<div class="-grow"></div>
</div>
</div>Source: classes.scss, line 940
1.4.5.16 Flex No Grow
Flex No Grow element.
[ .-grow ]
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 966
1.5 Position
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 ]
Source: classes.scss, line 1077
1.5.9 Overlay
[ .overlay ]
Example
<div class="sg sg-lay">
<div class="sg"></div>
<div class="overlay">Overlay</div>
</div>Source: classes.scss, line 1098
1.5.10 Underlay
[ .underlay ]
Example
Underlay
<div class="sg sg-lay">
<div class="sg"></div>
<div class="underlay">Underlay</div>
</div>Source: classes.scss, line 1122
1.6 Floating
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>Source: classes.scss, line 1210
1.6.5 Clear None
[ .clear-none ]
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>Source: classes.scss, line 1261
1.7 Layout
Source: classes.scss, line 1267
1.7.1 Prepend
Prepend.
[ .prepend ]
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>Source: classes.scss, line 1335
1.7.4 No Padding
[ .no-pad ]
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>