seyDesign Grid

Download the Responsive snippet

snippets_seydesign
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.

This code snippet is provided for legacy seyDesign / Nimblehost RapidWeaver themes.

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.

Installation

To install the seyDesign Grid snippet, double click the downloaded .rwsnippet file or drag and drop it onto the RapidWeaver app icon in your dock.

Usage

CSS Snippet
To ensure that your layout is styled correctly, paste the contents of this snippet into any CSS box within RapidWeaver. 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.</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 '' 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.
All prices shown include any applicable VAT
RapidWeaver® is a registered trademark of Realmac Software
Webpage Updated: 15/03/2017