Share this page: 

CAP web style guide

Our grid

12 col
11 col
1 col
10 col
2 col
8 col
4 col
7 col
5 col
6 col
6 col
4 col
4 col
4 col
3 col
3 col
3 col
3 col
2 col
2 col
2 col
2 col
2 col
2 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col

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>

Important classes
  • large-# columns
  • medium-# columns
  • small-# columns
  • large-offset-#
  • medium-offset-#
  • small-offset-#
  • large-push-#
  • large-pull-#
  • medium-push-#
  • medium-pull-#
  • small-push-#
  • small-pull-#
  • collapse
  • large-collapse-outer
  • medium-collapse-outer
  • small-collapse-outer
  • centered
  • end

Media queries - visibility

  • 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

Clearing, floats, padding & margins

  • 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

Typography

H1 header

<h1>H1 header</h1>

H1 large header


<h1 class="large">H1 header</h1>

H2 header

<h2>H2 header</h2>

H2 large header

<h2 class="large">H2 header</h2>

H2 header with line

<h2 class="linbe">H2 header</h2>

H3 header

<h3>H3 header</h3>

H4 header

<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

Lists

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
<ul class="square"><li>List item</li></ul>

List classes
  • none
  • square
  • disc
  • circle

Buttons

<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

Backgrounds

Green background
Steel background
Cyan background
Blue background
Pink background
Orange background
Grey background
White background
Transparent background
Map background
Cream background
<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
90% lighter background
80% lighter background
70% lighter background
90% opacity background
80% opacity background
Zigzag top background
Zigzag bottom background
Zigzag left background
Zigzag right background
<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

Borders

Green
border
Steel
border
Cyan
border
Blue
border
Pink
border
Orange
border
<div class="border-green"></div>

Colour classes
  • border-green
  • border-steel
  • border-cyan
  • border-blue
  • border-pink
  • border-orange

Videos & Images

Image
<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" />

capuk.org uses cookies to make the site simpler.