Let's face it: Building CSS grids can get complicated fast. Even using Foundation 5 — or what we call Foundation for Sites — sometimes finding that one stray </div> tag can be tricky.
Today, we're launching a new way to build, share and store Foundation layouts: Morse Code, a shorthand lingo for Foundation grids. Here's an example:
sg12lg04,sg12lg08|mg06lg12,mg06lg12
That's a row with four large columns, eight large columns, and another row of six and six large columns. As one of our designers pointed out, an entire page can become a tweet.
At first glance it looks like gibberish. It's writable once you learn the system, which we describe on its Playground page. But to help speed things along, we also wrote two plugins for our favorite code editors, Coda 2 and Sublime 3 — just in time for the impending launch of Coda 2.5. These plugins encode Foundation grids into the Morse Code syntax, and turn that code back into Foundation grids. Easy peasy. As a bonus, the Coda plugin comes with Markdown link-aware commands to build common Foundation patterns like buttons, off-canvas navigation, pagination and modal windows.
There are a few caveats.
- Both plugins require complete, well-formed HTML.
- Both plugins require valid Foundation grids. No columns directly inside columns, for example.
- They're not fond of parsing JavaScript.
- The Coda version skips elements without grids — say,
<article>instead of<article class="row">. - And while the Coda version treats each line of Morse Code as a new row, the Sublime version requires everything to be on one line.
But the decoders result in valid HTML.
Encoding grids to Morse Code was easy compared to going the other way. We spent a few weeks getting the decoders to work properly, fine-tuning our syntax in the process. And while it's not a perfect system — indenting more than two levels of nested rows and columns can get a little odd — we think it's a great way to hash out prototype grids faster than ever. Check it out on its official Playground page: