By Jenn
A site on Squarespace doesn’t have to look like a Squarespace.
In a recent episode of Shoptalk, the phrase I want a WordPress was used to illustrate the ubiquity of the WordPress platform.
Squarespace and WordPress are different platforms with similar notoriety. There was a time when you knew a WordPress theme by sight — the telltale sidebar, the blogroll links. Similarly, many of us who look at websites all day long can spot a Squarespace site from across the room.
On a recent custom Squarespace development project, we needed the best of both worlds: a one-of-a-kind design that also could be easily managed using the Squarespace editor.
If you’ve never seen the Squarespace editor, this is what it looks like:
Right?
Turns out, breaking out of a Squarespace template (and keeping the awesome editor) is pretty straightforward.
Here’s how we did it.
Turn on developer mode
Turn on developer mode in the Squarespace admin panel. This gives you access to your site’s git repository, including a helpful panel for reviewing commit history and syntax errors:
Use the boilerplate template
WordPress has Bones, Drupal has Zen, and Squarespace has Base, an ideal boilerplate for a custom design.
Study system templates
At the time of writing, Squarespace has 36 system templates: 22 parent templates and 14 variants.
This handy Squarespace template comparison chart reveals that variants are actually not unique from their parent template. Bedford and Anya may be styled differently, but they share the same codebase. We found Bedford and Pacific to be the most versatile parent templates.
In addition to reading the developer docs, we learned a lot by studying system templates. To do this, install a template in the admin panel, turn on developer mode, and check out the git repository.
Grab JSON data
The JSON data returned to every page and block can be accessed via a URL or JSON-T in template files. You can also log the JSON formatter to the console, which is useful for debugging.
Write LESS
Well, sort of. Variables and mixins, yes. code>@import, no. You’ll need to list every LESS file individually in the template configuration file.
It’s worth noting that LESS doesn’t have advanced control directives or the code>@extend feature of Sass. You can’t write the same code>@if, code>@for, code>@each or code>@while loops in LESS. Still, being able to write in a preprocessor with zero setup is pretty nice.
LESS is even supported in the Squarespace admin panel. In other words, you don’t have to turn on developer mode to write LESS.
Add options to the style editor
The style editor provides an interface for making presentational changes like colors, fonts, and background images.
You can add options to the style editor by including a JSON object directly in your LESS file, which maps to a LESS variable.
Use Markdown for custom blocks
One of the biggest downsides of Squarespace is the lack of support for custom blocks or overriding system blocks. For now, you can use the Markdown block. Since Markdown supports inline HTML, it doubles as a custom block.
Summary
Turn on developer mode, use the boilerplate template, learn some JSON-T, and write some LESS.
We haven’t even covered template partials, open block areas, or locking layouts. There’s even potential to use frameworks like Ember, Backbone or Angular to connect with external databases.
We liked the challenge of building a Squarespace that doesn’t look like a Squarespace. Have you done something similar? Tell us how you did it.