Supply a mixin to generate grid classes for quick prototyping

[timkelty]

Just giving my +1 here.

Having a susy-classes mixin in the core, like in the following example would be a time saver for me.

http://stackoverflow.com/questions/13544180/is-there-any-way-to-generate-grid-classes-for-use-directly-on-the-markup

[mirisuzanne]

It may happen eventually, but it's not high on my priorities right now.

• I don't see any easy way to implement this so it can withstand breakpoints.
• Context adds exponential bloat to the output.
• Susy was designed precisely to give you a better option than classes.

[bigsmile01]

@ericam In the stack overflow link @timkelty posted, there is a mixin that you have written that produces grid classes.

If I create a gird that has six columns, and use that mixin, I get classes such as the following:

span2, span2-1, span2-3, span2-4, span-2-5, span2-6 span3, span3-1, span3-3, span3-4, span-3-5, span3-6 etc

I get the span1, span2 classes etc, but I don't understand the ones that are like span3-1, span2-1, etc How can you have a columns that span 2 in a context of 1?

Also from the mixin you posted is there anyway to streamline it, so it just outputs span-1, span-2, span-3 etc.

Thanks for any help you can offer.

[mirisuzanne]

You could streamline it any number of ways - they all just limit what you can do with it. If you remove context, you wont be able to create nested grids. You could also make sure the context is always larger than the span, as you say. I sometimes do have spans that break out of their context, but it's a bit of an edge case and removing it would cut down on bloat.

// Change this:
@for $context from 1 through $total-columns {...}

// To this:
@for $context from 1 to $span {...}

[bigsmile01]

Thanks for your help! What I would really like to do is eliminate all the context classess (so I am just left with Span-1, Span-2, Span-3 etc);

I have tried modifying the code to do this, but I can't quite get it to work. It just causes all the span classes to end up with 100% width:

@mixin susy-classes($device, $silent: false, $groups: false) {
  $base: if($silent, '%', '.');
  $selector: '#{$base}span';

  @if $silent { #{$selector} { @include span-columns(1); } }
  @else { .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-full { @include span-columns(1); } }

  #{$base}span-full { clear: both; width: 100% }
  body #{$base}span-full-#{$device} { clear: both; width: 100% }
  #{$base}span-omega { @include omega; }
  body #{$base}span-omega-#{$device} { @include omega; }

  @for $span from 1 through $total-columns {
    $span-selector: '#{$selector}-#{$span}';
    @for $context from 1 through $span {
      $total-selector: '#{$span-selector}, body #{$span-selector}-#{$device}';
        #{$total-selector} {
          width: columns($span, $context);
          clear:none;
    }
  }
}
}

Here is the CSS it produces:

 .span-3, body .span-3-mobile {
    width: 388.23529%;
    clear: none; }

  .span-3, body .span-3-mobile {
    width: 159.03614%;
    clear: none; }

  .span-3, body .span-3-mobile {
    width: 100%;
    clear: none; }

In my code I have added a class override for device. That way you can apply span-3-mobile, span-full to an HTML element and it will be displayed as 3 columns on mobile and full on other platforms.

[mirisuzanne]

Sorry, I can't make much sense of this. You need to eliminate the context loop entirely if you don't want context included. Here's the best I can figure out to make it work with different devices/media-queries:

@mixin susy-classes($device, $silent: false) {
  $base: if($silent, '%', '.');
  $selector: '#{$base}span';

  #{$base}container-#{$device} { @include container; }
  %susy-span-base { @include span-columns(1); }
  #{$base}span-full, #{$base}span-full-#{$device} { clear: both; width: 100% }
  #{$base}omega-#{$device} { @include omega; }

  @for $span from 1 to $total-columns {
    #{$selector}-#{$span}-#{$device} {
      @extend %susy-span-base;
      width: columns($span);
    }
  }
}

@include at-breakpoint(4 30em) { @include susy-classes(mobile); }
@include at-breakpoint(30em 8 60em) { @include susy-classes(tablet); }
@include at-breakpoint(60em 12) { @include susy-classes(desktop); }

But using it looks absolutely crazy to me. You really want to litter your markup with this shit?

<div class="container-mobile container-tablet container-desktop">
  <header class="span-full">header</header>
  <div class="nav span-full-mobile span-3-tablet span-3-desktop">nav</div>
  <div class="main span-full-mobile span-5-tablet omega-tablet span-9-desktop omega-desktop">main</div>
  <footer class="span-full">footer</footer>
</div>

Susy allows you to do the same layout with half the css and half the markup - why do this?

[mirisuzanne]

(actually both mentions of %susy-span-base should be %susy-span-base-#{$device} in order to avoid sass deprecation warnings.)

[renatocarvalho]

+1

[mirisuzanne]

This would be pretty simple. We could allow either flat or nested output, with options for classes (.span-x) or placeholders (%span-x), and a way to change the prefix (columns-x, .susy-x, etc).

Patches are welcome! :)

[Newnab]

+1

Your nested output example is very nearly on the money for what I'm looking for out of this (Quick prototyping tools for people who just want to do unsemantic classes to knock something together quickly) - Is there an easy way to add 'last' to that example, so that we can make things fit on one line?

[Newnab]

I think I may have answered my own question - Is it as simple as just adding .last{ @include omega; } ?

:)

[mirisuzanne]

That's it :)