framous 0.2.2 → 0.2.3

data/stylesheets/framous/base/_tables.scss

@@ -0,0 +1,120 @@
+//
+// Tables
+//
+
+table {
+  position: relative;
+  margin-bottom: ms(1);
+  width: 100%;
+  border: 1px solid $border-color;
+}
+
+* html table,
+*:first-child+html table {
+  zoom: 1;
+}
+
+th,
+td {
+  padding: ms(0)/2 ms(0) ms(0)/2 ms(0)/2;
+  border-right: solid 1px $border-color;
+  text-align: left; /* LTR */
+  &:last-child {
+    border-right: 0 none;
+  }
+}
+
+thead {
+  th,
+  td {
+    padding-top: ms(0)/2;
+  }
+}
+
+tfoot {
+  th,
+  td {
+    padding-bottom: ms(0)/2;
+  }
+}
+
+tbody,
+tfoot {
+  th,
+  td {
+    border-top: solid 1px $border-color;
+  }
+}
+
+tr:nth-child(even) td { }
+tbody tr:nth-child(odd) {
+  th,
+  td {
+    background: $background-color;
+  }
+}
+
+tbody {
+  border-top: none;
+}
+
+@include breakpoint($small) {
+
+	table {
+	  position: relative;
+	  display: block;
+	  width: 100%;
+	}
+
+	table thead {
+	  display: block;
+	  float: left;
+
+	  tr th {
+	    border-right: 2px solid $border-color;
+	    border-bottom: 1px solid $border-color;
+	    
+	    &:last-child {
+	      border-right: 2px solid $border-color;
+	      border-bottom: 0 none;
+	    }
+	  }
+	}
+
+	table tbody {
+		display: -webkit-box;
+		overflow-x: auto;
+	}
+	
+	table th,
+	table tr,
+	table td {
+	  display: block;
+	}
+
+	tbody,
+	tfoot {
+	  th,
+	  td {
+	    &:first-child {
+	      border-top: 0 none;
+	    }
+	  }
+	}
+
+	// sort out borders
+	table th {
+		border-bottom: 0;
+	}
+
+	table td {
+		border-right: 0;
+		border-bottom: 0;
+		border-left: 0;
+	}
+	
+	table tbody tr {
+	  border-right: 1px solid $border-color;
+	}
+
+}

data/stylesheets/framous/base/_typography.scss

@@ -0,0 +1,213 @@
+//
+// Typography.scss
+// Base Type Styles Using Modular Scale
+// @credits http://thesassway.com/projects/modular-scale
+// https://github.com/scottkellum/modular-scale
+// Vertical Rhythm : http://drewish.com/tools/vertical-rhythm
+//
+
+@import "compass/typography/vertical_rhythm";
+@import "compass/reset/utilities";
+
+body,div,dl,dt,dd,ul,ol,li,
+h1,h2,h3,h4,h5,h6,
+pre,form,p,blockquote,th,td {
+  margin: 0;
+  padding: 0;
+  font-size: ms(0);
+  direction: $text-direction;
+}
+
+body {
+	position: relative;
+	background: $background-body-color;
+	color: $body-font-color;
+	font-size: ms(0);
+	font-family: $body-font-family;
+	line-height: $base-line-height;
+	-webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  -ms-text-rendering: optimizeLegibility;
+  -o-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  -o-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+// Links : link, visited, hover, active
+a {
+	color: $link-color;
+	text-decoration: none;
+	line-height: inherit;
+	word-wrap: break-word;
+
+	&:visited {
+		color: $link-color-hover;
+	}
+
+	&:hover {
+		color: $link-color-hover;
+	}
+
+	&:active {
+		color: $link-color-hover;
+	}
+
+	&:focus {
+		outline: none;
+		color: $link-color-hover;
+	}
+}
+
+p a,
+p a:visited {
+	line-height: inherit;
+}
+
+p {
+	margin-bottom: ms(1);
+	font-weight: $body-font-weight;
+	font-family: $body-font-family;
+	@include adjust-font-size-to(ms(0));
+}
+
+aside p {
+	font-size: ms(0) - 1;
+	@include adjust-font-size-to(ms(0) - 1);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: ms(0);
+  margin-bottom: ms(0);
+  color: $header-font-color;
+  font-weight: $header-font-weight;
+  font-family: $header-font-family;
+  text-rendering: optimizeLegibility;
+  
+  small {
+  	color: lighten($header-font-color, 30%);
+  	font-size: 75%;
+  	line-height: 0;
+  }
+}
+
+h1 { @include adjust-font-size-to(ms(5)); }
+h2 { @include adjust-font-size-to(ms(4)); }
+h3 { @include adjust-font-size-to(ms(3)); }
+h4 { @include adjust-font-size-to(ms(2)); }
+h5 { @include adjust-font-size-to(ms(1)); }
+h6 { @include adjust-font-size-to(ms(0)); }
+
+hr {
+	clear: both;
+	margin: ms(1) 0 ms(1);
+	height: 0;
+	border: solid #ddd;
+	border-width: 1px 0 0;
+}
+
+em, i {
+	font-style: italic;
+	line-height: inherit;
+}
+
+strong, b {
+	font-weight: bold;
+	line-height: inherit;
+}
+
+small {
+	font-size: 75%;
+	line-height: inherit;
+}
+
+code {
+	background: $highlight-color;
+	font-weight: bold;
+}
+
+// Lists
+ul, ol {
+	margin-bottom: ms(1);
+	margin-left: ms(1);
+	@include adjust-font-size-to(ms(0));
+}
+
+ul {
+  li {
+    ul, ol {
+    	margin-#{$default-float}: ms(1);
+    }
+  }
+}
+
+ol {
+  li {
+    ul, ol {
+    	margin-#{$default-float}: ms(1);
+    }
+  }
+}
+
+nav ul, nav ol,
+.nav li, .nav ol {
+	@include reset-list-style;
+  margin: 0;
+  padding: 0;
+}
+
+// Text Marking
+ins, mark {
+	background-color: $highlight-color;
+  color: invert($highlight-color);
+}
+
+ins {
+	text-decoration: none;
+}
+
+del {
+	text-decoration: line-through;
+}
+
+// Blockquote
+blockquote, blockquote p {
+	color: lighten($header-font-color, 30%);
+	font-style: italic;
+	line-height: 1.5;
+}
+
+blockquote {
+	margin: 0 0 ms(1) ms(1);
+	padding: 0px ms(1) 0 ms(1);
+	border-#{$default-float}: 1px solid $grey-set;
+  
+  cite {
+  	display: block;
+  	color: lighten($header-font-color, 20%);
+  	font-size: ms(0) - 1;
+    
+    &:before {
+    	content: "\2014 \0020";
+    }
+    
+    a, a:visited {
+    	color: lighten($header-font-color, 20%);
+    }
+  }
+}
+
+abbr, acronym {
+	border-bottom: 1px solid $grey-set;
+	color: $header-font-color;
+	text-transform: uppercase !important;
+	font-size: 90%;
+	cursor: help;
+}
+
+abbr {
+	text-transform: none;
+}

data/stylesheets/{_framous-grid.scss → framous/grid/_framous-grid.scss}

@@ -4,6 +4,6 @@
 // Based on http://neat.bourbon.io/ & http://susy.oddbird.net/
 //
 
-@import "framous/grid/settings";
-@import "framous/grid/functions";
-@import "framous/grid/grid";
+@import "settings";
+@import "functions";
+@import "grid";

data/stylesheets/framous/grid/_grid.scss

@@ -8,6 +8,7 @@
 //
 
 @import "compass/css3/box-sizing";
+@import "compass/utilities/general";
 
 // $border-box-sizing: true !default;
 // Makes all elements have a border-box layout

data/stylesheets/framous/grid/_settings.scss

@@ -24,19 +24,19 @@ $default-feature: min-width;
 // @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
 //
 
-// Smartphones (portrait and landscape)
-$phone:							min-device-width 320px max-device-width 479px;
+// Small screens
+$small:							min-width 320px max-width 479px !default;
 // Smartphones (portrait)
-$phone-portrait:		max-width 319px;
+$phone-portrait:		max-device-width 320px !default;
 // Smartphones (landscape)
-$phone-landscape:		min-width 320px max-width 479px;
+$phone-landscape:		max-device-width 480px !default;
 // iPads (portrait and landscape)
-$ipad:							min-device-width 768px;
+$medium:						min-device-width 768px !default;
 // iPads (portrait)
-$ipad-portrait:			min-device-width 768px max-device-width 1024px orientation portrait;
+$ipad-portrait:			max-device-width 768px orientation portrait !default;
 // iPads (landscape)
-$ipad-landscape:		min-device-width 768px max-device-width 1024px orientation landscape;
+$ipad-landscape:		max-device-width 1024px orientation landscape !default;
 // Desktops and laptops
-$desktop:						min-width 1024px;
+$desktop:						min-width 1024px !default;
 // iPhone 4
-$retina:						-webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
+$retina:						-webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5 !default;

data/stylesheets/framous/mixins/_framous-mixins.scss

@@ -0,0 +1,8 @@
+//
+// Framous-mixins.scss
+// Based on http://bourbon.io/
+//
+
+@import "hidpi-media-query";
+@import "linear-gradient";
+@import "position";

data/stylesheets/framous/mixins/_hidpi-media-query.scss

@@ -0,0 +1,14 @@
+//
+// HI DPI Media Query.scss
+//
+
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}

data/stylesheets/framous/mixins/_linear-gradient.scss

@@ -0,0 +1,47 @@
+//
+// Linear Gradient.scss
+//
+
+@mixin linear-gradient($pos, $G1, $G2: false,
+  $G3: false, $G4: false,
+  $G5: false, $G6: false,
+  $G7: false, $G8: false,
+  $G9: false, $G10: false,
+  $deprecated-pos1: left top,
+  $deprecated-pos2: left bottom,
+  $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+    $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+    $pos: top; // Default position
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
+  background-image:     -moz-linear-gradient($pos, $full);
+  background-image:      -ms-linear-gradient($pos, $full);
+  background-image:       -o-linear-gradient($pos, $full);
+  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
+}
+
+
+// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
+// @include linear-gradient(#1e5799, #2989d8);
+// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
+// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
+// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);

data/stylesheets/framous/mixins/_position.scss

@@ -0,0 +1,46 @@
+//
+// Postion.scss
+//
+
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
+    left: $left;
+  }
+}

data/templates/project/_base.scss

@@ -2,41 +2,82 @@
 // Settings.scss
 //
 
-//
-// 1. Responsive Grid
-//
+// Text Direction Settings
+
+$text-direction:				ltr;
+$default-float:					left;
+$default-opposite:			right;
+
+@if $text-direction == ltr {
+  $default-float: left;
+  $default-opposite: right;
+} @else {
+  $default-float: right;
+  $default-opposite: left;
+}
+
+// Responsive Grid
 
 // Column width
 $column: 145px;
 // Gutter between each two columns
-$gutter: 9px;
+$gutter: 36px;
 // Total number of columns in the grid (Total Columns For Main Container)
 $grid-columns: 12;
 // Max-width of the outer container
 $max-width: 1024px;
 // Makes all elements have a border-box layout
 $border-box-sizing: true;
-// Default @media feature for the breakpoint() mixin
-$default-feature: min-width;
 
-//
-// 2. Responsive Breakpoints
-// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
-//
+// Colors Settings
+// Branding Colors
+
+$white-set:							#fff;
+$blue-set:							#174374;
+$grey-set:							#808080;
+$grey-dark-set:					#333;
+$black-set:							#000;
+
+$background-body-color:	$white-set;	
+$main-color:						$grey-dark-set;
+$txt-color:							$grey-dark-set;
+$highlight-color:				#ffff99;
+
+$background-color:			lighten($grey-set,45);
+
+$link-color:						$blue-set;
+$link-color-hover:			darken($blue-set,10);
+
+$border-color:					lighten($grey-set,35);
+$border-color-hover:		$grey-set;
+
+// Font Settings
+
+$georgia:								Georgia, "Times New Roman", "DejaVu Serif", serif;
+$helvetica:							"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$open-sans:							'Open Sans', sans-serif;
+$gentium-book:					'Gentium Book Basic', serif;
+$droid-serif:						'Droid Serif', serif;
+
+$header-font-family:		$droid-serif;
+$header-font-weight:		bold;
+$header-font-color:			$black-set;
+$body-font-family:			$georgia;
+$body-font-weight:			normal;
+$body-font-color:				$txt-color;
+
+// Modular Scale Settings
+// Ratios
+
+$golden:									1.618;
+$ratio:										$golden;
 
-// Smartphones (portrait and landscape)
-$phone:							min-device-width 320px max-device-width 479px;
-// Smartphones (portrait)
-$phone-portrait:		max-width 319px;
-// Smartphones (landscape)
-$phone-landscape:		min-width 320px max-width 479px;
-// iPads (portrait and landscape)
-$ipad:							min-device-width 768px;
-// iPads (portrait)
-$ipad-portrait:			min-device-width 768px max-device-width 1024px orientation portrait;
-// iPads (landscape)
-$ipad-landscape:		min-device-width 768px max-device-width 1024px orientation landscape;
-// Desktops and laptops
-$desktop:						min-width 1024px;
-// iPhone 4
-$retina:						-webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
+// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
+$base-font-size:					14px;
+$important-mod-num:				44px;
+$base-size:								$base-font-size $important-mod-num;
+$base-line-height:				20px;
+// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
+// http://www.modularscale.com by Tim Brown
+// Results : http://modularscale.com/scale/?px1=14&px2=44&ra1=1.618&ra2=0
+// https://github.com/scottkellum/modular-scale by scottkellum

data/templates/project/_print.scss

@@ -0,0 +1,21 @@
+//
+// Print.scss
+// @credits : HTML5 Boilerplate
+//
+
+@media print {
+
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+
+}