close

Monterey Bay Spice Company

Bulk Herbs & Spices

Style Guide: Old Layout and Grid Structure

@HERBCo.com

We have moved to a new column structure. This documentation is for reference only. Please use the Bootstrap Scaffolding for any new content.

Layout & Grid Column Page Structure

This is an example of the column system that is in place on your site. If you look at this code you will se that there is a <div> tag around this text with the class "onethird". This utility class allows you to break your page into thirds. The way that this content block is. setup.

You will also notice if you look at this HTML that there is a <div> tag wrapped around all of the columns. It has a class on it called "colwrap". This class is used to contain all of the columns properly.

This is a block of body copy. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

This is a block of body copy. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

This is a block of body copy. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

This is a block of body copy. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

HTML from columns above

<div class="colwrap"> <div class="onethird"> <p>This is an example of the column system that is in place on your site. If you look at this code you will se that there is a <div> tag around this... </p> </div> <div class="onethird"> <p>This is a block of body copy. Lorem ipsum dolor sit amet, <a href="#NeedsLink">this is a link</a>. Nullam pulvinar auctor nisl sit amet facilisis...</p> </div> <div class="onethird"> <p>This is a block of body copy. Lorem ipsum dolor sit amet, <a href="#NeedsLink">this is a link</a>. Nullam pulvinar auctor nisl sit amet facilisis...</p> </div> </div>

OneThird and TwoThirds Columns

This is a column using the onethird. If you look at this code you will se that there is a <div> tag around this text with the class "onethird". This utility class allows you to break your page into thirds. The way that this content block is setup.

You will also notice if you look at this HTML that there is a <div> tag wrapped around all of the columns. It has a class on it called "colwrap". This class is used to contain all of the columns properly.

This is a twothirds column. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

This is a twothirds column. Lorem ipsum dolor sit amet, this is a link. Nullam pulvinar auctor nisl sit amet facilisis. Nulla condimentum lacus nec libero sodales porta. Quisque vel ante enim. Morbi vel tortor neque. Phasellus ipsum nisi, molestie scelerisque ullamcorper tempus, rhoncus eu turpis.

OneQuarter Columns

This is a column using the onequarter. If you look at this code you will se that there is a <div> tag around this text with the class "onequarter".

This is a column using the onequarter. If you look at this code you will se that there is a <div> tag around this text with the class "onequarter".

This is a column using the onequarter. If you look at this code you will se that there is a <div> tag around this text with the class "onequarter".

This is a column using the onequarter. If you look at this code you will se that there is a <div> tag around this text with the class "onequarter".

All Column Classes

  • colwrap: goes around columns
  • onehalf: half width column
  • onethird: one third column
  • twothirds: spans two thirds of the page
  • onequarter: one quarter column
  • threequarters: spans three quarters of the page

That's it! With those classes you should be able to construct some pretty complex layouts. Have fun.


more Style Guide
close
close

Your Shopping Bag is Empty
close



loading...