seyDoggy Grid

Similar to the grid system found in the ExtraContent Snippets, this grid system makes better use of the available width, giving a better overall balance to the outermost edges of the layout.

Contained in the download are three snippets to get you started, a CSS snippet, an HTML snippet and a PHP snippet. The CSS snippet creates the grid effect. The HTML snippet is an example of a 3 column layout in HTML and the PHP snippet is the same example but in PHP.

Download the snippets here.

Installation

To install "seyDoggy Grid", double click the .rwsnippet or drag and drop the file into ~/Library/Application Support/RapidWeaver/Snippets.

Usage

CSS Snippet

To ensure that your layout is styled correctly, paste the contents of this snippet to Page Inspector > Header > CSS. The CSS will take care of the rest.

The CSS, by default, will support up to 6 columns and combinations therein. With a bit of math and CSS knowhow you can extend this indefinitely. Please don't ask us how, it's better for everyone if you learn a bit of CSS and tackle that task on your own. It shouldn't be hard to figure out though, going on the existing example as a guide.

HTML Snippet

The example included here is a 3 column layout. Paste this anywhere in your content and replace the lorem ipsum text with your own. If you are pasting this snippet into a styled text area of RapidWeaver and not a plain text or HTML type field, you will need to select the code from start to finish, then go to Format > Ignore Formatting.

To change the layout from 3 columns to more or less columns, add or remove one or more of the following block of code:

<div class="column three">
  <div class="content">
    <h2>Column 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit. Proin venenatis risus dictum mi.
    Etiam ullamcorper. Mauris justo. Fusce nibh quam,
    imperdiet at, nonummy.</p>
  </div>
</div>

Once you've got the number of columns you want, change the latter class in each column from 'three' to the text equivalent of the number of columns desired, i.e. 'two', 'four' or 'six', etc...

For more advanced layout options you can use combinations such as 'two3rds' and 'three' with two columns of markup. The first column will take up the first two thirds while the last column takes up the remaining third. Have a look at the available styles in the CSS snippet and play with your own combinations, always keeping in mind that the sum of all your columns should always equal about 100%.

PHP Snippet

The PHP example is more of the same except that it's parsed into PHP code. In this example, we use a 2 column layout. To use it, paste this anywhere in your content between '<?php' and '?>' and replace the lorem ipsum text with your own. If you are pasting this snippet into a styled text area of RapidWeaver and not a plain text or HTML type field, you will need to select the code from start to finish, then go to Format > Ignore Formatting.

To change the layout from 2 columns to more or less columns, add or remove one or more of the following block of code:

// Open Column
echo '<div class="column two"><div class="content">';

// Open Content
echo '<h2>Column 1</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetuer
	adipiscing elit. Proin venenatis risus dictum mi.
	Etiam ullamcorper. Mauris justo. Fusce nibh quam,
	imperdiet at, nonummy.</p>';

// Close Column
echo '</div></div>';

Once you've got the number of columns you want, change the latter class in each column from 'two' to the text equivalent of the number of columns desired, i.e. 'three', 'four' or 'six', etc...

Again, more advanced layouts can be had by following those instructions from the HTML instructions above.