persistentgrid 0.0.1.beta.1

data/scss/pg/base/typography/helpers/_mixins.scss

@@ -0,0 +1,121 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//  ==========================================================================
+//  Mixin font
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  @param (string) $base-font-size (a valid value in your unit of output)
+//  @param (string) $base-line-height (a valid value in your unit of output)
+//  ==========================================================================
+@mixin font($type, $base-font-size:$base-font-size, $base-line-height:$base-line-height)
+{
+	@if $type {
+		$font-style 	:   nth($type,1);
+		$font-variant 	:	nth($type,2);
+		$font-weight 	:	nth($type,3);
+		$font-family 	:	nth($type,4);
+
+		font: #{$font-style} #{$font-variant} #{$font-weight} #{$base-font-size}/#{$base-line-height} #{$font-family};
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin font-style
+//  --------------------------------------------------------------------------
+//  Extracts the style from a type array and mixes in font-style
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  ==========================================================================
+@mixin font-style($type)
+{
+	font-style: nth($type,1);
+}
+
+
+//  ==========================================================================
+//  Mixin font-variant
+//  --------------------------------------------------------------------------
+//  Extracts the variant from a type array and mixes in font-variant
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  ==========================================================================
+@mixin font-variant($type)
+{
+	font-variant: nth($type,2);
+}
+
+
+//  ==========================================================================
+//  Mixin font-weight
+//  --------------------------------------------------------------------------
+//  Extracts the weight from a type array and mixes in font-weight
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  ==========================================================================
+@mixin font-weight($type)
+{
+	font-weight: nth($type,3);
+}
+
+
+//  ==========================================================================
+//  Mixin font-family
+//  --------------------------------------------------------------------------
+//  Extracts the family from a type array and mixes in font-family
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  ==========================================================================
+@mixin font-family($type)
+{
+	font-family: nth($type,4);
+}
+
+
+//  ==========================================================================
+//  Mixin debug-rhythm
+//  --------------------------------------------------------------------------
+//  Renders the baseline rhythm
+//  ==========================================================================
+@mixin debug-rhythm
+{
+	$to: transparent;
+	$from: rgba(226, 255, 255, .5);
+	background-image: -webkit-linear-gradient($from 50%, $to 50%);
+	background-image: linear-gradient($from 50%, $to 50%);
+	background-size: rhythm(2) rhythm(2);
+	* { background-color: transcontainer !important; background-image: none !important; outline: rgba(255,0,255,.1) dotted 1px; outline: lighten( rgb(255,0,255), .1 ) dotted 1px \9; }
+}
+
+
+//  ==========================================================================
+//  Mixin font-size-rhythm
+//  --------------------------------------------------------------------------
+//  Takes a size in any value and tries to calculate it back to the desired font-unit
+//  ==========================================================================
+@mixin font-size($value, $context: $base-font-size)
+{
+	$unit: unit($value);
+
+	@if $unit=="px" {
+	}
+	@if $unit=="rem" {
+		// Convert to pixels
+	}
+	@if $unit=="em" {
+		// Convert to pixels
+	}
+	@if $unit=="%" {
+		// Convert to pixels
+	}
+	@if $unit=="pt" {
+		// Convert to pixels
+	}
+
+	font-size: px-to-relative-size($value);
+}

data/scss/pg/grid/_all.scss

@@ -0,0 +1,9 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+@import "helpers";
+@import "settings";
+@import "behavior";

data/scss/pg/grid/_behavior.scss

@@ -0,0 +1,51 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+#{$root-selector} {
+	@include root();
+}
+
+#{$column-selector} {
+	@include column-behavior();
+	@include column-spacing();
+}
+
+#{$column-selector}-container {
+	@include column-behavior();
+}
+
+#{$column-selector}-padding {
+	@include column-spacing();
+}
+
+.bleed {
+	@include bleed(); 
+}
+
+.full {
+	@include column-width(1/1);
+}
+
+// Roll out the required columns
+@each $fraction in $column-widths {
+	$name: fraction-to-text($fraction);
+	@if $name {
+		.#{$name} {
+			@include column-width($fraction);
+		}
+		.#{$name}.persistent {
+			@include column-width($fraction, true);
+		}
+		// Source Ordering
+		.push-#{$name} {
+			@include push($fraction);
+		}
+		// Source Ordering
+		.pull-#{$name} {
+			@include pull($fraction);
+		}
+	}
+}

data/scss/pg/grid/_helpers.scss

@@ -0,0 +1,8 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+@import "helpers/functions";
+@import "helpers/mixins";

data/scss/pg/grid/_settings.scss

@@ -0,0 +1,48 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//	BASE SETTINGS
+// 	================================================================================================================================
+// 	Required settings for a stand-alone implementation of the grid
+// 	================================================================================================================================
+
+	$base-line-height: 24px !default;
+	// $base-line-height is used to calculate the column spacing
+
+	$apply-border-box: false !default;
+	// When using the grid stand-alon, $reset-box-model should be set to true,
+	// unless you plan to wrap your columns in a padded container for compatibility 
+	// with Microsoft Explorer <8 and Opera <10.
+
+
+//	ROOT SETTINGS
+// 	================================================================================================================================
+// 	Set a max width on a root container of your choice, the content will not stretch beyond this width.
+//	The root container can be positioned left or center, for alternate position you can provide your own behavior.
+// 	================================================================================================================================
+	$root-selector: ".root" !default;
+	$root-max-width: 1152px !default;
+	$root-position: center !default;
+
+
+//	COLUMN SETTINGS
+// 	================================================================================================================================
+// 	Set a max width on a root container of your choice, the content will not stretch beyond this width.
+//	The root container can be positioned left or center, for alternate position you can provide your own behavior.
+// 	================================================================================================================================
+	$column-selector: ".column" !default;
+	$column-spacing: 2*$base-line-height !default;
+	$column-spacing-unit: 1px; // Revisit this, looks redundant
+	$column-spacing-perstistent: false !default;
+	$column-widths: 1/2, 1/4, 1/3, 2/3, 3/4 !default; // Omit 1/1, it is rendered by default
+	$column-width-default: 1/1 !default;
+	$column-breakpoint: false !default;
+	$column-float: false !default; // If you prefer floated columns instead of inline-blocks, set to true.
+
+	$negative-right-margin: false !default;
+	// If you cannot control your markup, you can assign a negative right margin to close gaps between columns to make tem fit
+	// This is a hack and not nescessary when your html (or column markup) is minimized.

data/scss/pg/grid/helpers/_functions.scss

@@ -0,0 +1,140 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//  ==========================================================================
+//  Function horizontal-rhythm
+//  --------------------------------------------------------------------------
+//  Calculates a value based on the $column-spacing
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  ==========================================================================
+@function horizontal-rhythm($fraction: 1/2)
+{
+	$value: return-unitless( $fraction * $column-spacing );
+
+	@if $column-spacing-unit == 1rem {
+		@return $value/10*1rem;
+	}
+	@if $column-spacing-unit == 1em {
+		@return $value/$base-font-size*1em;
+	}
+	@if $column-spacing-unit == 1px {
+		@return $value*1px;
+	}
+	@if $column-spacing-unit == 1% {
+		@return $value/$base-font-size*1em;
+	}
+}
+
+
+//  ==========================================================================
+//  Function fraction-to-percentage
+//  --------------------------------------------------------------------------
+//  Convert a fraction to a percentage
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  ==========================================================================
+@function fraction-to-percentage($fraction: 1/3)
+{
+	@return $fraction*100%;
+}
+
+
+//  ==========================================================================
+//  Function fraction-to-text
+//  --------------------------------------------------------------------------
+//  Convert a fraction to a word.
+//  Use to build style rules based on column widths.
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  ==========================================================================
+@function fraction-to-text($fraction)
+{
+	@if $fraction ==  1/1  { @return "full"; }
+	@if $fraction ==  1/2  { @return "half"; }
+	@if $fraction ==  1/3  { @return "third"; }
+	@if $fraction ==  1/4  { @return "fourth"; }
+	@if $fraction ==  1/5  { @return "fifth"; }
+	@if $fraction ==  1/6  { @return "sixth"; }
+	@if $fraction ==  1/7  { @return "seventh"; }
+	@if $fraction ==  1/8  { @return "eighth"; }
+	@if $fraction ==  1/9  { @return "ninth"; }
+	@if $fraction ==  1/10 { @return "tenth"; }
+	@if $fraction ==  1/11 { @return "eleventh"; }
+	@if $fraction ==  1/12 { @return "twelfth"; }
+	@if $fraction ==  1/13 { @return "thirteenth"; }
+	@if $fraction ==  1/14 { @return "fourteenth"; }
+	@if $fraction ==  1/15 { @return "fifteenth"; }
+	@if $fraction ==  1/16 { @return "sixteenth"; }
+	@if $fraction ==  2/3  { @return "two-third"; }
+	@if $fraction ==  3/4  { @return "three-fourth"; }
+	@if $fraction ==  2/5  { @return "two-fifth"; }
+	@if $fraction ==  3/5  { @return "three-fifth"; }
+	@if $fraction ==  4/5  { @return "four-fifth"; }
+	@if $fraction ==  5/6  { @return "five-sixth"; }
+	@if $fraction ==  2/7  { @return "two-seventh"; }
+	@if $fraction ==  3/7  { @return "three-seventh"; }
+	@if $fraction ==  4/7  { @return "four-seventh"; }
+	@if $fraction ==  5/7  { @return "five-seventh"; }
+	@if $fraction ==  6/7  { @return "six-seventh"; }
+	@if $fraction ==  3/8  { @return "three-eighth"; }
+	@if $fraction ==  5/8  { @return "five-eighth"; }
+	@if $fraction ==  7/8  { @return "seven-eighth"; }
+	@if $fraction ==  2/9  { @return "two-ninth"; }
+	@if $fraction ==  4/9  { @return "four-ninth"; }
+	@if $fraction ==  5/9  { @return "five-ninth"; }
+	@if $fraction ==  7/9  { @return "seven-ninth"; }
+	@if $fraction ==  8/9  { @return "eight-ninth"; }
+	@if $fraction ==  3/10 { @return "three-tenth"; }
+	@if $fraction ==  7/10 { @return "seven-tenth"; }
+	@if $fraction ==  9/10 { @return "nine-tenth"; }
+	@if $fraction ==  2/11 { @return "two-eleventh"; }
+	@if $fraction ==  3/11 { @return "three-eleventh"; }
+	@if $fraction ==  4/11 { @return "four-eleventh"; }
+	@if $fraction ==  5/11 { @return "five-eleventh"; }
+	@if $fraction ==  6/11 { @return "six-eleventh"; }
+	@if $fraction ==  7/11 { @return "seven-eleventh"; }
+	@if $fraction ==  8/11 { @return "eight-eleventh"; }
+	@if $fraction ==  9/11 { @return "nine-eleventh"; }
+	@if $fraction == 10/11 { @return "ten-eleventh"; }
+	@if $fraction ==  5/12 { @return "five-twelfth"; }
+	@if $fraction ==  7/12 { @return "seven-twelfth"; }
+	@if $fraction ==  9/12 { @return "nine-twelfth"; }
+	@if $fraction == 11/12 { @return "eleven-twelfth"; }
+	@if $fraction ==  2/13 { @return "two-thirteenth"; }
+	@if $fraction ==  3/13 { @return "three-thirteenth"; }
+	@if $fraction ==  4/13 { @return "four-thirteenth"; }
+	@if $fraction ==  5/13 { @return "five-thirteenth"; }
+	@if $fraction ==  6/13 { @return "six-thirteenth"; }
+	@if $fraction ==  7/13 { @return "seven-thirteenth"; }
+	@if $fraction ==  8/13 { @return "eight-thirteenth"; }
+	@if $fraction ==  9/13 { @return "nine-thirteenth"; }
+	@if $fraction == 10/13 { @return "ten-thirteenth"; }
+	@if $fraction == 11/13 { @return "twelve-thirteenth"; }
+	@if $fraction == 12/13 { @return "thirteen-thirteenth"; }
+	@if $fraction ==  3/14 { @return "three-fourteenth"; }
+	@if $fraction ==  5/14 { @return "five-fourteenth"; }
+	@if $fraction ==  9/14 { @return "nine-fourteenth"; }
+	@if $fraction == 11/14 { @return "eleven-fourteenth"; }
+	@if $fraction == 13/14 { @return "thirteen-fourteenth"; }
+	@if $fraction ==  2/15 { @return "two-fifteenth"; }
+	@if $fraction ==  4/15 { @return "four-fifteenth"; }
+	@if $fraction ==  7/15 { @return "seven-fifteenth"; }
+	@if $fraction ==  8/15 { @return "eight-fifteenth"; }
+	@if $fraction == 11/15 { @return "eleven-fifteenth"; }
+	@if $fraction == 13/15 { @return "thirteen-fifteenth"; }
+	@if $fraction == 14/15 { @return "fourteen-fifteenth"; }
+	@if $fraction ==  3/16 { @return "three-sixteenth"; }
+	@if $fraction ==  5/16 { @return "five-sixteenth"; }
+	@if $fraction ==  7/16 { @return "seven-sixteenth"; }
+	@if $fraction ==  9/16 { @return "nine-sixteenth"; }
+	@if $fraction == 11/16 { @return "eleven-sixteenth"; }
+	@if $fraction == 13/16 { @return "thirteen-sixteenth"; }
+	@if $fraction == 15/16 { @return "sixteen-sixteenth"; }
+
+	@return false;
+}

data/scss/pg/grid/helpers/_mixins.scss

@@ -0,0 +1,247 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+
+//  ==========================================================================
+//  Mixin column behavior
+//  --------------------------------------------------------------------------
+//  @param (boolean) $apply-border-box
+//  @param (boolean) $column-float
+//  ==========================================================================
+@mixin column-behavior($apply-border-box: $apply-border-box, $column-float: $column-float)
+{
+	@if $column-float {
+		display: block;
+		float: left;
+	}
+	@else {
+		@include inline-block(top);
+		@if $negative-right-margin {
+			margin-right: $negative-right-margin !important;
+		}
+	}
+
+	@if $apply-border-box {
+		@include box-sizing('border-box');
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin column width
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  @param (boolean) $persistent
+//  ==========================================================================
+@mixin column-width($fraction: $column-width-default, $persistent: false)
+{
+	@if $persistent {
+		width: fraction-to-percentage($fraction) !important;
+	}
+	@else {
+		width: fraction-to-percentage($fraction);
+	}
+	
+	@if $persistent==false and $column-breakpoint {
+		@include breakpoint( $column-breakpoint ) {
+			width: 100%;
+		}
+	}
+
+	// /*
+	//  *Remove negative margin on elements that span full width of their container
+	//  */
+	@if $fraction == 1/1 and $negative-right-margin {
+		margin-right: 0;
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin column spacing
+//  --------------------------------------------------------------------------
+//	Uses padding by default, can be overridden to use margins instead,
+//  this is especially helpful when assigning backgrounds or borders
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  @param (boolean) $use-margin
+//  @param (boolean) $persistent
+//  ==========================================================================
+@mixin column-spacing($fraction: 1/2, $use-margin: false, $persistent: $column-spacing-perstistent)
+{
+	@if ($use-margin) {
+		margin-left: horizontal-rhythm($fraction);
+		margin-right: horizontal-rhythm($fraction);
+		@if $persistent == false {
+			@if $column-breakpoint {
+				@include breakpoint( $column-breakpoint ) {
+					margin-left: horizontal-rhythm($fraction/2);
+					margin-right: horizontal-rhythm($fraction/2);
+				}
+			}
+		}
+	}
+	@else {
+		padding-left: horizontal-rhythm($fraction);
+		padding-right: horizontal-rhythm($fraction);
+		@if $persistent == false {
+			@if $column-breakpoint {
+				@include breakpoint( $column-breakpoint ) {
+					padding-left: horizontal-rhythm($fraction/2);
+					padding-right: horizontal-rhythm($fraction/2);
+				}
+			}
+		}
+	}
+}
+
+
+//  ==========================================================================
+//  Shorthand mixin for column
+//  --------------------------------------------------------------------------
+//	Uses padding by default, can be overridden to use margins instead,
+//  this is especially helpful when assigning backgrounds or borders
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  @param (boolean) $persistent
+//  @param (boolean) $apply-padding
+//  @param (boolean) $apply-margin
+//  ==========================================================================
+@mixin column($fraction: 1/1, $persistent: false, $apply-padding: 1/2, $apply-margin: false)
+{
+	@include column-behavior();
+
+	@include column-width($fraction, $persistent);
+
+	@if $apply-padding {
+		@include column-spacing($apply-padding);			
+	}
+
+	@if $apply-margin {
+		@include column-spacing($apply-margin, true);			
+	}
+}
+
+
+//  ==========================================================================
+//  Shorthand mixin for column
+//  --------------------------------------------------------------------------
+//	Fixes content width and centers in viewport.
+//  --------------------------------------------------------------------------
+//  @param (boolean) $hide-overflow
+//  @param (string) $root-max-width
+//  @param (boolean) $set-display
+//  ==========================================================================
+@mixin root($hide-overflow: true, $root-max-width: $root-max-width, $set-display: false)
+{
+	@if $set-display {
+		display: block;
+	}
+
+	@if $hide-overflow {
+		overflow: hidden;
+	}
+
+	@if $root-position==center {
+		margin: 0 auto;
+	}
+
+	max-width: $root-max-width;
+}
+
+
+//  ==========================================================================
+//  Mixin for column container
+//  --------------------------------------------------------------------------
+//	Use it to remove column spacing on columns
+//  --------------------------------------------------------------------------
+//  @param (boolean) $use-margin
+//  ==========================================================================
+@mixin container-behavior($use-margin: false)
+{
+	@if $use-margin {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	@else {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin for soure ordering
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  ==========================================================================
+@mixin move($fraction)
+{
+	position: relative;
+	left: fraction-to-percentage($fraction);
+}
+
+
+//  ==========================================================================
+//  Mixin for soure ordering
+//	Will reset positioning if $persistent is false
+//
+//  @param (string) $fraction
+//  @param (boolean) $persistent
+//  ==========================================================================
+@mixin push($fraction, $persistent: false)
+{
+	@include move($fraction);
+
+	@if $persistent!=true and $column-breakpoint {
+		@include breakpoint( $column-breakpoint ) {
+			position: static;
+			position: initial;
+		}
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin for soure ordering
+//	Will reset positioning if $persistent is false
+//
+//  @param (string) $fraction
+//  @param (boolean) $persistent
+//  ==========================================================================
+@mixin pull($fraction, $persistent: false)
+{
+	@include move(-1*$fraction);
+
+	@if $persistent!=true and $column-breakpoint {
+		@include breakpoint( $column-breakpoint ) {
+			position: static;
+			position: initial;
+		}
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin to reverse padding on a container
+//  --------------------------------------------------------------------------
+//	Use it to remove padded column spacing on columns
+//  , helpful when nesting columns
+//  --------------------------------------------------------------------------
+//  @param (string) $fraction
+//  @param (boolean) $persistent
+//  ==========================================================================
+@mixin bleed($fraction: -1/2, $persistent: false)
+{
+	@include column-spacing($fraction, true);
+	@if $persistent == false {
+		@if $column-breakpoint {
+			@include breakpoint( $column-breakpoint ) {
+				@include column-spacing($fraction/2, true);
+			}
+		}
+	}
+}

data/scss/pg/helpers/_all.scss

@@ -0,0 +1,11 @@
+// /**
+//  * Copyright (C) 2013 Crossing Hippos - Babs Gösgens. All rights reserved.
+//  * Licensed under GNU General Public License version 2 or later; see LICENSE.txt
+//  */
+@if $trace-imports { @debug 'imported'; }
+
+@import "functions";
+@import "settings";
+@import "mixins";
+@import "colors";
+@import "fonts";