framous 0.2.2 → 0.2.3

data/CHANGELOG.mkdn

@@ -1,6 +1,11 @@
 Framous Changelog
 =================
 
+v0.2.3 [Dec 20, 2012]
+---------------------
+* add some useful mixins to framous-mixins
+* clean up v0.2.2
+
 v0.2.2 [Nov 16, 2012]
 ---------------------
 * split framous into framous-grid & framous-base

data/lib/framous.rb

@@ -1,3 +1,5 @@
 require 'compass'
+require 'modular-scale'
+
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('framous', :path => extension_path)

data/stylesheets/_framous.scss

@@ -0,0 +1,13 @@
+//
+// Framous.scss
+// Framous features
+//
+
+@import "compass/css3";
+@import "modular-scale";
+
+@import "framous/grid/framous-grid";
+
+@import "framous/base/framous-base";
+
+@import "framous/mixins/framous-mixins";

data/stylesheets/framous/base/_forms.scss

@@ -0,0 +1,128 @@
+//
+// Forms.scss
+//
+
+form {
+	margin-bottom: ms(1);
+}
+
+form fieldset {
+	margin: 0 0 ms(0) 0;
+	padding: 0 0 ms(0) 0;
+	border: none;
+	border-bottom: 1px solid lighten($border-color,15);
+
+	&.form-actions {
+		margin: 0 0 0 20%;
+		padding: 0;
+		border: none;
+	}
+
+	&.check {
+		padding-left: 20%;
+
+		label {
+			display: inline;
+			float: none;
+			width: auto;
+			font-weight: normal;
+		}
+	}
+
+	label {
+		float: left;
+		margin: 4px 0 5px 0;
+		width: 20%;
+		font-weight: bold;
+	}
+
+	&.radio ul {
+		@include reset-list-style;
+		margin: 5px 0 0 20%;
+		
+		li {
+			margin: 0 0 5px 0;
+			
+			&:last-child {
+				margin: 0;
+			}
+			
+			label {
+				display: inline;
+				float: none;
+				width: auto;
+				font-weight: normal;
+			}
+		}
+	}
+
+	input.form-text,
+	textarea {
+		display: block;
+		padding: 5px;
+		width: 50%;
+		border: 1px solid $border-color;
+		font-family: $open-sans;
+	}
+
+	input.form-text:focus,
+	textarea:focus {
+		border: 1px solid $border-color-hover;
+	}
+
+	textarea {
+		height: 150px;
+	}
+
+	select {
+		margin: 0;
+		min-width: 25%;
+		font-family: $open-sans;
+	}
+
+	p.form-help {
+		margin: 5px 0 0 20%;
+		color: $grey-set;
+	}
+}
+
+form input[type="submit"] {
+	margin: 0;
+	padding: 5px 10px;
+	border: 0 none;
+	background: $link-color;
+	color: $white-set;
+	font-weight: 700;
+	font-family: $open-sans;
+
+	&:hover,
+	&:focus {
+		background: $link-color-hover;
+	}
+
+	&:active {
+		background: $link-color-hover;
+	}
+}
+
+@include breakpoint($small) {
+	form fieldset label {
+		display: block;
+		float: none;
+		margin: 0 0 5px 0;
+		width: auto;
+	}
+
+	form fieldset.form-actions,
+	form fieldset.check,
+	form fieldset.radio ul,
+	form fieldset p.form-help {
+		margin-left: 0;
+		padding-left: 0;
+	}
+
+	form fieldset input.form-text,
+	form fieldset textarea {
+		width: 100%;
+	}
+}			

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

@@ -0,0 +1,11 @@
+//
+// Base.scss
+// Fundamental HTML elements styled and enhanced with extensible classes.
+// @import all base/*
+//
+
+@import "settings";
+@import "typography";
+@import "forms";
+@import "tables";
+@import "icons";

data/stylesheets/framous/base/_icons.scss

@@ -0,0 +1,27 @@
+//
+// Icons.scss 
+// Ligature Symbols
+//
+
+@font-face {
+  font-family: 'LigatureSymbols';
+  src: url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.eot');
+  src: url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.eot?#iefix') format('embedded-opentype'),
+       url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.woff') format('woff'),
+       url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.ttf') format('truetype'),
+       url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.svg#LigatureSymbols') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.lsf {
+  font-size: 100%;
+  font-family: 'LigatureSymbols';
+}
+
+.lsf-icon:before {
+  content: attr(title);
+  margin-right: 0.3em;
+  font-size: 130%;
+  font-family: 'LigatureSymbols';
+}

data/stylesheets/framous/base/_modular-scale.scss

@@ -0,0 +1,220 @@
+// SASSY MODULAR-SCALE
+// https://github.com/scottkellum/modular-scale
+
+// Defaults
+$ratio: golden_ratio() !default
+$base-size: 16px !default
+$round_pixels: true !default
+
+// Modular Scale function
+@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $round_pixels: $round_pixels)
+  // return the $base-size if $multiple is zero
+  @if $multiple == 0
+    @if type-of($base-size) == 'list'
+      $base-size: sort_list($base-size)
+      @return nth($base-size, 1)
+    // return just the simple $base-size value if it's not a list
+    @return $base-size
+
+  // if multiple base-sizes are passed in as a list
+  // and multiple ratios are passed in as a list
+  // calculate values in using each base-size / ratio combination
+  @if type-of($base-size) == 'list' and type-of($ratio) == 'list'
+    @if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
+      @return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
+    @return ms-multibase-multiratio($multiple, $base-size, $ratio)
+
+  // if multiple base-sizes are passed in as a list
+  // calculate values in using each base-size
+  @if type-of($base-size) == 'list' and type-of($ratio) == 'number'
+    @if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
+      @return round(ms-multibase($multiple, $base-size, $ratio))
+    @return ms-multibase($multiple, $base-size, $ratio)
+
+  // if multiple ratios are passed in as a list
+  // calculate values in using each ratio
+  @if type-of($base-size) == 'number' and type-of($ratio) == 'list'
+    @if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
+      @return round(ms-multiratio($multiple, $base-size, $ratio))
+    @return ms-multiratio($multiple, $base-size, $ratio)
+
+  // If there are no lists just run the simple function
+  @if unit(power($ratio, $multiple) * $base-size) == 'px' and $round_pixels == true
+    @return round(power($ratio, $multiple) * $base-size)
+  @return power($ratio, $multiple) * $base-size
+
+
+// calculate values in using each base-size / ratio combination
+@function ms-multibase-multiratio($multiple, $base-size, $ratio)
+  // start with an empty list to place all values in
+  $scale-values: ()
+  // make sure base sizes are in ascending order
+  $base-size: sort_list($base-size)
+  // take each base-size in turn
+  $k: 1
+  @while $k <= length($base-size)
+    // add each $base-size to the list except the first
+    @if $k > 1
+      $scale-values: append($scale-values, nth($base-size, $k))
+    // take each ratio in turn
+    $j: 1
+    @while $j <= length($ratio)
+      // reset $modular-scale for each set
+      $modular-scale: nth($base-size, $k)
+      // do the scale for each base-size using this ratio
+      @if $multiple > 0
+        // up $multiple times
+        // and add the result to $scale-values
+        @for $i from 1 through $multiple
+          $modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
+          $scale-values: append($scale-values, $modular-scale)
+        // and down until the value is lower than the lowest $base-size
+        // and add the result to $scale-values
+        $i: -1
+        $modular-scale: nth($base-size, $k)
+        @while $modular-scale >= nth($base-size, 1)
+          $modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
+          $scale-values: append($scale-values, $modular-scale)
+          $i: $i - 1
+      @if $multiple < 0
+        // do the scale down for each set to below 1px
+        $i: 0
+        $modular-scale: nth($base-size, $k)
+        @while $i >= $multiple
+          $modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
+          $scale-values: append($scale-values, $modular-scale)
+          $i: $i - 1
+      $j: $j + 1
+    $k: $k + 1
+  // return trimmed and sorted final list
+  @return trim-sort($multiple, $scale-values, $base-size)
+
+
+// calculate values in using each base-size
+@function ms-multibase($multiple, $base-size, $ratio)
+  // start with an empty list to place all values in
+  $scale-values: ()
+  // make sure base sizes are in ascending order
+  $base-size: sort_list($base-size)
+  // take each base-size in turn
+  $k: 1
+  @while $k <= length($base-size)
+    // add each $base-size to the list except the first
+    @if $k > 1
+      $scale-values: append($scale-values, nth($base-size, $k))
+    // reset $modular-scale for each set
+    $modular-scale: nth($base-size, $k)
+    // do the scale for each base-size using this ratio
+    @if $multiple > 0
+      // up $multiple times
+      // and add the result to $scale-values
+      @for $i from 1 through $multiple
+        $modular-scale: power($ratio, $i) * nth($base-size, $k)
+        $scale-values: append($scale-values, $modular-scale)
+      // and down until the value is lower than the lowest $base-size
+      // and add the result to $scale-values
+      $i: -1
+      $modular-scale: nth($base-size, $k)
+      @while $modular-scale >= nth($base-size, 1)
+        $modular-scale: power($ratio, $i) * nth($base-size, $k)
+        $scale-values: append($scale-values, $modular-scale)
+        $i: $i - 1
+    @if $multiple < 0
+      // do the scale down for each set to below 1px
+      $i: 0
+      $modular-scale: nth($base-size, $k)
+      @while $i >= $multiple
+        $modular-scale: power($ratio, $i) * nth($base-size, $k)
+        $scale-values: append($scale-values, $modular-scale)
+        $i: $i - 1
+    $k: $k + 1
+  // return trimmed and sorted final list
+  @return trim-sort($multiple, $scale-values, $base-size)
+
+
+// calculate values in using each ratio
+@function ms-multiratio($multiple, $base-size, $ratio)
+  // start with an empty list to place all values in
+  $scale-values: ()
+  // If $multiple is a positive integer (up the scale)
+  @if $multiple > 0
+    // take each ratio in turn
+    $j: 1
+    @while $j <= length($ratio)
+      // reset $modular-scale for each set
+      $modular-scale: $base-size
+      // do the scale using this ratio thru the multiple, and add the result to $scale-values
+      @for $i from 1 through $multiple
+        $modular-scale: power(nth($ratio, $j), $i) * $base-size
+        $scale-values: append($scale-values, $modular-scale)
+      $j: $j + 1
+    // sort acsending
+    $scale-values: sort_list($scale-values)
+    // return the final value using the laced list
+    @return nth($scale-values, $multiple)
+  // If $multiple is a negative integer (down the scale)
+  @if $multiple < 0
+    // take each ratio in turn
+    $j: 1
+    @while $j <= length($ratio)
+      // reset $modular-scale for each set
+      $modular-scale: $base-size
+      // do the scale using this ratio thru the multiple, and add the result to $scale-values
+      @for $i from 1 through ($multiple * -1)
+        $modular-scale: power(nth($ratio, $j), -$i) * $base-size
+        $scale-values: append($scale-values, $modular-scale)
+      $j: $j + 1
+    // sort decending
+    $scale-values: reverse_list(sort_list($scale-values))
+    // return the final value using the laced list
+    @return nth($scale-values, $multiple * -1)
+
+
+// trim and sort the final list
+@function trim-sort($multiple, $scale-values, $base-size)
+  @if $multiple > 0
+    // trim list so we can count from the lowest $base-size
+    $scale-values: trim_list($scale-values, nth($base-size, 1), true)
+    // sort acsending
+    $scale-values: sort_list($scale-values)
+    // return the final value using the laced list
+    @return nth($scale-values, $multiple)
+  @else
+    // trim list so we can count from the lowest $base-size
+    $scale-values: trim_list($scale-values, nth($base-size, 1), false)
+    // sort acsending
+    $scale-values: reverse_list(sort_list($scale-values))
+    // return the final value using the laced list
+    @return nth($scale-values, -$multiple)
+
+
+/////////////////////////////////////////////////////////////////////////
+
+// alias for golden_ratio()
+@function golden()
+  @return golden_ratio()
+
+// Shortcut
+@function ms($args...)
+  // Return the value from the Modular Scale function
+  @return modular-scale($args...)
+
+// Write Modular Scale List
+@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
+  $ms-list: unquote("MS-LIST:")
+  @for $i from $start through $finish
+    $ms-list: append($ms-list, ms($i, $base-size, $ratio))
+  @return $ms-list
+
+@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
+  @return modular-scale-list($start, $finish, $base-size, $ratio)
+
+=modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
+  @debug modular-scale-list($start, $finish, $base-size, $ratio)
+
+=ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
+  @debug modular-scale-list($start, $finish, $base-size, $ratio)
+
+
+// Other libraries can easily query if this function is avalible
+$modular-scale-loaded: true

data/stylesheets/framous/base/_settings.scss

@@ -0,0 +1,70 @@
+//
+// Settings.scss
+//
+
+// Text Direction Settings
+
+$text-direction:				ltr !default;
+$default-float:					left !default;
+$default-opposite:			right !default;
+
+@if $text-direction == ltr {
+  $default-float: left;
+  $default-opposite: right;
+} @else {
+  $default-float: right;
+  $default-opposite: left;
+}
+
+// Colors Settings
+// Branding Colors
+
+$white-set:							#fff !default;
+$blue-set:							#174374 !default;
+$grey-set:							#808080 !default;
+$grey-dark-set:					#333 !default;
+$black-set:							#000 !default;
+
+$background-body-color:	$white-set !default;	
+$main-color:						$grey-dark-set !default;
+$txt-color:							$grey-dark-set !default;
+$highlight-color:				#ffff99 !default;
+
+$background-color:			lighten($grey-set,45) !default;
+
+$link-color:						$blue-set !default;
+$link-color-hover:			darken($blue-set,10) !default;
+
+$border-color:					lighten($grey-set,35) !default;
+$border-color-hover:		$grey-set !default;
+
+// Font Settings
+
+$georgia:								Georgia, "Times New Roman", "DejaVu Serif", serif !default;
+$helvetica:							"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$open-sans:							'Open Sans', sans-serif !default;
+$gentium-book:					'Gentium Book Basic', serif !default;
+$droid-serif:						'Droid Serif', serif !default;
+
+$header-font-family:		$droid-serif !default;
+$header-font-weight:		bold !default;
+$header-font-color:			$black-set !default;
+$body-font-family:			$georgia !default;
+$body-font-weight:			normal !default;
+$body-font-color:				$txt-color !default;
+
+// Modular Scale Settings
+// Ratios
+
+$golden:									1.618 !default;
+$ratio:										$golden !default;
+
+// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
+$base-font-size:					14px !default;
+$important-mod-num:				44px !default;
+$base-size:								$base-font-size $important-mod-num;
+$base-line-height:				20px !default;
+// 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/stylesheets/framous/base/_table.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;
+	}
+
+}