Morse Code for Foundation

The Story

Our goal has always been to help people design for people. Foundation, for example, began as an internal tool to keep us from reinventing grids with every new project. Once it became stable enough, we shared it with the design community. Now thousands of designers use Foundation’s grid to quickly prototype and build their products.

CSS grid systems saved us from nested, non-semantic table layouts. Today the rows/columns approach is so standard that it’s taken a major change in thinking to break into new territory. But we think there’s still room for improvement with the old way, especially when it comes to building layouts.

We wanted to improve the way we worked with the Foundation for Sites grid — a faster way. A concise way. A shorthand method of writing and sharing grids to help us produce entire layouts with just a few lines of code.

Morse Code does just that. We invented a compressed grid language — and then we wrote encoding/decoding plugins for our favorite code editors. These plugins encode and decode Foundation grids in Coda 2 and Sublime 3. As one of our designers put it, “now a grid can be a tweet.”

Installing

https://github.com/zurb/foundation-sublime.git

Features

Our shorthand syntax allows you to use all the features the Foundation grid has to offer, including:

• Responsive classes (small through xlarge)
• Nested grids
• Centering columns
• Offsets
• Source ordering (push and pull)

How it Works

The compressed layout syntax is made of a series of units — two letters and two numbers — with one exception we’ll cover later. The code looks like this:

sg06,sg06|sg12lg06|sg12lg06

Basic Columns

The first letter in a unit indicates a size, the second letter is a class. For example:

• s — small
• m — medium
• l — large
• x — xlarge
• g — column width
• c — centered column
• o — offset
• p — push/pull

Put them together and you get units like:

• sg — column on small
• mc — centered on medium
• lo — offset on large
• xp — push on extra large

In addition, each unit has a number that specifies a value. For example:

• sg12 — 12 columns on small
• sg06 — 6 colums on medium
• lo02 — offset by 2 columns on large

The one exception is push and pull, which both start with the letter p. Use a positive number for push (like pushing forward), and a negative number for pull (like pulling backward).

• lp06 — push 6 columns on large
• lp-06 — pull 6 columns on large

Finally, the centered class doesn't need a number.

• mc — center column on medium
• lc — center column on large

You can string these units together to create a responsive column. For example, this code:

sg12mg06lg03

Creates this HTML:

<div class="row">
  <div class="small-12 medium-6 large-3 columns">

  </div>
</div>

Multiple Columns

Add commas between a cluster of classes to add more columns.

sg08,sg04

<div class="row">
  <div class="small-8 columns">

  </div>
  <div class="small-4 columns">

  </div>
</div>

Multiple Rows

Add breaks or pipes (|) to create a new row.

sg12
sg12

sg12|sg12

<div class="row">
  <div class="small-12 columns">

  </div>
</div>
<div class="row">
  <div class="small-12 columns">

  </div>
</div>

Nested Rows

Add more grid code inside parentheses after a column to create a nested grid.

lg12(lg06,lg06)

<div class="row">
  <div class="large-12 columns">
    <div class="row">
      <div class="large-6 columns">

      </div>
      <div class="large-6 columns">

      </div>
    </div>
  </div>
</div>