Shortcodes

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_image=”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 color: green, pink, blue
Add a link: http://google.com

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

[call_to_action]

[call_to_action]Call to Action[/call_to_action]

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

Add custom classes, to integrate with custom css: class=”my-class”