KSS Style Guide

34 #Width Width

Classes for setting the width, max-width, an min-width of an element (or its children).

Source: dist/standard/standard.css, line 12075
Examples
Default styling
A div
.vw-ch0
Sets width to ch0
A div
.vwmn-ch0
Sets min-width to ch0
A div
.vwmx-ch0
Sets max-width to ch0
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12605
Examples
Default styling
A div
.vw-sm-ch0
Sets width to ch0 on sm
A div
.vwmn-sm-ch0
Sets min-width to ch0 on sm
A div
.vwmx-sm-ch0
Sets max-width to ch0 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13767
Examples
Default styling
A div
.vw-ch1
Sets width to ch1
A div
.vwmn-ch1
Sets min-width to ch1
A div
.vwmx-ch1
Sets max-width to ch1
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12648
Examples
Default styling
A div
.vw-sm-ch1
Sets width to ch1 on sm
A div
.vwmn-sm-ch1
Sets min-width to ch1 on sm
A div
.vwmx-sm-ch1
Sets max-width to ch1 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13810
Examples
Default styling
A div
.vw-ch2
Sets width to ch2
A div
.vwmn-ch2
Sets min-width to ch2
A div
.vwmx-ch2
Sets max-width to ch2
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12691
Examples
Default styling
A div
.vw-sm-ch2
Sets width to ch2 on sm
A div
.vwmn-sm-ch2
Sets min-width to ch2 on sm
A div
.vwmx-sm-ch2
Sets max-width to ch2 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13853
Examples
Default styling
A div
.vw-ch3
Sets width to ch3
A div
.vwmn-ch3
Sets min-width to ch3
A div
.vwmx-ch3
Sets max-width to ch3
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12734
Examples
Default styling
A div
.vw-sm-ch3
Sets width to ch3 on sm
A div
.vwmn-sm-ch3
Sets min-width to ch3 on sm
A div
.vwmx-sm-ch3
Sets max-width to ch3 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13896
Examples
Default styling
A div
.vw-ch4
Sets width to ch4
A div
.vwmn-ch4
Sets min-width to ch4
A div
.vwmx-ch4
Sets max-width to ch4
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12777
Examples
Default styling
A div
.vw-sm-ch4
Sets width to ch4 on sm
A div
.vwmn-sm-ch4
Sets min-width to ch4 on sm
A div
.vwmx-sm-ch4
Sets max-width to ch4 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13939
Examples
Default styling
A div
.vw-em0
Sets width to em0
A div
.vwmn-em0
Sets min-width to em0
A div
.vwmx-em0
Sets max-width to em0
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12992
Examples
Default styling
A div
.vw-sm-em0
Sets width to em0 on sm
A div
.vwmn-sm-em0
Sets min-width to em0 on sm
A div
.vwmx-sm-em0
Sets max-width to em0 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14154
Examples
Default styling
A div
.vw-em1
Sets width to em1
A div
.vwmn-em1
Sets min-width to em1
A div
.vwmx-em1
Sets max-width to em1
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13035
Examples
Default styling
A div
.vw-sm-em1
Sets width to em1 on sm
A div
.vwmn-sm-em1
Sets min-width to em1 on sm
A div
.vwmx-sm-em1
Sets max-width to em1 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14197
Examples
Default styling
A div
.vw-em2
Sets width to em2
A div
.vwmn-em2
Sets min-width to em2
A div
.vwmx-em2
Sets max-width to em2
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13078
Examples
Default styling
A div
.vw-sm-em2
Sets width to em2 on sm
A div
.vwmn-sm-em2
Sets min-width to em2 on sm
A div
.vwmx-sm-em2
Sets max-width to em2 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14240
Examples
Default styling
A div
.vw-p10
Sets width to p10
A div
.vwmn-p10
Sets min-width to p10
A div
.vwmx-p10
Sets max-width to p10
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12089
Examples
Default styling
A div
.vw-sm-p10
Sets width to p10 on sm
A div
.vwmn-sm-p10
Sets min-width to p10 on sm
A div
.vwmx-sm-p10
Sets max-width to p10 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13251
Examples
Default styling
A div
.vw-p100
Sets width to p100
A div
.vwmn-p100
Sets min-width to p100
A div
.vwmx-p100
Sets max-width to p100
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12562
Examples
Default styling
A div
.vw-sm-p100
Sets width to p100 on sm
A div
.vwmn-sm-p100
Sets min-width to p100 on sm
A div
.vwmx-sm-p100
Sets max-width to p100 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13724
Examples
Default styling
A div
.vw-p20
Sets width to p20
A div
.vwmn-p20
Sets min-width to p20
A div
.vwmx-p20
Sets max-width to p20
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12132
Examples
Default styling
A div
.vw-sm-p20
Sets width to p20 on sm
A div
.vwmn-sm-p20
Sets min-width to p20 on sm
A div
.vwmx-sm-p20
Sets max-width to p20 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13294
Examples
Default styling
A div
.vw-p25
Sets width to p25
A div
.vwmn-p25
Sets min-width to p25
A div
.vwmx-p25
Sets max-width to p25
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12175
Examples
Default styling
A div
.vw-sm-p25
Sets width to p25 on sm
A div
.vwmn-sm-p25
Sets min-width to p25 on sm
A div
.vwmx-sm-p25
Sets max-width to p25 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13337
Examples
Default styling
A div
.vw-p30
Sets width to p30
A div
.vwmn-p30
Sets min-width to p30
A div
.vwmx-p30
Sets max-width to p30
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12218
Examples
Default styling
A div
.vw-sm-p30
Sets width to p30 on sm
A div
.vwmn-sm-p30
Sets min-width to p30 on sm
A div
.vwmx-sm-p30
Sets max-width to p30 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13380
Examples
Default styling
A div
.vw-p40
Sets width to p40
A div
.vwmn-p40
Sets min-width to p40
A div
.vwmx-p40
Sets max-width to p40
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12261
Examples
Default styling
A div
.vw-sm-p40
Sets width to p40 on sm
A div
.vwmn-sm-p40
Sets min-width to p40 on sm
A div
.vwmx-sm-p40
Sets max-width to p40 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13423
Examples
Default styling
A div
.vw-p50
Sets width to p50
A div
.vwmn-p50
Sets min-width to p50
A div
.vwmx-p50
Sets max-width to p50
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12304
Examples
Default styling
A div
.vw-sm-p50
Sets width to p50 on sm
A div
.vwmn-sm-p50
Sets min-width to p50 on sm
A div
.vwmx-sm-p50
Sets max-width to p50 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13466
Examples
Default styling
A div
.vw-p60
Sets width to p60
A div
.vwmn-p60
Sets min-width to p60
A div
.vwmx-p60
Sets max-width to p60
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12347
Examples
Default styling
A div
.vw-sm-p60
Sets width to p60 on sm
A div
.vwmn-sm-p60
Sets min-width to p60 on sm
A div
.vwmx-sm-p60
Sets max-width to p60 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13509
Examples
Default styling
A div
.vw-p70
Sets width to p70
A div
.vwmn-p70
Sets min-width to p70
A div
.vwmx-p70
Sets max-width to p70
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12390
Examples
Default styling
A div
.vw-sm-p70
Sets width to p70 on sm
A div
.vwmn-sm-p70
Sets min-width to p70 on sm
A div
.vwmx-sm-p70
Sets max-width to p70 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13552
Examples
Default styling
A div
.vw-p75
Sets width to p75
A div
.vwmn-p75
Sets min-width to p75
A div
.vwmx-p75
Sets max-width to p75
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12433
Examples
Default styling
A div
.vw-sm-p75
Sets width to p75 on sm
A div
.vwmn-sm-p75
Sets min-width to p75 on sm
A div
.vwmx-sm-p75
Sets max-width to p75 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13595
Examples
Default styling
A div
.vw-p80
Sets width to p80
A div
.vwmn-p80
Sets min-width to p80
A div
.vwmx-p80
Sets max-width to p80
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12476
Examples
Default styling
A div
.vw-sm-p80
Sets width to p80 on sm
A div
.vwmn-sm-p80
Sets min-width to p80 on sm
A div
.vwmx-sm-p80
Sets max-width to p80 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13638
Examples
Default styling
A div
.vw-p90
Sets width to p90
A div
.vwmn-p90
Sets min-width to p90
A div
.vwmx-p90
Sets max-width to p90
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12519
Examples
Default styling
A div
.vw-sm-p90
Sets width to p90 on sm
A div
.vwmn-sm-p90
Sets min-width to p90 on sm
A div
.vwmx-sm-p90
Sets max-width to p90 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13681
Examples
Default styling
A div
.vw-px0
Sets width to px0
A div
.vwmn-px0
Sets min-width to px0
A div
.vwmx-px0
Sets max-width to px0
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12820
Examples
Default styling
A div
.vw-sm-px0
Sets width to px0 on sm
A div
.vwmn-sm-px0
Sets min-width to px0 on sm
A div
.vwmx-sm-px0
Sets max-width to px0 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13982
Examples
Default styling
A div
.vw-px1
Sets width to px1
A div
.vwmn-px1
Sets min-width to px1
A div
.vwmx-px1
Sets max-width to px1
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12863
Examples
Default styling
A div
.vw-sm-px1
Sets width to px1 on sm
A div
.vwmn-sm-px1
Sets min-width to px1 on sm
A div
.vwmx-sm-px1
Sets max-width to px1 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14025
Examples
Default styling
A div
.vw-px2
Sets width to px2
A div
.vwmn-px2
Sets min-width to px2
A div
.vwmx-px2
Sets max-width to px2
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12906
Examples
Default styling
A div
.vw-sm-px2
Sets width to px2 on sm
A div
.vwmn-sm-px2
Sets min-width to px2 on sm
A div
.vwmx-sm-px2
Sets max-width to px2 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14068
Examples
Default styling
A div
.vw-px3
Sets width to px3
A div
.vwmn-px3
Sets min-width to px3
A div
.vwmx-px3
Sets max-width to px3
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 12949
Examples
Default styling
A div
.vw-sm-px3
Sets width to px3 on sm
A div
.vwmn-sm-px3
Sets min-width to px3 on sm
A div
.vwmx-sm-px3
Sets max-width to px3 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14111
Examples
Default styling
A div
.vw-rem0
Sets width to rem0
A div
.vwmn-rem0
Sets min-width to rem0
A div
.vwmx-rem0
Sets max-width to rem0
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13121
Examples
Default styling
A div
.vw-sm-rem0
Sets width to rem0 on sm
A div
.vwmn-sm-rem0
Sets min-width to rem0 on sm
A div
.vwmx-sm-rem0
Sets max-width to rem0 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14283
Examples
Default styling
A div
.vw-rem1
Sets width to rem1
A div
.vwmn-rem1
Sets min-width to rem1
A div
.vwmx-rem1
Sets max-width to rem1
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13164
Examples
Default styling
A div
.vw-sm-rem1
Sets width to rem1 on sm
A div
.vwmn-sm-rem1
Sets min-width to rem1 on sm
A div
.vwmx-sm-rem1
Sets max-width to rem1 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14326
Examples
Default styling
A div
.vw-rem2
Sets width to rem2
A div
.vwmn-rem2
Sets min-width to rem2
A div
.vwmx-rem2
Sets max-width to rem2
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 13207
Examples
Default styling
A div
.vw-sm-rem2
Sets width to rem2 on sm
A div
.vwmn-sm-rem2
Sets min-width to rem2 on sm
A div
.vwmx-sm-rem2
Sets max-width to rem2 on sm
A div
Markup
<div class="bwa-1 [modifier class]">A div</div>
Source: dist/standard/standard.css, line 14369