edge_framework 0.2.1 → 0.2.3

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    N2ZhYWUwYzkzM2MyMmMyNTZkZjEwNTczYWJmMTUyMjUwYmRkNjJlOA==
+    YWY5MzQ3NGYyMDgwOTZiOTcyMDdiMGJhNzBlZmQ3Nzc4NmVmZjQwNA==
   data.tar.gz: !binary |-
-    OWZkYzc2MzZmMDRiYzNiMDk2OGFhNTgyZjA2M2ZjODEzMDFmY2MyOA==
+    NDA0NDc2ZDBhZWVlNGJjZDA5OThkNmNkNmQ1OGFiN2Y1NmU5MmUxYg==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    MDE0NzY0ZWEzYjFmM2FlNTlkZjAzODZmMTQ1YmY3YzUwZWU1MGExNWQzNTQ0
-    OGQwYzQyNzU3ZjIwNjk2MzRlNjNlYTcyM2YyYjMxN2NmNGYwZGUwMTE5N2I5
-    YTVlZjliYzQ3OWVkMDcyOGJiMjk0MTYzNmE2YWFjMzIxZmYxYWY=
+    Y2EyMWNmY2M5ZjQ1MTU2N2U2ZTc5Mzk0M2Q0YTI0NWQwZjFiMDhlMzA2ZjJj
+    M2E4YjI4NjhlNjAxZTc5NmMzNzQyMjUyMDRhNDE0ZDhjM2U2Njk3MTYyZTc3
+    YWY2MDVjYmZiMWJhNjYwNmIzZTc4Y2JkMjE3ZTM0YmVmMGFmNDQ=
   data.tar.gz: !binary |-
-    OGIwYzZmYWM1MzQzOWZhNTg4MjhlYzcyYTU5YjRjYjNiM2VkMTI5MTc3ZTgx
-    OTBhOTZmMzI1NmMxNzYzMDZlNDVkZmU3NjIzYjY3NjMxZTdkNGEyMjk4OTAw
-    OTQzMzJmMzA3ODQwOWU5MWJlZjgzMmQ1YjRjMzljZTRiMjYyNWI=
+    Mzc4NTE3ZWUzNDlmMDljMmQ5OTVlNzA2OGZmYzg4ODUxZWVlNmQ4MDdiN2Zm
+    YTAxMjdlZTNiMzI2ZmY1ZmViOTE5NDExODk1YTRjMTFmNTg5ZmNjMDQxMzUx
+    ZTRlNGRkYTY4Y2E4OGZlOTNlNzE1MWY5NTBlN2I5OWMyNDFjMWI=

data/assets/sass/edge/_base.scss

@@ -55,6 +55,7 @@ $body-bg          : #fff !default;
 $body-font-color  : #222 !default;
 $body-font-weight : normal !default;
 $body-font-style  : normal !default;
+$body-line-height : 1 !default;
 
 $header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
 $body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif" !default;
@@ -132,25 +133,29 @@ $medium-screen : 1140px !default;
 $large-screen  : 1440px !default;
 $retina-screen : 192dpi !default;
 
-// Custom size and down
-@mixin custom($size) {
+@mixin below($size) {
 	@media only screen and (max-width: $size) { @content; }
 }
+
+@mixin above($size) {
+	@media only screen and (min-width: $size) { @content; }
+}
+
 // 480px and down
 @mixin phone() {
-	@media only screen and (max-width: $phone-screen) { @content; }
+	@include below($phone-screen) { @content; }
 }
 // 767px and down
 @mixin small() {
-	@media only screen and (max-width: $small-screen) { @content; }
+	@include below($small-screen) { @content; }
 }
 // 768px and up. If you're planning to support IE8, NEVER use medium-up
 @mixin medium-up() {
-	@media only screen and (min-width: $small-screen) { @content; }
+	@include below($small-screen) { @content; }
 }
 // 1140px and down
 @mixin medium() {
-	@media only screen and (max-width: $medium-screen) { @content; }
+	@include below($medium-screen) { @content; }
 }
 // large() is not needed, just put it outside media query
 
@@ -228,15 +233,19 @@ $retina-screen : 192dpi !default;
 // SELECTION
 // Change the text highlight color
 // --------------------------------
-@mixin selection($color: lighten($main-color, 35%) ) {
-	::-moz-selection {
-		background  : $color;
-		text-shadow : none;
-	}
-	::selection {
-		background  : $color;
-		text-shadow : none;
-	}
+
+@mixin selection($background-color:lighten($main-color, 35%), $color:white) {
+  ::-moz-selection {
+    background: $background-color;
+    text-shadow: none !important;
+    color: $color !important;
+  }
+
+  ::selection {
+    background: $background-color;
+    text-shadow: none !important;
+    color: $color !important;
+  }
 }
 
 // ------------------------------------------------------

data/assets/sass/edge/components/_block-grid.scss

@@ -50,6 +50,7 @@ $max-blocks      : 12 !default;
 		@include clearfix;
 
 		& > li {
+			position: relative;
 			display : block;
 			height  : auto;
 			float   : $default-float;

data/assets/sass/edge/components/_button.scss

@@ -44,7 +44,7 @@ button,
 input[type="button"],
 input[type="submit"],
 input[type="reset"] {
-	@include button($for-base: true);
+	@include button($for-base:true);
 }
 
-}
+} // $include-button

data/assets/sass/edge/components/_form.scss

@@ -1,17 +1,99 @@
-@if $include-form {
+// -------------
+// FORM 
+// -------------
+
+$input-padding       : em(10px);
+$input-border-style  : 1px solid;
+$input-border-color  : $passive-color;
+
+$input-border        : $input-border-style $input-border-color;
+$input-border-hover  : $input-border-style darken($input-border-color, 10%);
+$input-border-focus  : $input-border-style $main-color;
+
+$prefix-bg-color :$passive-color;
+
+@mixin input() {
+	input[type="text"],
+	input[type="password"],
+	input[type="date"],
+	input[type="datetime"],
+	input[type="datetime-local"],
+	input[type="month"],
+	input[type="week"],
+	input[type="email"],
+	input[type="number"],
+	input[type="search"],
+	input[type="tel"],
+	input[type="time"],
+	input[type="url"],
+	select,
+	textarea {
+		@content;
+	}
+}
+
+// Style for generic input
+@mixin form-input($padding: $input-padding) {
+	width: 100%;
+	outline: none;
+	padding: $input-padding;
+	border: $input-border;
+
+	&:hover {
+		border: $input-border-hover;
+		@include box-shadow(inset 0 0 3px $input-border-color);
+	}
+
+	&:focus {
+		border: $input-border-focus;
+		@include box-shadow(inset 0 1px 3px -1px $main-color);
+	}
+}
+
+// Style for label
+@mixin form-label($padding: $input-padding, $bg-color: $prefix-bg-color) {
+	display: block;
+	line-height: normal;
+	padding: $padding;
+	border: $input-border-style transparent; // to make it vertically centered
 
-// Remove the delete (x) mark from IE
-input::-ms-clear {
-	display: none;
+	&.prefix {
+		border: $input-border-style $bg-color;
+		border-right: none;
+		width: 100%;
+		
+		text-align: center;
+		background: $bg-color;
+		color: contrast-color($bg-color, #333, white, 60%);
+	}
 }
 
-// Disable Chrome's datepicker
-input::-webkit-calendar-picker-indicator{
-	display: none;
+// Disable unnecessary default styling from browser
+@mixin form-disable-default() {
+	// Disable Chrome's datepicker
+	input::-webkit-calendar-picker-indicator{
+		display: none;
+	}
+
+	input[type="date"]::-webkit-input-placeholder{ 
+		visibility: hidden !important;
+	}
 }
 
-input[type="date"]::-webkit-input-placeholder{ 
-	visibility: hidden !important;
+@if $include-form {
+
+/* ---------------
+EDGE Form
+--------------- */
+
+@include input {
+	@include form-input();
+}
+
+label {
+	@include form-label();
 }
 
-}
+@include form-disable-default();
+
+} // $include-form

data/assets/sass/edge/components/_grid.scss

@@ -1,9 +1,9 @@
 // -----------------------------------------
 // GRID 
-//   Based heavily on ZURB's Foundation
+//   Based on ZURB's Foundation 4
 // -----------------------------------------
 
-$column-distance : 30px !default;
+$column-distance : 20px !default;
 $row-max-width   : $content-width !default;
 $total-columns   : 12 !default;
 
@@ -14,7 +14,8 @@ $total-columns   : 12 !default;
 
 // For creating container, nested, and collapsed rows.
 @mixin grid-row(
-	$behavior  : false,
+	$nest      : false,
+	$collapse  : false,
 	$for-base  : false,
 	$max-width : $row-max-width,
 	$distance  : $column-distance ) {
@@ -25,28 +26,28 @@ $total-columns   : 12 !default;
 	@if $for-base == false {
 		@include clearfix;
 	}
+	
+	@if $nest and $collapse {
+		width     : auto;
+		max-width : none;
+		margin    : 0;
+		padding-#{$default-float}    : 0;
+		padding-#{$default-opposite} : 0;
+	}
 
-	// use @include grid-row(nest); to include a nested row
-	@if $behavior == nest {
+	@else if $nest {
 		width      : auto;
 		max-width  : none;
 		margin-#{$default-float}    : -($distance / 2);
 		margin-#{$default-opposite} : -($distance / 2);
 	}
 
-	// use @include grid-row(collapse); to collapse a container row margins
-	@else if $behavior == collapse {
+	@else if $collapse {
 		width     : 100%;
 		max-width : $max-width;
-		margin    : 0;
-		
-	}
-
-	// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
-	@else if $behavior == nest-collapse {
-		width     : auto;
-		max-width : none;
-		margin    : 0;
+		margin    : 0 auto;
+		padding-#{$default-float}    : $distance / 2;
+		padding-#{$default-opposite} : $distance / 2;
 	}
 
 	// use @include grid-row; to use a container row
@@ -154,11 +155,36 @@ EDGE Grid
 body {
 	&.not-responsive {
 		min-width : $row-max-width;
+
+		.row {
+			min-width: em($row-max-width + $column-distance);
+			
+			.column,
+			.columns {
+			}
+
+			// Nested row
+			.row {
+				min-width: 0;
+			}
+		}
 	}
 	&.only-responsive-below-small {
 		min-width : $row-max-width;
+		.row {
+			min-width: em($row-max-width);
+
+			// Nested row
+			.row {
+				min-width: 0;
+			}
+		}
+
 		@include small {
 			min-width : 0;
+			.row {
+				min-width: 0;
+			}
 		}
 	}
 }
@@ -168,6 +194,7 @@ body {
 	
 	// Collapsed row
 	&.collapse {
+		@include grid-row($collapse:true, $for-base:false);
 		.column,
 		.columns {
 			@include grid-column($collapse:true, $for-base:false);
@@ -176,68 +203,71 @@ body {
 	
 	// Nested-collapsed row
 	.row {
-		@include grid-row($behavior:nest);
+		@include grid-row($nest:true);
 		&.collapse {
-			@include grid-row($behavior:nest-collapse); }
+			@include grid-row($nest:true, $collapse:true);
 		}
 	}
-	
-	// Normal column
-	.column,
-	.columns {
-		@include grid-column($columns:$total-columns);
-	}
-	
+}
 
-	@for $i from 1 through $total-columns {
-		.large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
-	}
+// Normal column
+.column,
+.columns {
+	@include grid-column($columns:$total-columns);
+}
+
+
+@for $i from 1 through $total-columns {
+	.large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
+}
 
-	@for $i from 0 through $total-columns - 1 {
+// Centered column
+.column.large-centered,
+.columns.large-centered {
+	@include grid-column($center:true, $collapse:null, $float:false);
+}
+
+@include medium-up {
+	@for $i from 1 through $total-columns - 1 {
 		.row .large-offset-#{$i} {
 			@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
 		}
-	}
-
-	// Centered column
-	.column.large-centered,
-	.columns.large-centered {
-		@include grid-column($center:true, $collapse:null, $float:false);
-	}
-
-	@include medium-up {
-		@for $i from 1 through $total-columns - 1 {
-			.push#{-$i} {
-				@include grid-column($push:$i, $collapse:null, $float:false, $for-base:true);
-			}
-			.pull#{-$i} {
-				@include grid-column($pull:$i, $collapse:null, $float:false, $for-base:true);
-			}
+		.push#{-$i} {
+			@include grid-column($push:$i, $collapse:null, $float:false, $for-base:true);
+		}
+		.pull#{-$i} {
+			@include grid-column($pull:$i, $collapse:null, $float:false, $for-base:true);
 		}
 	}
+}
 
-		// Small screen and below
-	@include small {
+// Small screen and below
+@include small {
+	// Expand large column only if it's responsive site
+	body:not(.not-responsive) {
 		.column,
 		.columns {
 			@include grid-column($columns:$total-columns);
 		}
+	}
+	
 
-		@for $i from 1 through $total-columns {
-			.small#{-$i} {
-				@include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
-			}
+	@for $i from 1 through $total-columns {
+		.small#{-$i} {
+			@include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
 		}
+	}
 
-		@for $i from 0 through $total-columns - 2 {
-			.small-offset-#{$i} {
-				@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
-			}
+	@for $i from 0 through $total-columns - 2 {
+		.small-offset-#{$i} {
+			@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
 		}
+	}
 
-		.column.small-centered,
-		.columns.small-centered {
-			@include grid-column($center:true, $collapse:null, $float:false);
-		}
+	.column.small-centered,
+	.columns.small-centered {
+		@include grid-column($center:true, $collapse:null, $float:false);
 	}
+}
+
 } // $include-grid

data/assets/sass/edge/components/_main.scss

@@ -25,10 +25,10 @@ body {
 	font-family : $body-font-family;
 	font-weight : $body-font-weight;
 	font-style  : $body-font-style;
-	line-height : 1;
+	line-height : $body-line-height;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6, header {
 	font-family : $header-font-family;
 }
 

data/assets/sass/edge/components/_typography.scss

@@ -1,13 +1,14 @@
 // HEADER
 $h1-font-size: em(44px) !default;
-$h2-font-size: em(37px) !default;
-$h3-font-size: em(27px) !default;
-$h4-font-size: em(23px) !default;
+$h2-font-size: em(36px) !default;
+$h3-font-size: em(28px) !default;
+$h4-font-size: em(22px) !default;
 $h5-font-size: em(18px) !default;
 $h6-font-size: 1em !default;
 
 $header-font-weight: 700 !default;
 
+$p-margin-bottom: em(30px) !default;
 
 @if $include-typography {
 
@@ -22,6 +23,12 @@ h4 { font-size: $h4-font-size }
 h5 { font-size: $h5-font-size; }
 h6 { font-size: $h6-font-size; }
 
+p {
+	margin-bottom: $p-margin-bottom;
+	&:last-of-type {
+		margin-bottom: 0;
+	}
+}
 
 code {
 	display    : inline-block;
@@ -35,6 +42,13 @@ ul.inline, ol.inline {
 	li {
 		display : inline-block;
 		vertical-align:top;
+		margin-right: em(-4px);
+	}
+}
+
+blockquote {
+	cite {
+		display: block;
 	}
 }
 

data/assets/sass/for-test.scss

@@ -1,6 +1,12 @@
 @import "edge/base";
 @import "edge/helpers";
 
+@include medium {
+	body {
+		font-size: 14px;
+	}
+}
+
 .demo-grid {
 	p {
 		text-align : center;

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-	VERSION = "0.2.1"
+	VERSION = "0.2.3"
 	CODENAME = "Abaddon"
 end

data/template/base/assets/sass/_setting.scss

@@ -33,6 +33,7 @@
 // $body-font-color  : #222;
 // $body-font-weight : normal;
 // $body-font-style  : normal;
+// $body-line-height : 1 !default;
 
 // $header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif";
 // $body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif";

data/template/base/config.rb

@@ -1,3 +1,4 @@
+gem "edge_framework", "= 0.2.2" # Remove this line to use the latest EDGE, beware of incompatibility
 require "edge_framework"
 
 http_path       = "/"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: edge_framework
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.3
 platform: ruby
 authors:
 - Henner Setyono
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-12 00:00:00.000000000 Z
+date: 2013-09-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass