grid.scss

@import "variables";
@import "mixins";

/**
 * Returns the fraction of a nominator and a denominiator expressed as a
 * percentage value. Used to convert pixel values to percentages.
 *
 * @param $nominator
 *   The desired width in pixels.
 * @param $denominator
 *   The total width in pixels.
 *
 * @return
 *   The fraction as a percentage value.
 */
@function fraction($n, $d) {
  @return percentage($n / $d);
}

/**
 * Return the width available for a column taking into account how large the
 * part and what the margin is.
 *
 * @param $fraction
 *   How large the part specified as a decimal fraction.
 * @param $marin
 *   The margin specified as pixel.
 *
 * @return
 *   The available width as a percentage value.
 */
@function gridSliceColumn($fraction, $margin) {
  // Calculate the total margin used.
  $marginTotal: percentage($margin * (1 - $fraction));
  @return percentage($fraction) - $marginTotal;
}

/**
 * Make the element into a sidebar adding width and margins.
 *
 * @param $width
 *   The width specified as a percentage value.
 * @param $location
 *   The direction of the sidebar, either on the left or on the right side.
 * @param $margin
 *   (Optional) The margin specified in pixels. Defaults to $marginLayout.
 */
@mixin gridCreateSidebar($width, $location: left, $margin: $marginLayout) {
  $margin: fraction($margin, $pageWidth);
  // Put the margin of the opposite side of the sidebar location.
  @if $location == left { $location: right }
  @else { $location: left }

  margin-#{$location}: $margin;
  width: ($width - $margin);
}

/**
 * Create all column classes needed to cater the desired parent element size.
 *
 * @param $width
 *   The width of the parent element specified as a percentage.
 * @param $marginFull
 *   The margin used at 100% widths, specified in pixels.
 */
@mixin gridGenerateColumns($width, $marginMax) {
  $marginRelative: $marginMax;
  @if width != 100% {
    // Set the margin relative to the parents width so all margins are the
    // same width.
    $marginRelative: $marginMax / $width;
  }
  .column { margin-left: percentage($marginRelative); }

  .onehalf { width: gridSliceColumn(0.5, $marginRelative); }
  .onethird { width: gridSliceColumn(0.33, $marginRelative); }
  .twothirds { width: gridSliceColumn(0.66, $marginRelative); }
  .onefourth { width: gridSliceColumn(0.25, $marginRelative); }
  .threefourths { width: gridSliceColumn(0.75, $marginRelative); }
}

/**
 * The default margin at 100% express as a percentage value.
 */
$marginDefault: fraction($marginLayout, $pageWidth);

/**
 * Main layout grid
 */
#sidebar_first, #sidebar_second {
  @include inline-block;
  float: left;
}
#sidebar_first {
  @include gridCreateSidebar(25%, left);
}
#sidebar_second {
  @include gridCreateSidebar(33%, right);
  float: right;
}

#main {
  body.one-sidebar &, body.two-sidebars & {
    @include inline-block;
    float: left;
  }
  // The main block should be the leftovers of the two sidebar widths.
  body.sidebar-first & {
    width: 100% - $sidebarFirst;
  }
  body.sidebar-second & {
    width: 100% - $sidebarSecond;
  }
  body.two-sidebars & {
    width: 100% - $sidebarFirst - $sidebarSecond;
  }
}

/**
 * Column grid
 *
 * Columnizer, every column should have the .column class as well as a .sizing
 * class. If there are other children under the parent for the columns one
 * should add the first class ti the first column as well. Otherwise
 * :first-child will take care of it.
 */
body {

  &.no-sidebars {
    @include gridGenerateColumns(100%, $marginDefault);
  }
  &.sidebar-first {
    @include gridGenerateColumns($sidebarFirst, $marginDefault);
  }
  &.sidebar-second {
    @include gridGenerateColumns($sidebarSecond, $marginDefault);
  }
  &.two-sidebars {
    @include gridGenerateColumns($sidebarFirst + $sidebarSecond, $marginDefault);
  }
  // Needs to have body as a parent to override margins.
  .column {
    @include inline-block;
    vertical-align: top;
    float: left;
    &:first-child, &.first {
      margin-left: 0;
    }
  }
}

/**
 * A grid of columns.
 */
// @todo margins are not even with the rest of the layout
.grid {

  &.three li {
    $marginTotal: $marginDefault;
    $marginSide: $marginDefault / 2;

    width: 33.3% - $marginTotal;
    margin-left: $marginSide;
    margin-right: $marginSide;
  }
}

/**
 * Split into two columns with a line separating them in between.
 */
.column.split {
  margin-left:0;
  float: none;
  width: 50% - $marginDefault;
  margin-top: 1em;

  &.first {
    padding-right: $marginDefault;
  }
  &.last {
    margin-left: -1px;
    border-left: solid 1px $black;
    padding-left: $marginDefault;
  }
}