persistentgrid 0.0.1.beta.1

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

@@ -0,0 +1,395 @@
+// /**
+//  * 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 reset-baseline
+//  ==========================================================================
+@mixin reset-baseline
+{
+	/*
+	 * IE 6 refuses to resize fonts set in pixels and it weirdly resizes fonts
+	 * whose root is set in ems. So we set the root font size in percentages of
+	 * the default font size.
+	 */
+
+	* html {
+		font-size: 100% * $base-font-size / $browser-default-font-size;
+	}
+
+	/*
+	 * Set the font properties on the html tag.
+	 */
+
+	html {
+		$fs: px-to-relative-font-size($base-font-size, $browser-default-font-size);
+		$lh: px-to-relative-line-height($base-line-height, $base-font-size);
+		@include font($type-default, $fs, $lh);
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin reset-html-background
+//  ==========================================================================
+@mixin reset-html-background($color-background: $color-background)
+{
+	/*
+	 * It's good practice to set the background color of the html tag
+	 */
+	
+	background-color: $color-background;
+}
+
+
+//  ==========================================================================
+//  Mixin reset-box-sizing
+//  ==========================================================================
+@mixin reset-box-sizing
+{
+	/*
+	 * Reset to box-sizing to border-box
+	 */
+
+	@include box-sizing(border-box);
+}
+
+
+//  ==========================================================================
+//  Mixin reset-text-rendering
+//  ==========================================================================
+@mixin reset-text-rendering
+{
+	/*
+	 * See: http://www.usabilitypost.com/2012/11/06/optimize-legibility/
+	 */
+	
+	text-rendering: optimizeLegibility;
+
+	/*
+	 * Prevents the browser from using synthesized font-weights.
+	 */
+
+	font-synthesis: none;
+
+	// @todo: these next two settings influences the appearance and should be moved to Base
+
+	/*
+	 * See: http://meyerweb.com/eric/css/tests/css3/font-variant-ligatures.html
+	 */
+
+	font-variant-ligatures: common-ligatures;
+
+	/*
+	 * See: http://meyerweb.com/eric/css/tests/css3/font-variant-numeric.html
+	 */
+
+	font-variant-numeric: oldstyle-nums diagonal-fractions;
+}
+
+
+//  ==========================================================================
+//  Mixin reset-html5
+//  ==========================================================================
+@mixin reset-html5
+{
+	/**
+	 * Correct `block` display not defined in IE 8/9.
+	 */
+
+	article,
+	aside,
+	details,
+	figcaption,
+	figure,
+	footer,
+	header,
+	hgroup,
+	main,
+	nav,
+	section,
+	summary {
+	    display: block;
+	}
+
+	/**
+	 * Correct `inline-block` display not defined in IE 8/9.
+	 */
+
+	audio,
+	canvas,
+	video {
+	    display: inline-block;
+	}
+
+	/**
+	 * Prevent modern browsers from displaying `audio` without controls.
+	 * Remove excess height in iOS 5 devices.
+	 */
+
+	audio:not([controls]) {
+	    display: none;
+	    height: 0;
+	}
+
+	/**
+	 * Address `[hidden]` styling not present in IE 8/9.
+	 * Hide the `template` element in IE, Safari, and Firefox < 22.
+	 */
+
+	[hidden],
+	template {
+	    display: none;
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin reset-ios
+//  ==========================================================================
+@mixin reset-ios
+{
+	/**
+	 * Prevent iOS text size adjust after orientation change, 
+	 * without disabling user zoom.
+	 */
+
+	-ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+
+//  ==========================================================================
+//  Mixin reset-anchor
+//  ==========================================================================
+@mixin reset-anchor
+{
+	/**
+	 * 1. Remove the gray background color from active links in IE 10.
+ 	 * 2. Address `outline` inconsistency between Chrome and other browsers.
+ 	 * 3. Improve readability when focused and also mouse hovered in all browsers.
+	 */
+
+	a {
+	    background: transparent; /* 1 */
+	    &:focus {
+	    	outline: thin dotted; /* 2 */
+	    }
+	    &:active,
+	    &:hover {
+	    	outline: 0; /* 3 */
+	    }
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin reset-media
+//  ==========================================================================
+@mixin reset-media
+{
+	/**
+	 * Remove border when inside `a` element in IE 8/9.
+	 */
+	
+	img {
+		border: 0;
+	}
+
+	/**
+	 * Correct overflow displayed oddly in IE 9.
+	 */
+
+	svg:not(:root) {
+	    overflow: hidden;
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin reset-list-style
+//  ==========================================================================
+@mixin reset-list-style
+{
+	/*
+	 * Render lists without list style
+	 */
+
+    list-style: none;
+}
+
+
+//  ==========================================================================
+//  Mixin reset-table
+//  ==========================================================================
+@mixin reset-table
+{
+	/**
+	 * Remove most spacing between table cells.
+	 */
+
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+//  ==========================================================================
+//  Mixin reset-table-cell
+//  ==========================================================================
+@mixin reset-table-cell
+{
+	/**
+	 * 1. Align all content to the left.
+	 * 2. Set font-weight to default font and weight
+	 * 3. Re-align vertically
+	 */
+
+	text-align: left; /* 1 */
+	@include font-weight($type-default); /* 2 */
+	vertical-align: middle; /* 3 */
+}
+
+
+//  ==========================================================================
+//  Mixin reset-input
+//  ==========================================================================
+@mixin reset-input
+{
+	/**
+	 * 1. Prepare for easy styling
+	 * 2. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+	 * 3. Correct font family not being inherited in all browsers.
+	 * 4. Correct font size not being inherited in all browsers.
+	 */
+
+	button,
+	input,
+	select,
+	textarea {
+		display: inline-block; /* 1 */
+		@include box-sizing(border-box); /* 1 */
+	    margin: 0; /* 2 */
+	    font-family: inherit; /* 3 */
+	    font-size: 100%; /* 4 */
+	}
+
+	/**
+	 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+	 * the UA stylesheet.
+	 */
+
+	button,
+	input {
+	    line-height: inherit;
+	}
+
+	/**
+	 * Address inconsistent `text-transform` inheritance for `button` and `select`.
+	 * All other form control elements do not inherit `text-transform` values.
+	 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+	 * Correct `select` style inheritance in Firefox 4+ and Opera.
+	 */
+
+	button,
+	select {
+	    text-transform: none;
+	}
+
+	/**
+	 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+	 *    and `video` controls.
+	 * 2. Correct inability to style clickable `input` types in iOS.
+	 * 3. Improve usability and consistency of cursor style between image-type
+	 *    `input` and others.
+	 */
+
+	button,
+	html input[type="button"], /* 1 */
+	input[type="reset"],
+	input[type="submit"] {
+	    -webkit-appearance: button; /* 2 */
+	    cursor: pointer; /* 3 */
+	}
+
+	/**
+	 * Re-set default cursor for disabled elements.
+	 */
+
+	button[disabled],
+	html input[disabled] {
+	    cursor: default;
+	}
+
+	/**
+	 * 1. Address box sizing set to `content-box` in IE 8/9.
+	 * 2. Remove excess padding in IE 8/9.
+	 */
+
+	input[type="checkbox"],
+	input[type="radio"] {
+	    box-sizing: border-box; /* 1 */
+	    padding: 0; /* 2 */
+	}
+
+	/**
+	 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+	 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+	 *    (include `-moz` to future-proof).
+	 */
+
+	input[type="search"] {
+	    -webkit-appearance: textfield; /* 1 */
+	    // @include box-sizing(content-box); /* 2 */
+	}
+	
+	/**
+	 * Remove inner padding and search cancel button in Safari 5 and Chrome
+	 * on OS X.
+	 */
+
+	input[type="search"]::-webkit-search-cancel-button,
+	input[type="search"]::-webkit-search-decoration {
+	    -webkit-appearance: none;
+	}
+	
+	/**
+	 * Remove inner padding and border in Firefox 4+.
+	 */
+
+	button::-moz-focus-inner,
+	input::-moz-focus-inner {
+	    border: 0;
+	    padding: 0;
+	}
+
+	/**
+	 * 1. Remove default vertical scrollbar in IE 8/9.
+	 * 2. Improve readability and alignment in all browsers.
+	 */
+
+	textarea {
+	    overflow: auto; /* 1 */
+	    vertical-align: top; /* 2 */
+	}
+}
+
+
+//  ==========================================================================
+//  Mixin reset-quotation
+//  ==========================================================================
+@mixin reset-quotation
+{
+	/**
+	 * 1. Strip quotes.
+	 * 2. Some browsers do not support the quote attribute.
+	 */
+
+	quotes: none;
+	&:before, &::after {
+		content: ""; /* 2 */
+		content: none; /* 2 */
+	}
+}

data/scss/pg/base/typography/_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 "settings";
+@import "helpers";
+@import "behavior";

data/scss/pg/base/typography/_behavior.scss

@@ -0,0 +1,31 @@
+// /**
+//  * 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'; }
+
+
+@if $debug-baseline {
+	html {
+		@extend %debug;			
+	}
+}
+
+%debug {
+	/*
+	 * Mixin debug-rhythm to display the vertical rhythm units
+	 */
+	@include debug-rhythm;
+}
+
+
+// @todo: styles for webfont loader states
+%is-wf-loading {
+
+}
+%is-wf-active {
+
+}
+%is-wf-inactive {
+	
+}

data/scss/pg/base/typography/_helpers.scss

@@ -0,0 +1,7 @@
+// /**
+//  * 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/all";

data/scss/pg/base/typography/_settings.scss

@@ -0,0 +1,52 @@
+// /**
+//  * 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'; }
+
+
+// 	================================================================================================================================
+// 	Typography settings
+// 	================================================================================================================================
+
+	$base-font-size: 16px !default;
+	$base-line-height: 24px !default; // 1.5*16px
+
+	$type-default: $serif-regular !default;
+	$type-heading: $sans-serif-regular !default;
+
+
+// 	================================================================================================================================
+// 	Baseline settings (Vertical Rhythm)	
+// 	--------------------------------------------------------------------------------------------------------------------------------
+//  For more information, see: http://compass-style.org/reference/compass/Type/vertical_rhythm/
+// 	================================================================================================================================
+
+	$browser-default-font-size: $browser-default-font-size !default;
+	// Default = 16px
+
+	$default-rhythm-border-style: solid !default;
+	// Set the default border style for rhythm borders.
+	
+	$relative-font-sizing: true !default;
+	// Set to false if you want to use absolute pixels in sizing your Type.
+	
+	$round-to-nearest-half-line: false !default;
+	// Allows the adjust-font-size-to mixin and the lines-for-font-size function to round the line height to the nearest half line height instead of the nearest integral line height to avoid large spacing between lines.
+	
+	$min-line-padding: 2px !default;
+	// Ensure there is at least this many pixels of vertical padding above and below the text.
+	
+	$font-unit: 1em !default;
+	// $base-font-size but in your output unit of choice. Defaults to 1em when $relative-font-sizing is true.
+	
+	$leading-unit: 1em !default;
+	// $base-line-height but in your output unit of choice. Defaults to 1em when $relative-font-sizing is true.
+
+	// Rem is xperimental and not yet implemented
+	$use-rem-for-sizing: false !default;
+	$font-unit: if($use-rem-for-sizing, 1rem, $font-unit) !default;
+	$leading-unit: if($use-rem-for-sizing, 1rem, $leading-unit) !default;
+
+	// Debugging
+	$debug-baseline: false !default;

data/scss/pg/base/typography/helpers/_all.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 "functions";
+@import "mixins";

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

@@ -0,0 +1,160 @@
+// /**
+//  * 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 px-to-relative-font-size
+//  --------------------------------------------------------------------------
+//  Placeholder function for font-sizes.
+//	Inserts correct font unit as set in the Vertical-Rhythm module settings.
+//  --------------------------------------------------------------------------
+//  @param (string) $target-px (value in px)
+//  @param (string) $context (value in px)
+//  @param (string) $unit (unit of output)
+//  @return (string) value in alternate unit
+//  ==========================================================================
+@function px-to-relative-font-size($target-px, $context: $base-font-size, $unit: $font-unit)
+{
+	@return px-to-relative-size($target-px, $context, $unit);
+}
+
+
+//  ==========================================================================
+//  Function px-to-relative-line-height
+//  --------------------------------------------------------------------------
+//  Placeholder function for line-heights.
+//	inserts correct line-height unit as set in the Vertical-Rhythm module settings.
+//  --------------------------------------------------------------------------
+//  @param (string) $target-px (value in px)
+//  @param (string) $context (value in px)
+//  @param (string) $unit (unit of output)
+//  @return (string) value in alternate unit
+//  ==========================================================================
+@function px-to-relative-line-height($target-px, $context: $base-font-size, $unit: $leading-unit)
+{
+	@return px-to-relative-size($target-px, $context, $unit);
+}
+
+
+//  ==========================================================================
+//  Function extract-type-style
+//  --------------------------------------------------------------------------
+//  Extract the style property from a type array
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  @return (string) font-style
+//  ==========================================================================
+@function extract-type-style($type) {
+	@return nth($type, 1);
+}
+
+
+//  ==========================================================================
+//  Function extract-type-variant
+//  --------------------------------------------------------------------------
+//  Extract the variant property from a type array
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  @return (string) font-variant
+//  ==========================================================================
+@function extract-type-variant($type)
+{
+	@return nth($type, 2);
+}
+
+
+//  ==========================================================================
+//  Function extract-type-weight
+//  --------------------------------------------------------------------------
+//  Extract the weight property from a type array
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  @return (string) font-weight
+//  ==========================================================================
+@function extract-type-weight($type)
+//  ==========================================================================
+{
+	@return nth($type, 3);
+}
+
+
+//  ==========================================================================
+//  Function extract-type-family
+//  --------------------------------------------------------------------------
+//  Extract the family property from a type array
+//  --------------------------------------------------------------------------
+//  @param (array) $type (a valid type array: $style, $variant, $weight, $family)
+//  @return (string) font-family
+//  ==========================================================================
+@function extract-type-family($type)
+{
+	@return nth($type, 4);
+}
+
+
+//  ==========================================================================
+//  Function weight-number-to-string
+//  --------------------------------------------------------------------------
+//  Converts a weight number to a string and returns it
+//  --------------------------------------------------------------------------
+//  @param (integer) $weight a valid weight number: 100 through 900)
+//  @return (string) weight
+//  ==========================================================================
+@function weight-number-to-string($weight)
+{
+	@if $weight == 100 { @return "ultra-light"; }
+	@if $weight == 200 { @return "light"; }
+	@if $weight == 300 { @return "book"; }
+	@if $weight == 400 { @return "regular"; }
+	@if $weight == 500 { @return "medium"; }
+	@if $weight == 600 { @return "semi-bold"; }
+	@if $weight == 700 { @return "bold"; }
+	@if $weight == 800 { @return "extra-bold"; }
+	@if $weight == 900 { @return "heavy"; }
+	@else {
+		@warn "Not a valid weight";
+		@return false;
+	}
+}
+
+//* To Do: (everything below needs to be looked over as settings in the Type modules have changed)
+
+// //* Calculate the optimal line-height */
+// @function leading-in-px($base-font-size, $balance-over: false) {
+
+// 	$dividend: $base-font-size / $base-line-height;
+// 	$leading: $base-line-height;
+
+// 	// For smaller font-sizes, for instance balance a font-size of 8px over two baselines of 24px in three (balance) lines resulting in 48/3=16px;
+// 	@if $balance-over {
+// 		$leading: 2 * $base-line-height / $balance-over;		
+// 		@return $leading;
+// 	}
+// 	@if $dividend<0.5 {
+// 		$leading: 0.5 * $base-line-height;
+// 		@return $leading;
+// 	}
+// 	@if $dividend>1 {
+// 		$leading: ceil($dividend) * $base-line-height;
+// 		@if ($leading - $base-font-size) < (2 * $min-line-padding) {
+// 			$leading: $leading + $base-line-height;
+// 		}
+// 		@return $leading;
+// 	}
+// 	@else {
+// 		@return $leading;		
+// 	}
+// }
+
+// @function px-to-rhythm($value) {
+// 	@return $value/$base-line-height;
+// }
+
+// @function base-line-rhythm($base-lines: 1) {
+// 	// @debug $base-lines;
+// 	// @debug $base-line-height;
+// 	@return ($base-lines * $base-line-height);
+// }