One of Marketpath's most recently published packages is "Foundation Landing Pages with Grid Builder". This package gives non-technical individuals a starting place for building beautiful and effective landing pages. This example provides instructions on how to create and implement a new site using the package.
Setup
Create a new site by visiting My Dashboard and clicking the Create a New Site link. Walk through the site setup wizard and when you get to the Theme selection, choose "Foundation Landing Pages with Grid Builder".
Overview
The site uses a package called Marketpath Grid Builder. This allows you to build a landing page row by row and column by column. It provides settings to adjust the width, background, padding, and margins of rows and does the same for each column you add.
It also makes use of the Foundation Banner & Galleries package. The default Grid Builder page templates allow you to build a gallery at the top of the page.
To get started, create a new article that uses the Grid Builder template.
Adding a Row
In your new article, scroll down to the Custom Fields section and then the Content Rows group. Click the New Row button.
Provide a Row Description that describes the content in the row. This description is only used to organize your rows and is not rendered.
The Row Type should be Grid Builder. This allows you to add rows and columns.
Expand the Row Settings group and you'll see a drop-down containing the following options. This is a multi-select, so each option you select will be added to the Row Styles list and may also show additional row settings when added. Each style is explained below.
full width
The full width style tells the Grid Builder template to render this row to the full width of the browser window (left edge to right edge). Otherwise, it will use the standard container width of 75 rem (or 1,200 px for most browsers).
Once selected, you'll see another drop-down with two options.
full width content - the row and all of its content will span from the left edge of the browser window to the right edge.
restricted width content - the row will span from the left edge to the right edge but the content in that row will be constrained to the standard width.
callout
The callout row setting wraps the row with the standard callout border. A Row Callout Style drop-down is display with the additional formatting options shown in the screenshot below.
plain - the callout is given a border but no background color.
primary - the callout is given a border and uses the primary background color. The primary color is defined in the stylesheets and is easily changed. The default implementation makes this a light blue as seen in the image below.
secondary - border and gray background.
success - border and light green background.
warning - border with light yellow background.
alert - border with light red background.
Padding & Margin options
When any of the following padding or margin options are selected the padding and margin are applied to the columns, not the row. Padding is space added inside content and margin is space added outside content. To understand this more, the following row and its columns have no padding or margin applied.
horizontal padding
Applies horizontal padding to the columns. This adds additional space on the left and right side of the content within each column.
vertical padding
Applies vertical padding to the columns. This adds additional space on the top and bottom of the content within each column.
horizontal margin
Applies a horizontal margin to the columns. This adds additional space outside on the left and right of the content in each column.
vertical margin
Applies a vertical margin to the columns. This adds additional space outside on the top and bottom of the content in each column.
custom background
Selecting the custom background style for a row allows you to provide a custom background row color or select an image to use as the background. Background colors can be in any acceptable HTML color format, including hex: "#ff0000", rgb: "rgb(255,0,0)", or cmyk: "cmyk(100%, 0%, 0%, 0%)".
custom classes
Custom classes allow you to provide one or more classes, separated by a space, for additional styling. This provides designers and developers additional flexibility when formatting rows and their content.
custom padding
Custom padding allows you to add additional padding around a row. When added in row settings it does not apply to column padding. Provide a number 0 through 5. Each number will be applied as rem's. For example, selecting a 2 would result in "2rem" of padding.
Remember, padding is applied inside the row container. So space will be added around the row's content. This really only matters if you have a background color or image.
custom margin
Custom margin allows you to add additional margin around a row. When added in row settings it does not apply to column margin. Provide a number 0 through 5. Each number will be applied as rem's.
Margin is applied outside a row. So space will be added around the row's content.
Adding & Managing Columns
To add a new column click the New Column button. Each row must have at least one column with content.
In Column Settings, Styles are the same as the row styles described above except that they apply only to their associated column. I won't go through each of the Styles here because they function exactly the same.
Screen Widths
Column Settings has three different screen widths you can set for small, medium, and large screen sizes. You simply set the width you want the column to be and it will automatically use that amount of space on the given screen size. A small screen will typically be a smart phone. A medium screen could be a tablet or shrunken browser window. And a large screen would normally be a desktop or laptop.
If you do not provide values here each column will divide the available width equally for all screen sizes. If you have two columns, they will both be 50% wide. If you have 3, they will be 33.3% wide.
Often, however, you'll want to set a width such as 1/3 for the first column because it contains an image and 2/3 for the second column because it contains text. Simply choose the corresponding width for each column for the given screen size.
The widths will propogate from small to large. If you only set the small width, the medium and large will also use it. If you only set the medium width, the large will also use it. Going the other direction, if you set only the large width, then the medium and small screen sizes will ignore it and cause the column to take up the full width.
You can see how your choices work by grabbing the edge of your browser window to shrink or expand the width. In the example below, the large columns are set to 1/12 and the medium is set to 1/3. You'll see the number of columns start at 12 and then shrink to 3 and then to only 1 when the small screen size is met.
Row Capture
WARNING: This section is for developers only.... unless you want to confuse yourself.
The Row Capture Row Type is used for injecting template variables into a row. You would use this if you want to render a list of blog posts or calendar entries within a row, while still giving editors the option to manage the rows before and after.
To do this, all you have to do is provide the template variable name. In the example below, we're rendering a random list of customer testimonials above other rows of content. We use the capture method to do capture content and assign it to a variable. That variable is then accessible within the _grid_builder_html template.
{%- include "header" -%}
{%- include "/gallery/marketpath/galleries/_banner_html" -%}
{%- if entity.content_html.is_valid -%}
<div class="grid-container" style="padding-top: 2em">{{ entity.content_html }}</div>
{%- endif -%}
{%- datastore_items var ds_items = datastore: "70cdf665-034a-451f-93a1-0a8e7124fc19" limit: 3 |rand -%}
{%- capture var testimonials -%}
<div class="testimonials p-t-2 m-b-1">
<div class="grid-container">
<div class="grid-x">
<div class="cell">
<h3>Testimonials</h2>
</div>
</div>
<div class="grid-x grid-margin-x grid-padding-x grid-padding-y grid-margin-y">
{%- for item in ds_items -%}
<div class="cell large-4 small-12">
<div class="testimonial-quote">"{{item.testimonial}}"</div>
<div class="testimonial-title">
{{item.name}}, {{item.location}}
</div>
</div>
{%- endfor -%}
</div>
</div>
</div>
{%- endcapture -%}
{%- include "/component/marketpath/grid-builder/_grid_builder_html" -%}
{%- include "footer" -%}