index : livejrnl-builder.git

/*-----------------------------------*\

  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
	<div class="grid__col grid__col--1-of-2">
	  A half-width column.
	</div>cd 
	<div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
	  A quarter, pulled left by its own width. You get this, right?
	</div>
  </div>


  Customisation
  =============

  $toast-grid-namespace and $toast-grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $toast-col-groups(n) adjusts column divisions.
  For example, $toast-col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $toast-gutter-width is—you guessed it—the gutter
  width. Accepts any unit.

  That's it. Have fun.

\*-----------------------------------*/

// Namespaces
// This stops me from being overzealous with enforcing classes
$toast-grid-namespace: "grid" !default;
$toast-grid-column-namespace: "grid__col" !default;

// $col-groups are the column groups you want
// For example, $col-groups: (3, 4, 5) will output:
// .grid__col--n-of-3, .grid__col--n-of-4, [...]
$toast-col-groups: (2, 3, 4, 5, 6, 8, 12) !default;

// Gutter width
$toast-gutter-width: 0px !default;

// Breakpoints
$toast-breakpoint-medium: 700px !default;
$toast-breakpoint-small: 480px !default;

// Pushes and pulls
$toast-pushes: true !default;
$toast-pulls: true !default;

.#{$toast-grid-namespace} {
  list-style: none;
  margin-left: -$toast-gutter-width;
}

%span-all       { width: percentage(1/1); }

%one-half       { width: percentage(1/2); }

%one-third      { width: percentage(1/3); }
%two-thirds     { width: percentage(2/3); }

%one-quarter    { width: percentage(1/4); }
%two-quarters   { width: percentage(2/4); }
%three-quarters { width: percentage(3/4); }

%push-span-all       { margin-left: percentage(1/1); }

%push-one-half       { margin-left: percentage(1/2); }

%push-one-third      { margin-left: percentage(1/3); }
%push-two-thirds     { margin-left: percentage(2/3); }

%push-one-quarter    { margin-left: percentage(1/4); }
%push-two-quarters   { margin-left: percentage(2/4); }
%push-three-quarters { margin-left: percentage(3/4); }

%pull-span-all       { margin-left: -(percentage(1/1)); }

%pull-one-half       { margin-left: -(percentage(1/2)); }

%pull-one-third      { margin-left: -(percentage(1/3)); }
%pull-two-thirds     { margin-left: -(percentage(2/3)); }

%pull-one-quarter    { margin-left: -(percentage(1/4)); }
%pull-two-quarters   { margin-left: -(percentage(2/4)); }
%pull-three-quarters { margin-left: -(percentage(3/4)); }

// For each of our column groups...
@each $group in $toast-col-groups {

  // For each column width from 1 to the column group...
  @for $i from 1 through $group {
	.#{$toast-grid-column-namespace}--#{$i}-of-#{$group} {
	  @if percentage($i/$group) == percentage(1/1) {
		@extend %span-all;
	  } @else if percentage($i/$group) == percentage(1/2) {
		@extend %one-half;
	  } @else if percentage($i/$group) == percentage(1/3) {
		@extend %one-third;
	  } @else if percentage($i/$group) == percentage(2/3) {
		@extend %two-thirds;
	  } @else if percentage($i/$group) == percentage(1/4) {
		@extend %one-quarter;
	  } @else if percentage($i/$group) == percentage(2/4) {
		@extend %two-quarters;
	  } @else if percentage($i/$group) == percentage(3/4) {
		@extend %three-quarters;
	  } @else {

		width: percentage($i/$group);

	  }
	}

	@if ($toast-pushes) {
	  .#{$toast-grid-column-namespace}--push-#{$i}-of-#{$group} {
		@if percentage($i/$group) == percentage(1/1) {
		  @extend %push-span-all;
		} @else if percentage($i/$group) == percentage(1/2) {
		  @extend %push-one-half;
		} @else if percentage($i/$group) == percentage(1/3) {
		  @extend %push-one-third;
		} @else if percentage($i/$group) == percentage(2/3) {
		  @extend %push-two-thirds;
		} @else if percentage($i/$group) == percentage(1/4) {
		  @extend %push-one-quarter;
		} @else if percentage($i/$group) == percentage(2/4) {
		  @extend %push-two-quarters;
		} @else if percentage($i/$group) == percentage(3/4) {
		  @extend %push-three-quarters;
		} @else {

		  margin-left: percentage($i/$group);

		}
	  }
	} // end pushes

	@if ($toast-pulls) {
	  .#{$toast-grid-column-namespace}--pull-#{$i}-of-#{$group} {

		@if percentage($i/$group) == percentage(1/1) {
		  @extend %pull-span-all;
		} @else if percentage($i/$group) == percentage(1/2) {
		  @extend %pull-one-half;
		} @else if percentage($i/$group) == percentage(1/3) {
		  @extend %pull-one-third;
		} @else if percentage($i/$group) == percentage(2/3) {
		  @extend %pull-two-thirds;
		} @else if percentage($i/$group) == percentage(1/4) {
		  @extend %pull-one-quarter;
		} @else if percentage($i/$group) == percentage(2/4) {
		  @extend %pull-two-quarters;
		} @else if percentage($i/$group) == percentage(3/4) {
		  @extend %pull-three-quarters;
		} @else {

		  margin-left: -(percentage($i/$group));

		}
	  }
	} // end pulls
  } // end @for

} // end @each

// All direct descendents of .grid get treated the same way.
// This might be overkill for some, but it's a time-saver for me.
.#{$toast-grid-column-namespace} {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: $toast-gutter-width;
  vertical-align: top;

  @media (max-width: $toast-breakpoint-medium) {
	display: block;
	margin-left: 0;
	margin-right: 0;
	width: auto;
  }

  @media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
	&[class*="#{$toast-grid-column-namespace}--m-"] {
	  display: inline-block;
	  margin-right: -.24em;
	}

	&.#{$toast-grid-column-namespace}--m-1-of-2 {
	  width: percentage(1/2);
	}

	&.#{$toast-grid-column-namespace}--m-1-of-3 {
	  width: percentage(1/3);
	}

	&.#{$toast-grid-column-namespace}--m-2-of-3 {
	  width: percentage(2/3);
	}

	&.#{$toast-grid-column-namespace}--m-1-of-4 {
	  width: percentage(1/4);
	}

	&.#{$toast-grid-column-namespace}--m-2-of-4 {
	  @extend .#{$toast-grid-column-namespace}--m-1-of-2;
	}

	&.#{$toast-grid-column-namespace}--m-3-of-4 {
	  width: percentage(3/4);
	}
  }

  @media (max-width: $toast-breakpoint-small) {
	&[class*="#{$toast-grid-column-namespace}--s-"] {
	  display: inline-block;
	  margin-right: -.24em;
	}

	&.#{$toast-grid-column-namespace}--s-1-of-2 {
	  width: percentage(1/2);
	}

	&.#{$toast-grid-column-namespace}--s-1-of-3 {
	  width: percentage(1/3);
	}

	&.#{$toast-grid-column-namespace}--s-2-of-3 {
	  width: percentage(2/3);
	}

	&.#{$toast-grid-column-namespace}--s-1-of-4 {
	  width: percentage(1/4);
	}

	&.#{$toast-grid-column-namespace}--s-2-of-4 {
	  @extend .#{$toast-grid-column-namespace}--s-1-of-2;
	}

	&.#{$toast-grid-column-namespace}--s-3-of-4 {
	  width: percentage(3/4);
	}
  }
}

// Centers the column in the grid and clears the row of all other columns
.#{$toast-grid-column-namespace}--centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


// Displays the column as the first in its row
.#{$toast-grid-column-namespace}--d-first {
  float: left;
}

// Displays the column as the last in its row
.#{$toast-grid-column-namespace}--d-last {
  float: right;
}

// Removes gutters from the columns
.#{$toast-grid-namespace}--no-gutter {
  margin-left: 0;
  width: 100%;

  .#{$toast-grid-column-namespace} {
	padding-left: 0;
  }

  .#{$toast-grid-column-namespace}--span-all {
	margin-left: 0;
	width: 100%;
  }
}

// Align column to the bottom.
.#{$toast-grid-column-namespace}--ab {
  vertical-align: bottom;
}

// Align column to the middle.
.#{$toast-grid-column-namespace}--am {
  vertical-align: middle;
}