1 #permalink Globals

Various global classes which can be used on any element

Source: globals.css, line 1

1.1 #permalink .first / .last

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

Remove the prepending or appending margin of a element. Declarative form of using :first-child and :last-child in CSS

Example
  • Item
  • Item
  • Item
Markup 
<ul class="list">
    <li class="first">Item</li>
    <li>Item</li>
    <li class="last">Item</li>
</ul>
Source: globals.css, line 11

1.2 #permalink .floatl / .floatr / .clear

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

Savely use floats on any element and clear before and after the wrapping container

Example
Left
Right
Markup 
<div class="clear">
    <div class="floatl">Left</div>
    <div class="floatr">Right</div>
</div>
Source: globals.css, line 34

1.3 #permalink .alignl / .alignr / .alignc

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

Align the text contents of a container to the left, to the right or center them

Example

Left aligned

Right aligned

Centered

Markup 
<p class="alignl">
    Left aligned
</p>
<p class="alignr">
    Right aligned
</p>
<p class="alignc">
    Centered
</p>
Source: globals.css, line 65

1.4 #permalink .pagesize

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

Restricts the maximum width a element can have and centers it if the surrounding space is big enough to do so. The example shows a common use case, where you want the section to span the whole surface area while the content should not exceed a certain width

Examples
Default styling
Content
.pagesize--expanded
Modify the section to ignore any set max width
Content
Markup 
<div class="section">
    <div class="pagesize {modifiers}">
        Content
    </div>
</div>
Source: globals.css, line 97

1.5 #permalink .hide

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

Sets the display property of a element to "hidden" and therefor changes the elements state to invisible. Various modifier classes allow to hide the element at different screen dimensions from 500px through to 1200px in 100px steps.

Examples
Default styling
Element
.hide--500
Hides the element if the browser window is at least 500px wide
Element
.hide--600
Hides the element if the browser window is at least 600px wide
Element
.hide--700
Hides the element if the browser window is at least 700px wide
Element
.hide--800
Hides the element if the browser window is at least 800px wide
Element
.hide--900
Hides the element if the browser window is at least 900px wide
Element
.hide--1000
Hides the element if the browser window is at least 1000px wide
Element
.hide--1100
Hides the element if the browser window is at least 1100px wide
Element
.hide--1200
Hides the element if the browser window is at least 1200px wide
Element
Markup 
<span class="hide {modifiers}">Element</span>
Source: globals.css, line 124

1.6 #permalink .block

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

Sets the display property of a element to "block" and therefor changes the elements state to a block level. Various modifier classes allow alter the element at different screen dimensions from 500px through to 1200px in 100px steps.

Examples
Default styling
Element
.block--500
Blocks the element if the browser window is at least 500px wide
Element
.block--600
Blocks the element if the browser window is at least 600px wide
Element
.block--700
Blocks the element if the browser window is at least 700px wide
Element
.block--800
Blocks the element if the browser window is at least 800px wide
Element
.block--900
Blocks the element if the browser window is at least 900px wide
Element
.block--1000
Blocks the element if the browser window is at least 1000px wide
Element
.block--1100
Blocks the element if the browser window is at least 1100px wide
Element
.block--1200
Blocks the element if the browser window is at least 1200px wide
Element
Markup 
<span class="block {modifiers}">Element</span>
Source: globals.css, line 197

1.7 #permalink .iblock

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

Sets the display property of a element to "inline-block" and therefor changes the elements state to a inline-block level. Various modifier classes allow alter the element at different screen dimensions from 500px through to 1200px in 100px steps.

Examples
Default styling
Element
.iblock--500
Inline-blocks the element if the browser window is at least 500px wide
Element
.iblock--600
Inline-blocks the element if the browser window is at least 600px wide
Element
.iblock--700
Inline-blocks the element if the browser window is at least 700px wide
Element
.iblock--800
Inline-blocks the element if the browser window is at least 800px wide
Element
.iblock--900
Inline-blocks the element if the browser window is at least 900px wide
Element
.iblock--1000
Inline-blocks the element if the browser window is at least 1000px wide
Element
.iblock--1100
Inline-blocks the element if the browser window is at least 1100px wide
Element
.iblock--1200
Inline-blocks the element if the browser window is at least 1200px wide
Element
Markup 
<span class="iblock {modifiers}">Element</span>
Source: globals.css, line 270