What's the best way to account for LayoutEngine in our responsive template designs?

As I understand it, Squarespace 6 uses YUI3's CSS grids for layout. Does this allow for out-of-box responsive design? Or do we have to grok our own media queries and force YUI3 grids to be responsive?

asked Sep 18 '12 at 15:30 by tnypxl 756349


This has changed once again. We've created a shortcut for you to pull in some CSS to your stylesheets that will automatically break the grid at the desired screen size. Here's how that works.

@media screen and (max-width: 600px) {
  @import 'sqs-grid-breaker';

Old answer below:

Eric's answer (below), at the time it was posted, was the best answer. We now have an updated code snippet that is the new best practice for accounting for Layout Engine on your responsive developer template:

@media only screen and (max-width: /* your breakpoint width */) {
  // Break the squarespace page/post layout grid
  .sqs-block { clear:none; }
  .sqs-layout .col { float: none !important; width: auto !important; }
  .sqs-layout .spacer-block { display: none; }
  .sqs-layout .sqs-row .sqs-block:last-child { padding-bottom: @vgrid;}

answered Apr 30 '13 at 18:08 by foleyatwork ♦♦ 10.9k2813


Where can we find documentation about the Layout Template CSS classes, like sqs-block, sqs-layout, etc.?

(May 09 '13 at 14:40) numbsafari numbsafari's gravatar image

It's generally not recommended that you use those classes for your layouts. Their names have changed before, and there is no guarantee they won't change again. And, of course, if they change, your site will break.

We think it's best to use a minimal grid framework to compliment LayoutEngine, like Zurb Foundation, for example.

(May 09 '13 at 14:45) foleyatwork ♦♦ foleyatwork's gravatar image

Do you have any recommendations on how to get those grids to play nice with the baseline layout stuff?

Do you know of any good templates that illustrate that?

(May 09 '13 at 14:58) numbsafari numbsafari's gravatar image

I only ask, because I've found that mixing your baseline CSS/LESS with Bootstrap doesn't work too well.

(May 09 '13 at 15:01) numbsafari numbsafari's gravatar image

Is @import 'sqs-grid-breaker'; another viable way to do this? Is this a good way to leave updates to the SS staff?

(Feb 21 '14 at 17:53) btemp btemp's gravatar image

Yes it is. It's time for me to update this answer again.

(Feb 21 '14 at 18:01) foleyatwork ♦♦ foleyatwork's gravatar image
showing 5 of 6 Show All

LayoutEngine is built with a flexible grid - so, it will respond to your site width. However, you do need to decide on a break point where the floats are broken - so the grid can stack for smaller screens... also, it's a good idea to hide spacers at the same time. Generally, it's with a snippet like this in your global.css:

@media only screen and (max-width: 600px) {

  /* collapse sqs layouts */
  .sqs-row { display: block; }
  .sqs-col { float: none !important; width: auto !important; }
  .sqs-block.spacer-block { display: none; }


answered Sep 19 '12 at 08:09 by eanderson ♦♦ 10.8k59


It's worth mentioning for clarity that LayoutEngine is used for page and article layout ... the content of the pages on your site, not for the site structure itself.

(Sep 19 '12 at 14:26) eanderson ♦♦ eanderson's gravatar image

All of the templates available in Squarespace 6 are responsive. And Layout Engine, in my experience, works great out of the box without any additional CSS. When you create your own template, Layout Engine should still work great, since it's grid based and can adapt to any width; whether your template is responsive or not depends on you.

answered Sep 18 '12 at 23:56 by foleyatwork ♦♦ 10.9k2813


@foleyatwork I suppose then it wouldn't hurt to use something like Zurb's Foundation or Twitter Bootstrap?

(Sep 19 '12 at 13:57) tnypxl tnypxl's gravatar image

@tnypxl Well, @eanserson definitely knows more about this than I do, so maybe he'll weigh in again. But I think LayoutEngine does a lot of the same things as Zurb's Foundation and Twitter Bootstrap. It might eliminate the need for those things entirely.

answered Sep 19 '12 at 14:02 by foleyatwork ♦♦ 10.9k2813


Is there more in-depth documentation about the squarespace grid css somewhere?

(Sep 19 '12 at 14:07) tnypxl tnypxl's gravatar image

Agree that it would be great if there was a bit more documentation on the sqs grid. Some of the basics:

-Looks like a 12 column grid -Rows have classes .sqs-row & .row -Cols have classes .sqs-col & .col -Seems like .row & .col are the ones affected by break points for mobile -Add a number to .sqs-col i.e. .sqs-col-6 to make a column span half of a twelve column row.

(Sep 30 '12 at 00:37) rowanwernham rowanwernham's gravatar image

sqs is hosting the responsive grid code for YUI (.yui3-g-r) but not including it in the headers for some reason, you can include it yourself with Header code injection or by adding a stylesheet link after the {squarespace-headers} template tag:

<link href="//static.squarespace.com/combo/yui/?3.10.1/cssgrids-responsive/cssgrids-responsive-min.css" rel="stylesheet" type="text/css">

YUI3 Responsive grids DOCS: http://yuilibrary.com/yui/docs/cssgrids/#responsive

answered Jul 01 '13 at 13:49 by tbartels 33719

Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: Sep 18 '12 at 15:30

Seen: 3,790 times

Last updated: Feb 21 '14 at 18:03

Established 2004 Handmade in NYC