Remove indentation for Gumby Fancy Tiles

A great feature of the Gumby Framework is its ability to easilycreate responsive tiles. They call those Fancy Tiles. For example you can use the following mixin to create a equally distributed grid with 5 columns on a desktop, 3 on a tablet and 2 on a mobile screen.

ul.fancy { 
  @include fancytiles (5,3,2);
}

What kept bugging me with that is that each tile gets a padding on both its left and the right side. This makes the entire Fancy Tiles show up indented compared to the columns of Gumby's regular grid system.

To get rid of that indentation and align my Fancy Grids with the rest of the page layout I forked _fancytiles.scss and called it _fancytilesoutside.scss. Opposed to the original Fancy Tiles it must be applied to the container of your tiles, eg the <ul> tag if your <li>s are supposed to be tiled. Triggering the outer elmenet allows us to apply a negative margin on the left and right side that is of the exact size as the tile's padding, thus pulling the entire tile set outside. Then the styling of the tiles themselves happens by applying the original fancytiles scss to every direct descendant of the container.

@function divide-cols($colnum) {
  @return 100%/$colnum;
}

@mixin fancytilesoutside($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
  margin-left: -$gutter / 2;
  margin-right: -$gutter / 2;
  > *{
    // These styles apply to all shift-columns
    display: inline-block;
    float: left;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;

    // IE8 fallback
    width: divide-cols($mobile-columns);

    @include respond("min-width: #{$small-break}") {
      width: divide-cols($mobile-columns);
    }

    @include respond("min-width: #{$medium-break}") {
      width: divide-cols($tablet-columns);
    }

    @include respond("min-width: #{$large-break}") {
      width: divide-cols($desktop-columns);
    }
  }
}

Update

The following mixin will work with later versions of Gumby (my current project runs on 2.6.3). The renaming of the mixin to fancytilesunindented is only for aesthetic reasons.

@function divide-cols($colnum) {
  @return 100%/$colnum;
}

@mixin fancytilesunindented($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
  clear: both;
  margin-left: -$gutter / 2;
  margin-right: -$gutter / 2;
  overflow: hidden;
  > *{
    // These styles apply to all shift-columns
    display: inline-block;
    float: left;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;

    // IE8 fallback
    width: divide-cols($mobile-columns);

    @include respond("min-width: #{$small-break}") {
      width: divide-cols($mobile-columns);
    }

    @include respond("min-width: #{$medium-break}") {
      width: divide-cols($tablet-columns);
    }

    @include respond("min-width: #{$large-break}") {
      width: divide-cols($desktop-columns);
    }
  }
}

Need a great new website or a helping hand with Drupal? Head over to www.klickreflex.de or contact me directly to see if we can work something out.