CSS-Scheibo - CSS Framework

Sizing

Source: _objects.scss, line 1432

Width

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for setting the width of an element
Example for width. The width are define in the _settings.scss

<insert-markup>8.1-</insert-markup>
w-auto
auto
<insert-markup>8.1-0</insert-markup>
w-px
1px
<insert-markup>8.1-1</insert-markup>
w-1
0.25rem
<insert-markup>8.1-2</insert-markup>
w-2
0.5rem
<insert-markup>8.1-3</insert-markup>
w-3
0.75rem
<insert-markup>8.1-4</insert-markup>
w-4
1rem
<insert-markup>8.1-5</insert-markup>
w-1/2
50%
<insert-markup>8.1-6</insert-markup>
w-full
100%
<insert-markup>8.1-7</insert-markup>
w-screen
100vw
<insert-markup>8.1-8</insert-markup>
Markup 
  <div class="[modifier class] inline-block h-4 bg-cinnabar"></div>
Source: _objects.scss, line 1438

Min-Width

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for setting the minimum width of an element
Example for min-width. The min-width are define in the _settings.scss

<insert-markup>8.2-</insert-markup>
.min-w-0
0
<insert-markup>8.2-0</insert-markup>
.min-w-full
100%
<insert-markup>8.2-1</insert-markup>
Markup 
  <div class="[modifier class] inline-block h-4 bg-cinnabar"></div>
Source: _objects.scss, line 1469

Max-Width

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for setting the maximum width of an element
Example for max-width. The max-width are define in the _settings.scss

<insert-markup>8.3-</insert-markup>
.max-w-md
40rem
<insert-markup>8.3-0</insert-markup>
.max-w-5xl
100rem
<insert-markup>8.3-1</insert-markup>
Markup 
  <div class="[modifier class] inline-block h-4 bg-cinnabar"></div>
Source: _objects.scss, line 1493

Height

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for setting the height of an element
Example for height. The height are define in the _settings.scss

<insert-markup>8.4-</insert-markup>
h-auto
auto
<insert-markup>8.4-0</insert-markup>
h-1
0.25rem
<insert-markup>8.4-1</insert-markup>
h-2
0.5rem
<insert-markup>8.4-2</insert-markup>
h-screen
100vh
<insert-markup>8.4-3</insert-markup>
Markup 
  <div class="[modifier class] w-full bg-cinnabar"></div>
Source: _objects.scss, line 1517

Min-Height

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for setting the minimum height of an element
Example for min-height. The min-height are define in the _settings.scss

<insert-markup>8.5-</insert-markup>
min-h-0
0
<insert-markup>8.5-0</insert-markup>
min-h-full
100%
<insert-markup>8.5-1</insert-markup>
min-h-screen
100vh
<insert-markup>8.5-2</insert-markup>
Markup 
  <div class="[modifier class] w-full bg-cinnabar"></div>
Source: _objects.scss, line 1543

Max-Height

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Utilities for setting the minimum height of an element
Example for max-height. The max-height are define in the _settings.scss

<insert-markup>8.6-</insert-markup>
max-h-full
100%
<insert-markup>8.6-0</insert-markup>
max-h-screen
100vh
<insert-markup>8.6-1</insert-markup>
Markup 
  <div class="[modifier class] w-full bg-cinnabar"></div>
Source: _objects.scss, line 1568