1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
Every full page layout on the site has a total of 16 columns with a padding buffer on each column, 
that means that you can use shortcodes like this to create simple column structures:

[four_columns]...[/four_columns]
[four_columns]...[/four_columns]
[four_columns]...[/four_columns]

This would create three columns, using "4" column units for the measurement of each... totaling "12" 
total units. Here's the full list of the shortcodes:

[one_column] Text [/one_column] 
[two_columns] Text [/two_columns] 
[three_columns] Text [/three_columns]
[four_columns] Text [/four_columns] 
[five_columns] Text [/five_columns] 
[six_columns] Text [/six_columns] 
[seven_columns] Text [/seven_columns] 
[eight_columns] Text [/eight_columns] 
[nine_columns] Text [/nine_columns] 
[ten_columns] Text [/ten_columns] 
[eleven_columns] Text [/eleven_columns] 
[twelve_columns] Text [/twelve_columns] 
[thirteen_columns] Text [/thirteen_columns] 
[fourteen_columns] Text [/fourteen_columns] 
[fifteen_columns] Text [/fifteen_columns] 
[sixteen_columns] Text [/sixteen_columns]

[onethird_columns] Text [/onethird_columns] 
[twothirds_columns] Text [/twothirds_columns]

Keep in mind that the actual page templates usually use something like a "11 / 5" split for the 
main content area / sidebar content area measurements... so in most cases, once you've accounted 
for the padding, you'll only have a usable "ten" columns within a standard page template to play 
around with.

What these "shortcodes" are doing is just using a simplified markup to auto-insert some slightly 
more complex HTML markup... which is kinda silly if you ask me. Shortcodes are a buzzword that 
amount to zany attempts to teach theme users learn a different type of markup... when using raw 
HTML is actually a lot easier in the long run.

To get even more precise results, you can just use the raw HTML markup instead of the shortcodes. 
In most cases, I actually recommend this over the shortcodes... as they just tend to be more 
accurate and less prone to getting messed around with by the WordPress auto-formatting functions. 
The exact same layout that we used in the example above would look like this in raw HTML markup:

<div class="four columns">...</div>
<div class="four columns">...</div>
<div class="four columns">...</div>

The final step that you might want to know about is how to remove the padding that prevents us 
from using the full "11" or "16" columns. To do this, we want to insert an "alpha" and "omega" 
class into the first and last column in a row:

<div class="four columns alpha">...</div>
<div class="four columns">...</div>
<div class="four columns omega">...</div>

Note the "alpha" and "omega" used here - this will allow you to use these columns without any 
extra padding from the framework... super cool!

You can read more about the actual HTML/CSS framework here: http://getskeleton.com

ASIDES: An aside is actually just a normal column that has a couple custom classes added. The markup looks like this:

<div class="three columns alpha aside-container">
<div class="aside">
<h3>ASIDE-TITLE</h3>
<p>ASIDE-TEXT</p>
</div>
</div>