1

Using Susy via CodeKit, I run into a strange situation:

If I use:

.example { @include span (first); }

or

.example { @include span (last); }

Susy works as expected according to the documents. However, when using e.g.

.example { @include span (4 at 5 of 12); }

a 4 column box is made, but it is not placed in column 5, but simply floating left.

However, when using e.g. .example { @include span (3 at 8 of 12); }

the box is 3 columns, as expected, but starts floating right instead of in column 8. In other words, placing an element in a certain column doesn't work. Replacing the susy mixin with a simple margin-left works fine, but that isn't the purpose of using a grid system like Susy.

I have contacted the developer of CodeKit, but he doesn't think it's a CodeKit problem with Susy. I have tested it using the code of some online classes and it remains working oddly.

What can this be? Are there any prerequisites to placing elements in a certain column using Susy? Do I miss something here?

Ivar
  • 11
  • 2

1 Answers1

3

The at keyword is for use with isolation output. You can turn on isolation globally, if you want, but it adds some bulk to the output, and changes the way elements flow in a layout. Without isolation, Susy has no way of knowing anything about your DOM tree, or where an element lands in the default flow, or how to push it back and forth into place — so you need to set that explicitly in relation to the default, using the margin mixins (pre/post/push/pull).

[at is also used for asymmetrical grids, but it solves a different problem in that case.]

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • This has been befuddling me for ages. It seemed like isolation was adding bulk. Susy documentation isn't explicitly clear or ... I didn't read it clearly. thanks! – icicleking Aug 26 '15 at 14:56
  • Yes, isolation is very bulky, which is why I don't recommend it as a global setting. – Miriam Suzanne Aug 27 '15 at 21:26