Created
June 28, 2012 14:19
-
-
Save senlin/3011643 to your computer and use it in GitHub Desktop.
Add up to 6 columns to Basejump WordPress Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>One column full width content</p> | |
<div class="one-half first">Two columns full width content </div> | |
<div class="one-half">Two columns full width content </div> | |
<div class="one-third first">Three columns full width content </div> | |
<div class="one-third">Three columns full width content </div> | |
<div class="one-third">Three columns full width content </div> | |
<div class="one-fourth first">Four columns full width content </div> | |
<div class="one-fourth">Four columns full width content </div> | |
<div class="one-fourth">Four columns full width content </div> | |
<div class="one-fourth">Four columns full width content </div> | |
<div class="one-fifth first">Five columns full width content </div> | |
<div class="one-fifth">Five columns full width content </div> | |
<div class="one-fifth">Five columns full width content </div> | |
<div class="one-fifth">Five columns full width content </div> | |
<div class="one-fifth">Five columns full width content </div> | |
<div class="one-sixth first">Six columns full width content</div> | |
<div class="one-sixth">Six columns full width content</div> | |
<div class="one-sixth">Six columns full width content </div> | |
<div class="one-sixth">Six columns full width content </div> | |
<div class="one-sixth">Six columns full width content </div> | |
<div class="one-sixth">Six columns full width content </div> | |
And we can get completely nuts with this, for example by doing this: | |
<div class="one-sixth first">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> | |
<div class="one-half">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, , id pulvinar odio lorem non turpis. Nullam sit amet enim.</div> | |
<div class="two-sixths">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, suspendisse id velit vitae ligula volutpat condimentum.</div> | |
<div class="clear"></div> | |
Or by going with something a bit irregular: | |
<div class="one-fourth first">Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.</div> | |
<div class="one-sixth"> </div> | |
<div class="one-fifth">Id pulvinar odio lorem non turpis. Nullam sit amet enim. Aliquam erat volutpat.</div> | |
<div class="one-third">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, suspendisse id velit vitae ligula volutpat condimentum.</div> | |
<div class="clear"></div> | |
The variations are endless! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment