Morse Code for Foundation

Use our grid shortcuts for Coda and Sublime Text to help you code faster.

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

Coda 2 & 2.5

Download the file below, uncompress it, and double-click the .codaplugin file to install it.

Download Coda Plugin

Sublime Text 2 & 3

If you don't have Package Control installed in your copy of Sublime, head here to install it. Once you're up and running with Package Control, press Cmd+Shift+P to open the command palette. Search for the command "Package Control: Add Repository" and press Enter. Finally, paste this URL into the field that opens at the bottom of your screen:

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>

Thoughts?

We wrote about Morse Code on the ZURB Blog. Head on over and leave a comment telling us what you think!

Read the Post
Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×