edge_framework 0.3.0 → 0.5.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MzdkOTViZGVjNjYzYmNkNjQ5Zjc3NzM1ODVkZGJkODc4ZjE0MDE0Nw==
+    MGZmZGMyNWQ1ZjAzZjIzMmJiYmIzOWFmMDNlM2M3ODM5YTgyYjNjYg==
   data.tar.gz: !binary |-
-    YjAyMjY3ZTc2YTEwNmI2YTBiZTRmY2MxM2MxZjY2ODU5NTVkNzdkMQ==
+    NzhhNWQxZDZiNGFmZTI1MTJiNjA5MDFiMmM5ZGVhNzZjMTFhYWIzOA==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    NTIzZGE4N2EzZTNlYWUzNTZjNzg0Zjc1ZmM4MzViNzAxZDI1NWZlNzJkOGUz
-    M2JmYjdhYWU5ZjRkNmJlZGU5ZjhlYTZkNjcwZjJiOTg2ZmFjZDU1ODMwNzlk
-    MWM2ZmIyZGQzYzhkNmMzZjI1MmY0ZmU4NGFiYWM2YzQ0ZmQ3YWE=
+    YTk4ZDhiN2RkZjUzZTgyMWQ5M2Q3MGI0MWI0M2I0MzJjMDRiOTI4Njc0ODMw
+    MjFkOTEzODlmNDE0ZGUyODViYjA3N2M4ZDllM2Y5MjU3YmVlNjEyOGM3Njc1
+    NDczYmU5MDk4YzEzNjdjOGI0MDdiMDNhMTk4YmJiZDg3M2JmODQ=
   data.tar.gz: !binary |-
-    M2Q3Y2IyOTQ2NTQ1YzNmYTEzNmMwNDBmYTFkN2RjNjUxNTAyYWJlNGY4MTM5
-    MmQ3NGM0NDdhNDM0ZjIyODM3NjJmOTI0NjRhNjYxYzYxNDI2MmY3ZjVlNmRm
-    MThjZGFhNmIxOWI2YjVlMTYyNzRhYzAwYjcwODc0MmFiMDZmNGI=
+    Zjg3OGEyNmFhNDAyMzE0OTZjMjViOGQwMmFlZWM4OTMxZGYxZThhMWYzZDE5
+    YWZkNWU3ZmY1OGFmN2QwNzQyYTY3NmI5ZWEwZjY0Y2E1N2I1YzIyNzBiNTQx
+    MzI5MjBjNmYyZjVkODc0YmVjNzI1ZWY1OGQwYTZmZGVhNzRkN2E=

data/README.md

@@ -30,4 +30,5 @@ Edge provides basic template for your project:
 
   - Sinatra
   - Rails
-  - Flask
+  - Flask
+  - Django

data/assets/sass/edge/_base.scss

@@ -21,7 +21,8 @@ $debug : false !default;
 
 $external-call : false !default; // user shouldn't modify this
 
-$include-main       : true !default;
+$include-normalize  : true !default; // user shouldn't modify this
+
 $include-grid       : true !default;
 $include-block-grid : true !default;
 $include-visibility : true !default;
@@ -29,8 +30,6 @@ $include-visibility : true !default;
 $include-button     : true !default;
 $include-form       : true !default;
 $include-typography : true !default;
-
-$include-normalize  : true !default;
 $include-print      : true !default;
 
 // ----------
@@ -57,16 +56,19 @@ $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;
-$code-font-family   : "Consolas", Courier, "monospace" !default;
-
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
 // for compatibility with brower-based text zoom or user-set defaults.
 $base-font-size   : 100% !default;
 // Maximum width of the grid
 $content-width    : 1140px !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;
+
 // ---------------
 // GLOBAL VALUE
 // ---------------
@@ -99,8 +101,7 @@ $em-base  : 16px !default;
 	@return $value;
 }
 
-// Based on: mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/
-// EXAMPLE
+// EXAMPLE USAGE
 //   width   : em(500px);
 //   padding : em(20px 30px 15px 10px);
 //   @include box-shadow(em(inset 2px 0 5px rgba(black, 0.3) ) );
@@ -151,7 +152,7 @@ $retina-screen : 192dpi !default;
 }
 // 768px and up. If you're planning to support IE8, NEVER use medium-up
 @mixin medium-up() {
-	@include below($small-screen) { @content; }
+	@include above($small-screen + 1px) { @content; }
 }
 // 1140px and down
 @mixin medium() {
@@ -214,17 +215,17 @@ $retina-screen : 192dpi !default;
 		display : table;
 	}
 	&:after {
-		clear   : both;
+		clear: both;
 	}
 }
 @mixin clearfix {
-	zoom: 1;
+	zoom:  1;
 	&:before, &:after {
 		content : " ";
 		display : table;
 	}
 	&:after {
-		clear   : both;
+		clear: both;
 	}
 }
 
@@ -236,15 +237,15 @@ $retina-screen : 192dpi !default;
 
 @mixin selection($background-color:lighten($main-color, 35%), $color:white) {
   ::-moz-selection {
-    background: $background-color;
-    text-shadow: none !important;
-    color: $color !important;
+    background  : $background-color;
+    text-shadow : none !important;
+    color       : $color !important;
   }
 
   ::selection {
-    background: $background-color;
-    text-shadow: none !important;
-    color: $color !important;
+    background  : $background-color;
+    text-shadow : none !important;
+    color       : $color !important;
   }
 }
 

data/assets/sass/edge/_components.scss

@@ -1,5 +1,4 @@
 @import "components/normalize";
-@import "components/main";
 
 @import "components/button";
 @import "components/typography";

data/assets/sass/edge/_helpers.scss

@@ -2,7 +2,6 @@
 @import "helpers/sticky-footer";
 
 // The mixins from Components class, but don't output the CSS
-$include-main       : false;
 $include-grid       : false;
 $include-block-grid : false;
 $include-visibility : false;

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

@@ -6,7 +6,7 @@ $button-padding : em(10px 20px);
 	$shadow-hover  : inset 1px 1px 5em rgba(black, 0.2);
 
 	background : $bg-color;
-	color      : contrast-color($bg-color, #333, white, 50%);
+	color      : contrast-color($bg-color, #333, white, 70%);
 	border     : none;
 	
 	@if $full {

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

@@ -1,41 +1,153 @@
 @if $include-normalize {
 	
 /* ---------------------------
-Normalize | git.io/normalize
+EDGE Normalize
+Based on git.io/normalize
 ------------------------------ */
+// NOTE: Customized style is the commented part
 
-article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
-audio, canvas, video { display: inline-block; }
-audio:not([controls]) { display: none; height: 0; }
-[hidden] { display: none; }
+// Set box-sizing globally to handle padding and border widths
+*,
+*:before,
+*:after {
+	@include box-sizing(border-box);
+}
 
-html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-body { margin: 0; }
+// Basic reset margin and padding
+*, body {
+	margin: 0;
+	padding: 0;
+}
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with brower-based text zoom or user-set defaults.
+html,
+body {
+	font-size: $base-font-size;
+}
 
-a:focus { outline: thin dotted; }
+// Chrome Sibling Selector Fix
+body { -webkit-animation: bugfix infinite 1s; }
+@-webkit-keyframes bugfix { 
+	from { padding: 0; }
+	to { padding: 0; }
+}
+
+html {
+	font-family : sans-serif;
+	-webkit-text-size-adjust : 100%;
+	-ms-text-size-adjust     : 100%;
+}
+
+// Reset anchor styling
+a {
+	display         : inline-block;
+	cursor          : pointer;
+	text-decoration : none;
+}
+
+// Remove outline on a:focus
+a:focus { outline: none; }
 a:active, a:hover { outline: 0; }
 
-h1 { font-size: 2em; margin: 0.67em 0; }
+// Remove default margin from header tag
+h1, h2, h3, h4, h5, h6 { margin: 0; }
+
+// Reset paragraph styling
+p {
+	line-height   : 1.5;
+	margin-top    : 0;
+	margin-bottom : 0;
+}
+
+// A better looking default horizontal rule
+hr {
+	-moz-box-sizing : content-box;
+	box-sizing      : content-box;
+	display    : block;
+	height     : 1px;
+	margin     : 1em 0;
+	padding    : 0;
+	border     : 0;
+	border-top : 1px solid #ccc;
+}
+
+// Get rid of gap under images
+img {
+	border  : 0;
+	display : inline-block;
+	vertical-align         : middle;
+	-ms-interpolation-mode : bicubic; 
+}
+
+// Grid Defaults to get images and embeds to work properly
+img,
+object,
+embed {
+	max-width : 100%;
+	height    : auto;
+}
+
+object,
+embed {
+	height: 100%;
+}
+
+#map_canvas,
+.map_canvas {
+	img,
+	embed,
+	object {
+		max-width: none !important;
+	}
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+	display: block;
+}
+
+audio,
+canvas,
+video {
+	display: inline-block;
+}
+
+audio:not([controls]) { display: none; height: 0; }
+[hidden] { display: none; }
+
 abbr[title] { border-bottom: 1px dotted; }
-b, strong { font-weight: bold; }
 dfn { font-style: italic; }
-hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
 
 mark { background: #ff0; color: #000; }
 code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
-pre { white-space: pre-wrap; }
 q { quotes: "\201C" "\201D" "\2018" "\2019"; }
 small { font-size: 80%; }
 sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
 sup { top: -0.5em; }
 sub { bottom: -0.25em; }
 
-img { border: 0; }
 svg:not(:root) { overflow: hidden; }
 
 figure { margin: 0; }
 
-fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
+// Remove default styling from fieldset tag
+fieldset {
+	border  : 0;
+	margin  : 0;
+	padding : 0;
+}
+
 legend { border: 0; padding: 0; }
 button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0;}
 button, input { line-height: normal; }
@@ -46,8 +158,43 @@ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0
 input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
 button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
-textarea { overflow: auto; vertical-align: top; }
+
+// Allow only vertical resizing of textareas.
+textarea {
+	overflow       : auto;
+	vertical-align : top;
+	resize     : vertical;
+	height     : auto;
+	min-height : 50px;
+}
 
 table { border-collapse: collapse; border-spacing: 0; }
 
+
+/* Miscellaneous useful HTML classes */
+
+.left         { float: left !important; }
+.right        { float: right !important; }
+.text-left    { text-align: left !important; }
+.text-right   { text-align: right !important; }
+.text-center  { text-align: center !important; }
+.text-justify { text-align: justify !important; }
+.hide         { display: none !important; visibility: hidden !important; }
+.visual-hide  {
+	border   : 0 !important;
+	clip     : rect(0 0 0 0) !important;
+	height   : 1px !important;
+	margin   : -1px !important;
+	overflow : hidden !important;
+	padding  : 0 !important;
+	position : absolute !important;
+	width    : 1px !important;
 }
+
+.bold, b, strong { font-weight: 700 !important; }
+.italic, em      { font-style: italic !important; }
+
+// Font smoothing, only works on Safari Webkit
+.antialiased     { -webkit-font-smoothing: antialiased; }
+
+} // include-normalize

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

@@ -16,6 +16,25 @@ $p-margin-bottom: em(30px) !default;
 EDGE Typography
 --------------- */
 
+html,
+body {
+	font-size: $base-font-size;
+}
+
+body {
+	position: relative;
+	background: $body-bg;
+	color: $body-font-color;
+	font-family: $body-font-family;
+	font-weight: $body-font-weight;
+	font-style: $body-font-style;
+	line-height: $body-line-height;
+}
+
+h1, h2, h3, h4, h5, h6, header {
+	font-family : $header-font-family;
+}
+
 h1 { font-size: $h1-font-size }
 h2 { font-size: $h2-font-size }
 h3 { font-size: $h3-font-size }
@@ -30,19 +49,31 @@ p {
 	}
 }
 
-code {
-	display    : inline-block;
-	&, pre {
-		font-family: $code-font-family;
-	}
+ul, ol {
+	list-style: none; // Clear bullet or numbering on plain <ul> and <ol>
 }
 
-ul.inline, ol.inline {
-	list-style-type : none;
+.inline-list {
+	@include clearfix();
+	list-style-type: none;
 	li {
-		display : inline-block;
-		vertical-align:top;
-		margin-right: em(-4px);
+		display: inline-block;
+		float: left;
+		vertical-align: top;
+	}
+}
+
+ul.bullet-list, ol.number-list {
+
+}
+
+// Code
+
+code, kbd, samp {
+	display: inline-block;
+	&, pre {
+		font-size: 1em;
+		font-family: $code-font-family;
 	}
 }
 
@@ -52,4 +83,4 @@ blockquote {
 	}
 }
 
-}
+} // include-typography

data/assets/sass/edge.scss

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

data/assets/sass/for-test.scss

@@ -50,7 +50,7 @@
 
 .custom-block-grid {
 	@include block-grid($per-row:5, $collapse:true);
-
+	
 	@include small {
 		@include block-grid($per-row:2, $collapse:true);
 	}
@@ -78,4 +78,13 @@
 			@include grid-column($columns:10, $center:false, $small:true);
 		}
 	}
+}
+
+[data-page="media-query"] {
+	@include small {
+		background: $red-color;
+	}
+	@include medium-up {
+		background: $green-color;
+	}
 }

data/lib/edge/version.rb

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

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

@@ -4,17 +4,30 @@
 // Settings file to override Edge variables
 // To override, uncomment the variable and set the new value
 
-// If you need font-face, add it here
-// @include font-face("My Custom Font", font-files("my-custom-font.ttf", "my-custom-font.otf"));
+// The first thing to change is Font-family and Main color of your site
+
+// -------
+// FONT
+// -------
+// $header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif";
+// $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;
 
 // ---------------
 // OUTPUT CONFIG
 // ---------------
 
 // $full  : true;  // Output full CSS styling. If false, only gives barebone CSS
-// $debug : false; // No effect currently, might be used in the future
+// $debug : false; // No effect currently, will be used for outputting debug comment
 
-// $include-main       : true;
+// $include-normalize  : true;
 // $include-grid       : true;
 // $include-block-grid : true;
 // $include-visibility : true;
@@ -22,8 +35,6 @@
 // $include-button     : true;
 // $include-form       : true;
 // $include-typography : true;
-
-// $include-normalize  : true;
 // $include-print      : true;
 
 // ------
@@ -33,23 +44,15 @@
 // $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";
-// $code-font-family   : "Consolas", Courier, "monospace";
+// $body-line-height : 1;
 
 // $base-font-size   : 100%;   // 100% is normally 16px
 // $content-width    : 1140px; // Maximum width of the grid
 
-// ----------
-// COLOR
-// ----------
-// Two main colors of your site
-// $main-color    : #0173BC;
-// $sub-color     : #E9E9E9;
-
-// These 5 colors below should NEVER be used directly
+// --------------
+// 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;
@@ -84,14 +87,16 @@
 // Typography
 // ---------------
 // $h1-font-size: em(44px);
-// $h2-font-size: em(37px);
-// $h3-font-size: em(27px);
-// $h4-font-size: em(23px);
+// $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
 // --------
@@ -105,6 +110,7 @@
 // $block-distance  : em(15px);
 // $max-blocks      : 12;
 
+// ----------
 // BUTTON
 // ----------
 // $button-padding : em(10px 20px);

data/template/base/assets/sass/edge-framework.scss

@@ -2,6 +2,7 @@
 @import "edge";
 
 // If you have idea to improve EDGE, write it here temporarily
-// And if you are willing, pass it to info@thesyne.com
+// And if you are willing, pass it to henner@setyono.net
 //
-// Thanks
+// Thanks,
+// - Henner S

data/template/base/config.rb

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

data/template/html/index.html

@@ -4,6 +4,10 @@
 	<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" />
 	

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: edge_framework
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Henner Setyono
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-24 00:00:00.000000000 Z
+date: 2013-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -126,7 +126,6 @@ files:
 - assets/sass/edge/components/_form.scss
 - assets/sass/edge/components/_grid-margin.scss
 - assets/sass/edge/components/_grid.scss
-- assets/sass/edge/components/_main.scss
 - assets/sass/edge/components/_normalize.scss
 - assets/sass/edge/components/_print.scss
 - assets/sass/edge/components/_typography.scss

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

@@ -1,146 +0,0 @@
-@if $include-main {
-
-/* ------------------
-EDGE Boilerplate
---------------------- */
-
-* { margin: 0; 	padding: 0; }
-
-// Set box-sizing globally to handle padding and border widths
-*,
-*:before,
-*:after {
-	@include box-sizing(border-box);
-}
-
-html,
-body {
-	font-size: $base-font-size;
-}
-
-body {
-	position    : relative;
-	background  : $body-bg;
-	color       : $body-font-color;
-	font-family : $body-font-family;
-	font-weight : $body-font-weight;
-	font-style  : $body-font-style;
-	line-height : $body-line-height;
-}
-
-h1, h2, h3, h4, h5, h6, header {
-	font-family : $header-font-family;
-}
-
-p {
-	line-height   : 1.5;
-	margin-top    : 0;
-	margin-bottom : 0;
-}
-
-a {
-	display         : inline-block;
-	cursor          : pointer;
-	text-decoration : none;
-}
-
-// Clear bullet or numbering on plain <ul> and <ol>
-ul, ol {
-	list-style: none;
-}
-
-// A better looking default horizontal rule
-hr {
-	display    : block;
-	height     : 1px;
-	margin     : 1em 0;
-	padding    : 0;
-	border     : 0;
-	border-top : 1px solid #ccc;
-}
-
-// Override `normalize` part that we don't like
-a:focus { outline: none; }
-
-h1, h2, h3, h4, h5, h6 { margin: 0; }
-
-fieldset {
-	border  : 0;
-	margin  : 0;
-	padding : 0;
-}
-
-// Grid Defaults to get images and embeds to work properly
-img,
-object,
-embed { max-width: 100%; height: auto; }
-
-object,
-embed { height: 100%; }
-
-#map_canvas,
-.map_canvas {
-	img,
-	embed,
-	object {
-		max-width: none !important;
-	}
-}
-
-// Allow only vertical resizing of textareas.
-textarea {
-	resize     : vertical;
-	height     : auto;
-	min-height : 50px;
-}
-
-// Make select elements 100% width by default
-select {
-	width: 100%;
-}
-
-// Get rid of gap under images
-img {
-	display: inline-block;
-	vertical-align: middle;
-	-ms-interpolation-mode: bicubic;
-}
-
-// Chrome Sibling Selector Fix
-body {
-	-webkit-animation: bugfix infinite 1s;
-}
-
-@-webkit-keyframes bugfix { 
-	from { padding: 0; }
-	to { padding: 0; }
-}
-
-// -----------------------------------
-/* Miscellaneous useful HTML classes */
-// -----------------------------------
-.left         { float: left !important; }
-.right        { float: right !important; }
-.text-left    { text-align: left !important; }
-.text-right   { text-align: right !important; }
-.text-center  { text-align: center !important; }
-.text-justify { text-align: justify !important; }
-.hide         { display: none !important; visibility: hidden !important; }
-.visual-hide  {
-	border   : 0 !important;
-	clip     : rect(0 0 0 0) !important;
-	height   : 1px !important;
-	margin   : -1px !important;
-	overflow : hidden !important;
-	padding  : 0 !important;
-	position : absolute !important;
-	width    : 1px !important;
-}
-
-.bold, b, strong { font-weight: 700 !important; }
-.italic, em      { font-style: italic !important; }
-
-// Font smoothing, only works on Safari Webkit
-.antialiased     { -webkit-font-smoothing: antialiased; }
-
-}