KSS Style Guide

Examples
Default styling
A div
.vh-lg-p100
Sets height to p100 on lg
A div
.vhmn-lg-p100
Sets min-height to p100 on lg
A div
.vhmx-lg-p100
Sets max-height to p100 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12342
Examples
Default styling
A div
.vh-md-p100
Sets height to p100 on md
A div
.vhmn-md-p100
Sets min-height to p100 on md
A div
.vhmx-md-p100
Sets max-height to p100 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11977
Examples
Default styling
A div
.vh-sm-p100
Sets height to p100 on sm
A div
.vhmn-sm-p100
Sets min-height to p100 on sm
A div
.vhmx-sm-p100
Sets max-height to p100 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11612
Examples
Default styling
A div
.vh-lg-p25
Sets height to p25 on lg
A div
.vhmn-lg-p25
Sets min-height to p25 on lg
A div
.vhmx-lg-p25
Sets max-height to p25 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12290
Examples
Default styling
A div
.vh-md-p25
Sets height to p25 on md
A div
.vhmn-md-p25
Sets min-height to p25 on md
A div
.vhmx-md-p25
Sets max-height to p25 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11925
Examples
Default styling
A div
.vh-sm-p25
Sets height to p25 on sm
A div
.vhmn-sm-p25
Sets min-height to p25 on sm
A div
.vhmx-sm-p25
Sets max-height to p25 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11560
Examples
Default styling
A div
.vh-lg-p50
Sets height to p50 on lg
A div
.vhmn-lg-p50
Sets min-height to p50 on lg
A div
.vhmx-lg-p50
Sets max-height to p50 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12316
Examples
Default styling
A div
.vh-md-p50
Sets height to p50 on md
A div
.vhmn-md-p50
Sets min-height to p50 on md
A div
.vhmx-md-p50
Sets max-height to p50 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11951
Examples
Default styling
A div
.vh-sm-p50
Sets height to p50 on sm
A div
.vhmn-sm-p50
Sets min-height to p50 on sm
A div
.vhmx-sm-p50
Sets max-height to p50 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11586
Examples
Default styling
A div
.vh-lg-vh100
Sets height to vh100 on lg
A div
.vhmn-lg-vh100
Sets min-height to vh100 on lg
A div
.vhmx-lg-vh100
Sets max-height to vh100 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12498
Examples
Default styling
A div
.vh-md-vh100
Sets height to vh100 on md
A div
.vhmn-md-vh100
Sets min-height to vh100 on md
A div
.vhmx-md-vh100
Sets max-height to vh100 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12133
Examples
Default styling
A div
.vh-sm-vh100
Sets height to vh100 on sm
A div
.vhmn-sm-vh100
Sets min-height to vh100 on sm
A div
.vhmx-sm-vh100
Sets max-height to vh100 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11768
Examples
Default styling
A div
.vh-lg-vh25
Sets height to vh25 on lg
A div
.vhmn-lg-vh25
Sets min-height to vh25 on lg
A div
.vhmx-lg-vh25
Sets max-height to vh25 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12368
Examples
Default styling
A div
.vh-md-vh25
Sets height to vh25 on md
A div
.vhmn-md-vh25
Sets min-height to vh25 on md
A div
.vhmx-md-vh25
Sets max-height to vh25 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12003
Examples
Default styling
A div
.vh-sm-vh25
Sets height to vh25 on sm
A div
.vhmn-sm-vh25
Sets min-height to vh25 on sm
A div
.vhmx-sm-vh25
Sets max-height to vh25 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11638
Examples
Default styling
A div
.vh-lg-vh40
Sets height to vh40 on lg
A div
.vhmn-lg-vh40
Sets min-height to vh40 on lg
A div
.vhmx-lg-vh40
Sets max-height to vh40 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12394
Examples
Default styling
A div
.vh-md-vh40
Sets height to vh40 on md
A div
.vhmn-md-vh40
Sets min-height to vh40 on md
A div
.vhmx-md-vh40
Sets max-height to vh40 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12029
Examples
Default styling
A div
.vh-sm-vh40
Sets height to vh40 on sm
A div
.vhmn-sm-vh40
Sets min-height to vh40 on sm
A div
.vhmx-sm-vh40
Sets max-height to vh40 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11664
Examples
Default styling
A div
.vh-lg-vh50
Sets height to vh50 on lg
A div
.vhmn-lg-vh50
Sets min-height to vh50 on lg
A div
.vhmx-lg-vh50
Sets max-height to vh50 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12420
Examples
Default styling
A div
.vh-md-vh50
Sets height to vh50 on md
A div
.vhmn-md-vh50
Sets min-height to vh50 on md
A div
.vhmx-md-vh50
Sets max-height to vh50 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12055
Examples
Default styling
A div
.vh-sm-vh50
Sets height to vh50 on sm
A div
.vhmn-sm-vh50
Sets min-height to vh50 on sm
A div
.vhmx-sm-vh50
Sets max-height to vh50 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11690
Examples
Default styling
A div
.vh-lg-vh60
Sets height to vh60 on lg
A div
.vhmn-lg-vh60
Sets min-height to vh60 on lg
A div
.vhmx-lg-vh60
Sets max-height to vh60 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12446
Examples
Default styling
A div
.vh-md-vh60
Sets height to vh60 on md
A div
.vhmn-md-vh60
Sets min-height to vh60 on md
A div
.vhmx-md-vh60
Sets max-height to vh60 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12081
Examples
Default styling
A div
.vh-sm-vh60
Sets height to vh60 on sm
A div
.vhmn-sm-vh60
Sets min-height to vh60 on sm
A div
.vhmx-sm-vh60
Sets max-height to vh60 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11716
Examples
Default styling
A div
.vh-lg-vh75
Sets height to vh75 on lg
A div
.vhmn-lg-vh75
Sets min-height to vh75 on lg
A div
.vhmx-lg-vh75
Sets max-height to vh75 on lg
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12472
Examples
Default styling
A div
.vh-md-vh75
Sets height to vh75 on md
A div
.vhmn-md-vh75
Sets min-height to vh75 on md
A div
.vhmx-md-vh75
Sets max-height to vh75 on md
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 12107
Examples
Default styling
A div
.vh-sm-vh75
Sets height to vh75 on sm
A div
.vhmn-sm-vh75
Sets min-height to vh75 on sm
A div
.vhmx-sm-vh75
Sets max-height to vh75 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11742
x="5" y="21" width="5" height="9"/> Toggle HTML markup

Sets the height, max-height, or min-height of element to css var for vh75.

Examples
Default styling
A div
.vh-vh75
Sets height to vh75
A div
.vhmn-vh75
Sets min-height to vh75
A div
.vhmx-vh75
Sets max-height to vh75
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/full/full.css, line 11377