The CAP grid is based on Foundation Grid. Start by adding a div with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a class of columns within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes.
Mobile first
The grid is mobile first. Code for small screens first, and larger devices will inherit those styles. Customise for larger screens as necessary. For example including small-6 will mean the div is six columns wide on all screen sizes. Using large-6 will mean the div is six columns wide on large screens, but will switch to twelve columns on smaller devices unless otherwise specified
Offset
Move blocks up to eleven columns to the right by using classes like large-offset-1 and small-offset-3.
Source ordering
You can also shift the order of the columns between the breakpoints if you need things to appear in a different order based on screen size. Prefix push/pull with the size of the device you want to apply the styles to.
Collapsing
The collapse class will remove the padding from between each of the columns. Often you'll want to collpase the the left and right edge padding but keep the padding between the columns. To do this use both collapse and medium-collapse-outer.
Centering
Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.
Last column
The grid will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to twelve columns, you can tag the last column with a class of end in order to override that behavior.
<div class="row">
<div class="medium-7 large-6 columns">
<p>Something in here</p>
</div>
<div class="medium-5 large-6 columns">
<p>Something else here</p>
</div>
</div>
- show-for-small-only
- show-for-medium-up
- show-for-medium-only
- show-for-large-up
- show-for-large-only
- hide-for-small-only
- hide-for-medium-up
- hide-for-medium-only
- hide-for-large-up
- hide-for-large-only
- hide
- clearfix - make a div contain its children
- clear-both - clear float
- clear-none - don't clear float
- left - float left
- right - float right
- float-none - don't float
- no-margin
- margin-bottom - 20px
- margin-bottom-small - 10px
- margin-bottom-large - 40px
- margin-left
- margin-left-large
- margin-right
- margin-right-large
- margin-top
- margin-top-large
- pad - 60px
- pad-half - 30px
- pad-side
- pad-side-half
- pad-extraside
- pad-vertical
- pad-vertical-half
- pad-top
- pad-top-half
- pad-extratop
- pad-bottom
- pad-bottom-half
- pad-extrabottom
- pad-left
- pad-left-half
- pad-extraleft
- pad-right
- pad-right-half
- pad-extraright
<h1>H1 header</h1>
<h1 class="large">H1 header</h1>
<h2>H2 header</h2>
<h2 class="large">H2 header</h2>
<h2 class="linbe">H2 header</h2>
<h3>H3 header</h3>
<h4>H4 header</h4>
Paragraph style - Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
<p>Paragraph</p>
Paragraph style small - Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
<p class="small">Paragraph</p>
Paragraph style smaller - Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
<p class="smaller">Paragraph</p>
Paragraph style smallest - Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.
<p class="smallest">Paragraph</p>
<p><a href="#">a link</a></p>
<p><a href="#" class="no-underline">a link</a></p>
Green font
Steel font
Cyan font
Blue font
Pink font
Orange font
Colour classes - add to any of the above- green-font
- steel-font
- cyan-font
- blue-font
- pink-font
- orange-font
- white-font
- black-font
Slab font
Round font
Hand font
Font classes - add to any of the above- slab-font
- round-font
- hand-font
Uppercase font
Italic font
Bold font
Other classes - add to any of the above- caps
- italic
- bold
- no-margin
- align-left
- align-right
- align-center
<ul class="square"><li>List item</li></ul>
List classes- none
- square
- disc
- circle
<a class="button green" href="#">Green button</a>
Colour classes- green
- steel
- cyan
- blue
- pink
- orange
- light
- grey
- white
<a class="button green disable" href="#">Disabled button</a>
Other classes- disable
- notbold
- noborder
- small
- expand or expand-on-small-only
<a class="button green icon download" href="#">Download button</a>
Icon classes- download
- phone
- click
- email
- cancel
- complete
- heart
- doc
- grid
- list
- photo
- video
- play
<div class="bg-colour"></div>
Colour classes- bg-green
- bg-steel
- bg-cyan
- bg-blue
- bg-pink
- bg-orange
- bg-grey
- bg-white
- bg-trans
- bg-map
- bg-cream
<div class="bg-colour bg-op-90"></div>
Other classes- bg-90
- bg-80
- bg-70
- bg-op-90
- bg-op-80
- zigzag-top
- zigzag-bottom
- zigzag-left
- zigzag-right
<div class="border-green"></div>
Colour classes- border-green
- border-steel
- border-cyan
- border-blue
- border-pink
- border-orange
<div class="video100">
<iframe allowfullscreen="" frameborder="0" height="642" mozallowfullscreen="" src="https:{ee-field:embed_url}" webkitallowfullscreen="" width="1140"></iframe>
</div>
By including the class video100, it will automatically make the video resize based on the browser width.
<img src="/images/site/partner-cap-debt-help.jpg" alt="Alt for image" />