edge_framework 0.5.0 → 0.6.0

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

@@ -1,70 +1,194 @@
-// HEADER
-$h1-font-size: em(44px) !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;
+// BODY
+$body-background  : #fff !default;
+$body-font-color  : #222 !default;
+$body-font-weight : normal !default;
+$body-font-style  : normal !default;
+
+// FONT
+$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
+$body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif" !default;
+$code-font-family   : "Consolas", Courier, "monospace" !default;
 
-$header-font-weight: 700 !default;
+// HEADER
+$h1-font-size : 44px !default;
+$h2-font-size : 36px !default;
+$h3-font-size : 28px !default;
+$h4-font-size : 22px !default;
+$h5-font-size : 18px !default;
+$h6-font-size : 16px !default;
+
+$header-font-color  : $body-font-color !default;
+$header-font-weight : 700 !default;
+
+// PARAGRAPH
+$p-margin-bottom    : em(24px) !default;
+
+// LIST
+$ul-parent-style  : disc !default;
+$ul-child-style   : circle !default;
+
+$ol-parent-style  : decimal !default;
+$ol-child-style   : lower-alpha !default;
+
+@mixin vertical-rhythm($font-size:$base-font-size, $line-height:1.5) {
+	$base-font-size   : $font-size;
+	$base-line-height : $font-size * $line-height;
+
+	font-size   : em($font-size);
+	line-height : $line-height;
+	
+	h1 { @include adjust-font-size-to($h1-font-size); @include adjust-leading-to(2, $h1-font-size); }
+	h2 { @include adjust-font-size-to($h2-font-size); }
+	h3 { @include adjust-font-size-to($h3-font-size); }
+	h4 { @include adjust-font-size-to($h4-font-size); }
+	h5 { @include adjust-font-size-to($h5-font-size); }
+	h6 { @include adjust-font-size-to($h6-font-size); }
+	
+	p {
+		@include trailer(1);
+		&:last-child {
+			@include trailer(0);
+		}
+		+ ul,
+		+ ol {
+			@include trailer(1);
+		}
+	}
+}
 
-$p-margin-bottom: em(30px) !default;
+@mixin baseline($font-size:$base-font-size, $line-height:1.5) {
+	@include background(
+		linear-gradient(to bottom, rgba(black, 0) 95%, rgba(black, .3) 100%)
+	);
+	background-size: 100% em($font-size * $line-height, $font-size);
+}
 
 @if $include-typography {
 
-/* ---------------
+/* ------------------
 EDGE Typography
---------------- */
-
-html,
-body {
-	font-size: $base-font-size;
-}
+--------------------- */
 
 body {
 	position: relative;
-	background: $body-bg;
-	color: $body-font-color;
+	background: $body-background;
+	font-size: $base-font-size;
 	font-family: $body-font-family;
 	font-weight: $body-font-weight;
 	font-style: $body-font-style;
-	line-height: $body-line-height;
+	line-height: $base-line-height;
+	color: $body-font-color;
+}
+
+.baseline {
+	@include baseline();
 }
 
 h1, h2, h3, h4, h5, h6, header {
-	font-family : $header-font-family;
+	color: $header-font-color;
+	font-family: $header-font-family;
 }
 
-h1 { font-size: $h1-font-size }
-h2 { font-size: $h2-font-size }
-h3 { font-size: $h3-font-size }
-h4 { font-size: $h4-font-size }
-h5 { font-size: $h5-font-size; }
-h6 { font-size: $h6-font-size; }
+h1 { font-size: em($h1-font-size); }
+h2 { font-size: em($h2-font-size); }
+h3 { font-size: em($h3-font-size); }
+h4 { font-size: em($h4-font-size); }
+h5 { font-size: em($h5-font-size); }
+h6 { font-size: em($h6-font-size); }
 
 p {
 	margin-bottom: $p-margin-bottom;
-	&:last-of-type {
+	&:last-child {
 		margin-bottom: 0;
 	}
 }
 
 ul, ol {
-	list-style: none; // Clear bullet or numbering on plain <ul> and <ol>
+	list-style-type: none; // Clear bullet or numbering on plain <ul>
+
+	&.inline-list {
+		@include clearfix();
+
+		> li {
+			display: inline-block;
+			float: left;
+			vertical-align: top;
+		}
+	}
 }
 
-.inline-list {
-	@include clearfix();
-	list-style-type: none;
-	li {
-		display: inline-block;
-		float: left;
-		vertical-align: top;
+ul.bullet-list, ol {
+	position: relative;
+	counter-reset: ul-counter;
+	padding-left: em(30px);
+	margin-bottom: $p-margin-bottom;
+
+	> li:before {
+		position: absolute;
+		left: 0;
+		content: counter(ul-counter, $ul-parent-style);
+		counter-increment: ul-counter;
+	}
+
+	ul.bullet-list {
+		margin-bottom: 0;
+		> li:before {
+			content: counter(ul-counter, $ul-child-style);
+		}
+	}
+}
+
+ol {
+	> li:before {
+		content: counter(ul-counter, $ol-parent-style) ".";
+	}
+	ol {
+		margin-bottom: 0;
+		> li:before {
+			content: counter(ul-counter, $ol-child-style) ".";
+		}
 	}
 }
 
-ul.bullet-list, ol.number-list {
+// ol {
+// 	position: relative;
+// 	counter-reset: ol-counter;
 
+// 	li:before {
+// 		position: absolute;
+// 		left: 0;
+// 		content: counter(ol-counter, $ol-parent-style);
+// 		counter-increment: ol-counter;
+// 	}
+// }
+
+.counter-bullet {
+	position: relative;
+	counter-reset: my-counter;
+	padding-left: em(30px);
+
+	li:before {
+		position: absolute;
+		left: 0;
+		content: counter(my-counter, disc);
+		counter-increment: my-counter;
+	}
+}
+.counter-number {
+	position: relative;
+	counter-reset: my-counter;
+	padding-left: em(30px);
+	
+	li {
+		line-height: 1.5;
+	}
+
+	li:before {
+		position: absolute;
+		left: 0;
+		content: counter(my-counter, decimal);
+		counter-increment: my-counter;
+	}
 }
 
 // Code

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

@@ -1,10 +1,8 @@
 @mixin visible-on($size, $display: inherit) {
 	@if $size == large {
-		&.show-for-large,
-		&.hide-for-small { display: $display !important; }
-	} @else if $size == small {
-		&.show-for-small,
 		&.hide-for-large { display: $display !important; }
+	} @else if $size == small {
+		&.hide-for-small { display: $display !important; }
 	}
 }
 
@@ -37,19 +35,18 @@ EDGE Visibility
 --------------- */
 
 /* Above small breakpoint (>#{$small-screen}) */
-.show-for-small,
 .hide-for-large { display: none !important; }
-.show-for-large,
-.hide-for-small { display: inherit !important; }
-@include special-display(large);
+@include medium-up {
+	.hide-for-small { display: inherit !important; }
+	@include special-display(small);
+}
+
 
 /* Below small breakpoint (<=#{$small-screen}) */
 @include small {
-	.show-for-large,
 	.hide-for-small { display: none !important; }
-	.show-for-small,
 	.hide-for-large { display: inherit !important; }
-	@include special-display(small);
+	@include special-display(large);
 }
 
 }

data/assets/sass/edge/helpers/_sticky-footer.scss

@@ -38,4 +38,8 @@
 			max-width  : 1440px;
 		}
 	}
+
+	#{$footer} {
+		height : auto;
+	}
 }

data/assets/sass/edge.scss

@@ -1,6 +1,6 @@
 /* ---------------------------------------------------------------
 - EDGE Framework - edge.setyono.net
-- v0.5.0 (Barathrum)
+- v0.6.0 (Barathrum)
 - Special Thanks:
 --- Foundation        | foundation.zurb.com
 --- Bootstrap         | getbootstrap.com

data/assets/sass/for-test.scss

@@ -1,13 +1,8 @@
 @import "edge/base";
 @import "edge/helpers";
 
-@include medium {
-	body {
-		font-size: 14px;
-	}
-}
-
 .demo-grid {
+	@include transition($g-transition);
 	p {
 		text-align : center;
 		margin     : 0;
@@ -80,11 +75,95 @@
 	}
 }
 
-[data-page="media-query"] {
+.media-query-wrapper {
 	@include small {
 		background: $red-color;
 	}
 	@include medium-up {
 		background: $green-color;
 	}
-}
+}
+
+[data-page="form"] {
+	input, textarea, select {
+		margin-bottom: 20px;
+	}
+}
+
+.blog-post {
+	@include baseline();
+	@include vertical-rhythm();
+}
+
+// [data-page="typography"] {
+// 	@mixin adjust-image-leading-to($lines, $font-size: $base-font-size) {
+// 		height: rhythm($lines, $font-size);
+// 	}
+
+// 	h1 {
+// 		@include adjust-leading-to(2, $h1-font-size);
+// 	}
+
+// 	blockquote {
+// 		padding-left: 20px;
+// 		background: #eee;
+// 		@include trailer(1);
+// 		@include leader(1);
+// 		@include padding-trailer(0.5);
+// 		@include padding-leader(0.5);
+// 	}
+
+// 	table {
+// 		@include trailer(1);
+// 	}
+
+// 	td, th {
+// 		@include adjust-leading-to(1);
+		
+// 		padding-left: 20px;
+// 		padding-right: 20px;
+		
+// 		// @include box-shadow(inset 1px 1px black);
+
+// 		// &:last-child {
+// 		// 	@include box-shadow(
+// 		// 		inset 1px 1px black,
+// 		// 		inset -1px 0 black
+// 		// 	);
+// 		// }
+// 	}
+
+// 	// tr:last-child {
+// 	// 	td {
+// 	// 		@include box-shadow(
+// 	// 			inset 1px 1px black,
+// 	// 			inset 0 -1px black
+// 	// 		);
+
+// 	// 		&:last-child {
+// 	// 			@include box-shadow(
+// 	// 				inset 1px 1px black,
+// 	// 				inset -1px -1px black
+// 	// 			);
+// 	// 		}
+// 	// 	}
+// 	// }
+
+// 	.sidebar {
+// 		h2 {
+// 			@include trailing-border(5px, 1, $h2-font-size);
+// 			@include trailer(1, $h2-font-size);
+// 		}
+
+// 		h3 {
+// 			@include trailer(1, $h3-font-size);
+// 		}
+// 		li {
+// 			cursor: pointer;
+
+// 			&:hover {
+// 				color: tomato;
+// 			}
+// 		}
+// 	}
+// }

data/assets/test2.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width" />
+	<title>Edge Framework</title>
+
+	<!-- VENDOR -->
+	<link rel="stylesheet" href="css/edge.css">
+
+	<!-- APP Specific -->
+	<link rel="stylesheet" href="css/for-test.css">
+
+	<style>
+		.bar1140 {
+			width:1140px; margin:0 auto; background: #333; color: white; position:fixed; top:0;
+			right:0; left:0; z-index: 2; padding: 10px 0;
+		}
+	</style>
+	
+
+	<!--SYNTAX HIGHLIGHTER-->
+	<link rel="stylesheet" href="css/sh/shCoreDefault.css" />
+	<script type="text/javascript" src="js/sh/shCore.js"></script>
+	<script type="text/javascript" src="js/sh/shBrushSass.js"></script>
+	<script type="text/javascript" src="js/sh/shBrushCss.js"></script>
+	<script type="text/javascript" src="js/sh/shBrushXml.js"></script>
+	<script type="text/javascript" src="js/sh/shBrushJScript.js"></script>
+
+	<script type="text/javascript">
+		SyntaxHighlighter.config.clipboardSwf = 'js/sh/clipboard.swf';
+		SyntaxHighlighter.all();
+	</script>
+	<style>
+		.hide-for-small {
+			color: red;
+		}
+		.hide-for-large {
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+<div id="main-wrapper">
+	<header class="top-bar"></header>
+	
+	<div class="row">
+		<div class="large-8 large-centered column">
+			<p>
+				Lorem ipsum <span class="hide-for-small">show on large</span>, <span class="hide-for-large">show on small</span>. Labore, non eaque dolor fugiat ex provident quis! Reprehenderit reiciendis eum maiores
+			</p>
+		</div>
+	</div>
+	
+
+
+	<div id="footer-push"></div>
+</div>
+<footer id="footer">
+</footer>
+</body>
+</html>

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-	VERSION = "0.5.0"
+	VERSION = "0.6.0"
 	CODENAME = "Barathrum"
 end

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

@@ -1,8 +1,9 @@
 @charset "UTF-8";
 @import "edge/base";
 
-// Settings file to override Edge variables
+// Override EDGE variables here
 // To override, uncomment the variable and set the new value
+// Please keep the measurement unit (px or em) the same.
 
 // The first thing to change is Font-family and Main color of your site
 
@@ -13,19 +14,28 @@
 // $body-font-family   : "Helvetica", Helvetica, Arial, "sans-serif";
 // $code-font-family   : "Consolas", Courier, "monospace";
 
-// ----------
+// ------------------------------
 // COLOR
-// ----------
 // Two main colors of your site
+// ------------------------------
 // $main-color    : #0173BC;
 // $sub-color     : #E9E9E9;
 
+// -----------------------
+// COLOR PALETTE
+// These colors below should NEVER be used directly to style
+// set to another variable like $header-color: $blue-color;
+// ----------------------------------------------------------
+// $passive-color : #E9E9E9;
+// $blue-color    : #0173BC;
+// $yellow-color  : #DBA924;
+// $red-color     : #DA2E18;
+// $green-color   : #2CAE34;
+
 // ---------------
 // OUTPUT CONFIG
 // ---------------
-
-// $full  : true;  // Output full CSS styling. If false, only gives barebone CSS
-// $debug : false; // No effect currently, will be used for outputting debug comment
+// $debug : false;  // No effect currently, will be used for nifty-stuff in the future
 
 // $include-normalize  : true;
 // $include-grid       : true;
@@ -44,73 +54,59 @@
 // $body-font-color  : #222;
 // $body-font-weight : normal;
 // $body-font-style  : normal;
-// $body-line-height : 1;
 
-// $base-font-size   : 100%;   // 100% is normally 16px
-// $content-width    : 1140px; // Maximum width of the grid
-
-// --------------
-// COLOR PALETTE
-// --------------
-// These colors below should NEVER be used directly
-// set to another variable like $header-color: $blue-color;
-// $passive-color : #E9E9E9;
-// $blue-color    : #0173BC;
-// $yellow-color  : #DBA924;
-// $red-color     : #DA2E18;
-// $green-color   : #2CAE34;
+// $body-font-size   : 16px;   // Also being used as base-value for pixel->em converter
+// $body-line-height : 1;
 
 // ---------------
 // GLOBAL VALUE
 // ---------------
 // $g-radius : 5px;
-// $g-round  : 1000px;
 // $g-transition : all 0.2s ease-out;
 
-// $em-base  : 16px;  // Base size for px -> em conversion
-
-// -------------------
-// MEDIA QUERIES
-// -------------------
-// $phone-screen  : 480px;
-// $small-screen  : 767px;   // Right below iPad
-// $medium-screen : 1140px;
-// $large-screen  : 1440px;
-// $retina-screen : 192dpi;
-
-// ------------------
-// TEXT DIRECTION
-// ------------------
-// $text-direction   : ltr; // Controls default global text direction, 'rtl' or 'ltr'
-
-// ---------------
-// Typography
-// ---------------
-// $h1-font-size: em(44px);
-// $h2-font-size: em(36px);
-// $h3-font-size: em(28px);
-// $h4-font-size: em(22px);
-// $h5-font-size: em(18px);
-// $h6-font-size: 1em;
-
-// $header-font-weight: 700;
-
-// $p-margin-bottom: em(30px);
-
 // --------
 // GRID
 // --------
-// $column-distance : 30px;
-// $row-max-width   : $content-width;
+// $row-max-width   : 1140px;
 // $total-columns   : 12;
+// $column-distance : em(20px);
 
 // ------------
 // BLOCK-GRID
 // ------------
-// $block-distance  : em(15px);
 // $max-blocks      : 12;
+// $block-distance  : 15px;
+
+// ---------------
+// Typography
+// ---------------
+// $h1-font-size : 44px;
+// $h2-font-size : 36px;
+// $h3-font-size : 28px;
+// $h4-font-size : 22px;
+// $h5-font-size : 18px;
+// $h6-font-size : 16px;
+
+// $header-font-color  : $body-font-color;
+// $header-font-weight : 700;
+
+// $p-margin-bottom    : 24px;
+
+// -------------------
+// MEDIA QUERIES
+// -------------------
+// $phone-screen  : 480px;
+// $small-screen  : 767px;   // Right below iPad
+// $medium-screen : 1140px;
+// $large-screen  : 1440px;
+// $retina-screen : 192dpi;
 
 // ----------
 // BUTTON
 // ----------
-// $button-padding : em(10px 20px);
+// $button-padding : em(10px 20px);
+
+// ------------------
+// TEXT DIRECTION
+// ------------------
+// $text-direction   : ltr; // Controls default global text direction, 'rtl' or 'ltr'

data/template/base/config.rb

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

data/template/html/index.html

@@ -1,39 +1,39 @@
 <!doctype html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width" />
-	<title>My Website</title>
-	<meta name="description" content="This is a description of your website" />
-	<meta name="keywords" content="search, key, word," /> <!-- Comma-separated list for Search keyword -->
-	
-	<!-- FAVICON -->
-	<link rel="icon" type="image/png" href="assets/img/favicon.ico">
-	<link rel="apple-touch-icon-precomposed" href="assets/img/favicon-big.png" />
-	
-	<!-- VENDOR -->
-	<script type="text/javascript" src="assets/js/vendor/custom.modernizr.js"></script>
-	<link rel="stylesheet" href="assets/css/edge-framework.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width" />
+  <title>My Website</title>
+  <meta name="description" content="This is a description of your website" />
+  <meta name="keywords" content="search, key, word," /> <!-- Comma-separated list for Search keyword -->
+  
+  <!-- FAVICON -->
+  <link rel="icon" type="image/png" href="assets/img/favicon.ico">
+  <link rel="apple-touch-icon-precomposed" href="assets/img/favicon-big.png" />
+  
+  <!-- VENDOR -->
+  <script type="text/javascript" src="assets/js/vendor/custom.modernizr.js"></script>
+  <link rel="stylesheet" href="assets/css/edge-framework.css">
 
-	<!-- APP Specific -->
-	<link rel="stylesheet" href="assets/css/app.css">
+  <!-- APP Specific -->
+  <link rel="stylesheet" href="assets/css/app.css">
 </head>
 <body>
 <div id="main-wrapper">
-	
-	<!-- Content goes here -->
+  
+  <!-- Content goes here -->
 
-	<div id="footer-push"></div>
+  <div id="footer-push"></div>
 </div>
 <footer id="footer"></footer>
 
 <!-- Google's Hosted JQuery -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
-	// Use local jquery, if Google's one fails to load
-	if (typeof jQuery == 'undefined') {
-		document.write(unescape("%3Cscript src='assets/js/vendor/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
-	}
+  // Use local jquery, if Google's one fails to load
+  if (typeof jQuery == 'undefined') {
+    document.write(unescape("%3Cscript src='assets/js/vendor/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
+  }
 </script>
 <script type="text/javascript" src="assets/js/app.js"></script>
 </body>