There are a few shortcodes which will make your experience managing the content on this site much more enjoyable and fruitful.

Grid

[row]

[row]
[col]Column1[/col]
[col]Column2[/col]
[/row]

Always wrap columns in a [row] shortcode.

[col]

[col]CONTENT[/col]

The heart of any responsive site is its grid. This one is based on Bootstrap 3. And that’s because it is flexible, powerful, and awesome.

There are four breakpoint ranges:
0   <= xs < 768 768 <= sm < 992 993 <= md < 1170 1170 <= lg

For each of these ranges, you can indicate how many columns (out of twelve) a particular [col] shortcode should take up.

You do this simply, by adding an attribute like this: sm=8

These column widths cascade UPWARD.
[col xs=6] is the same as [col xs=6 sm=6 md=6 lg=6].
[col xs=6 md=4] is the same as [col xs=6 sm=6 md=4 lg=4].

And, lastly, the default is xs=12.
[col sm=6] is the same as [col xs=12 sm=6]

Advanced pushing/pulling/offsetting

To move columns to the left or right a certain number of columns, potentially even visually swapping two columns, use:

sm-pull=4: to the left (doesn’t affect other columns placement)
sm-push=4: to the right (doesn’t affect other columns placement)
sm-offset=4: add columns to the left.

hidden-sm hide only in a certain range
visible-sm show only in a certain range

align=”center”, align=”right”, align=”left” specify the text alignment of a column/section.

[section]

[section]CONTENT[section]

In a full-width template, this will
1) provide a centered container for the provided content
2) allow you to optionally add a full-width background color and/or image.

Cool! Provide a custom background color and/or image by adding these attributes
bg_color=”#000″, bg_img=”http://placekitten.com/300/300″

Notes on Nesting

You may place any content you want, including further rows and columns, inside of a column. However, in these nested situations, you should use [_row], [_col], and then [__row],[__col] (for two deep).

You may place any content you want, including rows and columns, inside of a section.

More Shortcodes

[text]

[text xxs=12 sm=16 md=24]Your Custom Resizing Text Here[/text]
This allows you to specify a font-size (in pixels) for each grid range. These are the same as with the [col], with one addition for super-small devices.
0   <= xxs < 480 480 <= xs < 768 768 <= sm < 992 993 <= md < 1170 1170 <= lg

The max font-size is 70px.

[gap]

Simple as can be. [gap] and then an arbitrary number of pixels you want the gap to be. If this number is negative, it will produce a negative margin, moving the content below toward the content above.
[gap 100]
[gap -50]

[button]

Add a size: small, large
Add a link: http://google.com

[button large pink http://test.com/#mylink ]Button Text[/button]
[button small green http://google.com]Submit[/button]

[accordion]

[accordion title=”Accordion Title”]ACCORDION CONTENT[/accordion]
title=”Accordion Title”

Accordion Item 1

Aliquam dapibus arcu lectus, quis cursus lorem gravida id. In et condimentum velit, non egestas magna. Mauris tortor magna, fringilla ut semper eu, facilisis a arcu. Cras sollicitudin justo vel justo imperdiet commodo. Suspendisse ullamcorper lorem vitae dui mollis dictum. Duis at ipsum tincidunt, lacinia eros eu, volutpat lacus. Nam ac pharetra leo.

Integer tempus erat non turpis dignissim, vitae suscipit lorem sodales. Aenean non scelerisque nunc. Nulla fringilla eros quis pellentesque vehicula. Donec tristique orci sed leo accumsan, in feugiat nisl eleifend. Curabitur at hendrerit libero. Morbi vitae erat vel ligula molestie luctus. Aenean ut justo cursus, iaculis risus in, faucibus purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Pellentesque eleifend nulla eget elit volutpat ultricies. Pellentesque viverra ultricies mauris, sit amet ullamcorper tellus commodo et. Fusce orci diam, fermentum eget vulputate vitae, ultricies vel dui. Sed nec euismod lacus, ut ullamcorper dolor.

Accordion Item 2

Aliquam dapibus arcu lectus, quis cursus lorem gravida id. In et condimentum velit, non egestas magna. Mauris tortor magna, fringilla ut semper eu, facilisis a arcu. Cras sollicitudin justo vel justo imperdiet commodo. Suspendisse ullamcorper lorem vitae dui mollis dictum. Duis at ipsum tincidunt, lacinia eros eu, volutpat lacus. Nam ac pharetra leo.

Accordion Item 3

blank

Aliquam dapibus arcu lectus, quis cursus lorem gravida id. In et condimentum velit, non egestas magna. Mauris tortor magna, fringilla ut semper eu, facilisis a arcu. Cras sollicitudin justo vel justo imperdiet commodo. Suspendisse ullamcorper lorem vitae dui mollis dictum. Duis at ipsum tincidunt, lacinia eros eu, volutpat lacus. Nam ac pharetra leo.

Integer tempus erat non turpis dignissim, vitae suscipit lorem sodales. Aenean non scelerisque nunc. Nulla fringilla eros quis pellentesque vehicula. Donec tristique orci sed leo accumsan, in feugiat nisl eleifend. Curabitur at hendrerit libero. Morbi vitae erat vel ligula molestie luctus. Aenean ut justo cursus, iaculis risus in, faucibus purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Pellentesque eleifend nulla eget elit volutpat ultricies. Pellentesque viverra ultricies mauris, sit amet ullamcorper tellus commodo et. Fusce orci diam, fermentum eget vulputate vitae, ultricies vel dui. Sed nec euismod lacus, ut ullamcorper dolor.