Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

..
Failed to load latest commit information.
license.txt
readme.html

readme.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>A guide to the Grid Columns plugin</title>

<style type="text/css">html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;background:transparent;border:none;text-decoration:none}b,i,hr,u,center,menu,layer,s,strike,font,xmp{margin:0;padding:0;vertical-align:baseline;outline:none;font-size:100%;font-weight:normal;font-style:normal;background:transparent;border:none;text-decoration:none}font{color:#333}center{text-align:left}body{line-height:25px;font-family:Cambria,Georgia,Times,"Times New Roman",serif;color:#333;background:#fff}h1,h2,h3,h4,h5,h6{font-style:normal;font-weight:normal;margin:0 0 25px 0}h1{font-size:1.8em}h2{font-size:1.7em}h3{font-size:1.55em}h4{font-size:1.4em}h5{font-size:1.25em}h6{font-size:1.1em}p{margin:0 0 25px 0}ol,ul{list-style:none}ul{list-style:disc;margin:0 0 25px 2.5em}ol{list-style-type:decimal;margin:0 0 25px 3em}ol ol{list-style:upper-roman}ol ol ol{list-style:lower-roman}ol ol ol ol{list-style:upper-alpha}ol ol ol ol ol{list-style:lower-alpha}ul ul,ol ol,ul ol,ol ul{margin-bottom:0}dl{margin:0 0 25px 5px}dl dt{font-weight:bold;margin:10px 0 0 0}dl dd{margin:5px 0 0 1.5em}strong{font-weight:bold}strong strong{font-weight:normal}em,cite{font-style:italic}em em,cite cite{font-style:normal}abbr{cursor:help}acronym{text-transform:uppercase;border-bottom:1px dashed #666;cursor:help}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:baseline;position:relative;bottom:0.3em}sub{vertical-align:baseline;position:relative;top:0.3em}address{font-style:italic;margin:0 0 25px 0}li address,dd address{margin:0}blockquote{margin:0 25px;font-style:normal}blockquote em,blockquote cite{font-style:italic}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{cursor:pointer}a img{border:none}pre{overflow:auto;font:.9em Monaco,monospace,Courier,"Courier New";line-height:25px;margin-bottom:25px;padding:10px}code{font:.9em Monaco,monospace,Courier,"Courier New"}pre code{font-size:1em}ins,dfn{font-style:italic;text-decoration:none;border-bottom:1px solid #666}del{text-decoration:line-through}object{margin-bottom:25px}input,textarea{font-size:1em;font-family:Cambria,Georgia,Times,"Times New Roman",serif;padding:3px}:focus{outline:none}form label{cursor:pointer}option{padding:1px 2px}table{border-collapse:collapse;border-spacing:0;margin-bottom:25px}th,td{text-align:left}hr{margin-bottom:25px}img.wp-smiley{max-height:12px;margin:0;padding:0;border:none}.gallery{display:block;text-align:center;margin-bottom:25px !important}.alignleft,.left{float:left;margin-right:20px}.alignright,.right{float:right;margin-left:20px}.aligncenter,.center{display:block;margin:0 auto 25px auto}.alignnone,.block{clear:both;margin:0 0 25px 0}.clear{clear:both}img.alignleft,img.alignright{display:inline}body{width:750px;margin:36px auto 60px auto;font:15px/21px Arial,'Helvetica Neue',Helvetica,sans-serif;font:16px/25px Georgia,Times,'Times New Roman',serif}a:link,a:visited{color:#2f6eb9;text-decoration:none}a:hover,a:active{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:40px 0 30px 0;color:#000;font-weight:bold;font-family:Arial,sans-serif}h3{font-weight:normal;font-style:italic;font-family:Georgia,Times,'Times New Roman',serif}h1{margin-top:80px;font-size:2.2em}code{padding:0 3px;background:#eee}pre code{padding:0}pre{padding:9px;background:#eee;border:1px solid #ccc}ul{list-style:square}p.first{font-size:21px}p.second{font-size:15px}ul.space li{margin-bottom:10px}.section{overflow:hidden}.columns-2{float:left;width:350px;margin:0 0 21px 25px}.columns-3{float:left;width:230px;margin:0 0 21px 20px}.warning,.alert{padding:6px 9px;background:#fffbbc;border:1px solid #E6DB55}

.column-grid{clear:both}.column-grid:after{content:".";display:block;height:0;clear:both;visibility:hidden}.column{float:left;margin-right:5%}.column-first{}.column-last{float:right;margin-right:0}.column-grid-2 .column-span-2{width:100%}.column-grid-2 .column-span-1{width:47.5%}.column-grid-2 .column-push-1{margin-left:52.5%}.column-grid-3 .column-span-3{width:100%}.column-grid-3 .column-span-2{width:65%}.column-grid-3 .column-span-1{width:30%}.column-grid-3 .column-push-2{margin-left:70%}.column-grid-3 .column-push-1{margin-left:35%}.column-grid-4 .column-span-4{width:100%}.column-grid-4 .column-span-3{width:73.75%}.column-grid-4 .column-span-2{width:47.5%}.column-grid-4 .column-span-1{width:21.25%}.column-grid-4 .column-push-3{margin-left:78.75%}.column-grid-4 .column-push-2{margin-left:52.5%}.column-grid-4 .column-push-1{margin-left:26.25%}.column-grid-5 .column-span-5{width:100%}.column-grid-5 .column-span-4{width:79%}.column-grid-5 .column-span-3{width:58%}.column-grid-5 .column-span-2{width:37%}.column-grid-5 .column-span-1{width:16%}.column-grid-5 .column-push-4{margin-left:84%}.column-grid-5 .column-push-3{margin-left:63%}.column-grid-5 .column-push-2{margin-left:42%}.column-grid-5 .column-push-1{margin-left:21%}.column-grid-12 .column-span-12{width:100%}.column-grid-12 .column-span-11{width:91.25%}.column-grid-12 .column-span-10{width:82.5%}.column-grid-12 .column-span-9 {width:73.75%}.column-grid-12 .column-span-8 {width:65%}.column-grid-12 .column-span-7 {width:56.25%}.column-grid-12 .column-span-6 {width:47.5%}.column-grid-12 .column-span-5 {width:38.75%}.column-grid-12 .column-span-4 {width:30%}.column-grid-12 .column-span-3 {width:21.25%}.column-grid-12 .column-span-2 {width:12.5%}.column-grid-12 .column-span-1 {width:3.75%}.column-grid-12 .column-push-11{margin-left:96.25%}.column-grid-12 .column-push-10{margin-left:87.5%}.column-grid-12 .column-push-9 {margin-left:78.75%}.column-grid-12 .column-push-8 {margin-left:69%}.column-grid-12 .column-push-7 {margin-left:61.25%}.column-grid-12 .column-push-6 {margin-left:52.5%}.column-grid-12 .column-push-5 {margin-left:43.75%}.column-grid-12 .column-push-4 {margin-left:35%}.column-grid-12 .column-push-3 {margin-left:26.25%}.column-grid-12 .column-push-2 {margin-left:17.5%}.column-grid-12 .column-push-1 {margin-left:8.75%}

.column-grid { color: #c00; }

</style>

</head>
<body>

<h1>Grid Columns</h1>

<p class="first">Grid Columns was created because, frankly, I was tired of seeing theme developers add poorly coded shortcodes to their themes to handle this functionality.  This plugin creates a <code>[column]</code> shortcode to address that issue.</p>

<h2>Table of Contents</h2>

<ul>
	<li><a href="#how">How the plugin works</a></li>
	<li><a href="#basic">Basic usage</a></li>
	<li><a href="#advanced">Advanced usage</a></li>
</ul>

<h2 id="how">How does it work?</h2>

<p>The plugin provides you with a shortcode called <code>[column]</code>.  It allows you to create columnized content.</p>

<h3>Some terms you should know</h3>

<ul>
	<li><strong>grid:</strong>  The overall container for your columns.  A grid is made up of sections.</li>
	<li><strong>section:</strong>  The individual sections of a grid.  For example, if the grid is equal to 4, it means there are 4 sections in the grid.</li>
	<li><strong>column:</strong>  A column goes inside of the grid.  A column can span one or more sections of the grid.  The number of columns cannot exceed the number of sections in the grid.</li>
</ul>

<h3>[column] shortcode arguments</h3>

<p>The <code>[column]</code> shortcode that takes in several arguments.  The default arguments are the following.</p>

<pre><code>[column grid="4" span="1" push="0" class=""]...[/column]</code></pre>

<ul>
	<li><strong>grid:</strong>  This is the number of sections in the grid.  You cannot use two different grids together.  The allowed values for this argument are <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, and <code>12</code>.</li>
	<li><strong>span:</strong>  This is the number of sections you'd like the current column to span.  Each instance of the <code>[column]</code> shortcode's spans must add up to equal the <code>grid</code> number.</li>
	<li><strong>push:</strong>  This is similar to <code>span</code>.  This tells the script that you want to "push" this column over a specific number of sections.  Basically, you're creating an empty space.</li>
	<li><strong>class:</strong>  This is for inputting a custom <abbr title="Cascading Style Sheets">CSS</abbr> class.</li>
</ul>

<h2 id="basic">Basic usage</h2>

<p>Once you've installed and activated the plugin, using it is pretty simple.  You only need to wrap the <code>[column]</code> shortcode around some content that you want to columnize.  Of course, you can only use shortcodes in shortcode-ready areas such as the post content area.</p>

<h3>Example #1</h3>

<p>By default, Grid Columns is set up to display 4 columns.  Suppose you wanted to split your content into 4 columns/sections.  You'd do so like this:</p>

<pre><code>[column]This is some very cool example content to use as an example.[/column]

[column]This is some very cool example content to use as an example.[/column]

[column]This is some very cool example content to use as an example.[/column]

[column]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-4">
<div class="column column-span-1 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #2</h3>

<p>Suppose you just wanted two columns.  The following code would handle that.</p>

<pre><code>[column grid="2" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="2" span="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-2">
<div class="column column-span-1 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #3</h3>

<p>Let's do something a little more advanced.  Suppose you wanted a 4-section grid with the first column taking up the space of two sections.  Your code would look like the following:</p>

<pre><code>[column span="2"]This is some very cool example content to use as an example.[/column]

[column span="1"]This is some very cool example content to use as an example.[/column]

[column span="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-4">
<div class="column column-span-2 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<p>You probably noticed the <code>span="1"</code> and <code>span="2"</code> parts in the code.  This represents the number of sections this particular column spans.  So, if your grid is set up into 4 sections (default), you can only have a total span count of 4.</p>

<h3>Example #4</h3>

<p>Let's look at a slightly more advanced usage.  Suppose you wanted a grid of 5 with first and last columns spanning 2/5 of the grid and the middle column spanning 1/5 of the grid.  Your code would look like the following.</p>

<pre><code>[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="5" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]</code></pre>

<p>That would output the following.</p>

<div class="column-grid column-grid-5">
<div class="column column-span-2 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h2 id="advanced">Advanced usage</h2>

<p>The following examples will just show you the code and output.  You should understand the basic usage at this point.</p>

<h3>Example #5</h3>

<pre><code>[column grid="5" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="5" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="5" push="1" span="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<div class="column-grid column-grid-5">
<div class="column column-span-2 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-push-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #6</h3>

<pre><code>[column grid="12" span="6"]This is some very cool example content to use as an example.[/column]

[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]

[column grid="12" span="2"]This is some very cool example content to use as an example.[/column]</code></pre>

<div class="column-grid column-grid-12">
<div class="column column-span-6 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-2 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

<h3>Example #7</h3>

<pre><code>[column grid="3" span="1"]This is some very cool example content to use as an example.[/column]

[column grid="3" span="1" push="1"]This is some very cool example content to use as an example.[/column]</code></pre>

<div class="column-grid column-grid-3">
<div class="column column-span-1 column-first"><p>This is some very cool example content to use as an example.</p></div>
<div class="column column-span-1 column-push-1 column-last"><p>This is some very cool example content to use as an example.</p></div>
</div>

</body>
</html>
Something went wrong with that request. Please try again.