edge_framework 0.6.0 → 0.6.1

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

@@ -0,0 +1,320 @@
+// ------------------------------------------
+// CODE HIGHLIGHTER
+//   Based on Prism.js - Coy Theme
+//   @origin Tim Shedor
+//           https://github.com/tshedor/workshop-wp-theme
+// -------------------------------------------------------
+
+$code-font-family   : "Consolas", Courier, "monospace" !default;
+$code-theme         : light !default; // dark or light
+$code-margin-bottom : 1.5em !default;
+@if $include-typography {
+  $code-margin-bottom : $p-margin-bottom;
+}
+
+$code-markup-color  : $blue-color;
+$code-js-color      : #ff8f00; // orange
+$code-css-color     : $green-color;
+$code-ruby-color    : $red-color;
+$code-php-color     : #626293; // purple
+$code-sass-color    : #c6538c; // pink
+
+$code-python-color  : #376a94; // dark-blue
+
+// Add decoration to the code-block
+@mixin code-decor($color) {
+
+  &:after {
+    background: $color;
+  }
+
+  code {
+    @include background-image(linear-gradient(transparent 50%, rgba($color, .04) 50% ) );
+  }
+
+  .line-highlight:before,
+  .line-highlight[data-end]:after {
+    background: $color;
+  }
+}
+
+// Add styling to code-block
+@mixin code-block($theme: $code-theme) {
+  @if $code-theme == light {
+    @include contrasted(#fff);
+  } @else if $code-theme == dark {
+    @include contrasted(#252525);
+  }
+}
+
+@if $include-code {
+/* ------------------
+EDGE CODE Highlighter
+--------------------- */
+
+// Reset
+code, kbd, samp {
+  display: inline-block;
+  &, pre {
+    font-size: 1em;
+    font-family: $code-font-family;
+  }
+}
+
+pre,
+code {
+  @include code-block();
+  
+  white-space: pre;
+  word-spacing: normal;
+
+  @include css3(tab-size, 2, $webkit:false, $moz:true, $ms:false, $o:true);
+  @include css3(hyphens, none, $webkit:true, $moz:true, $ms:true, $o:false);
+}
+
+pre {
+  position: relative;
+  overflow: auto;
+  padding: 0;
+  margin-bottom: $code-margin-bottom;
+  max-height: 30em;
+
+  @include code-decor($passive-color);
+
+  @include box-shadow(-1px 0px 0px 0px #ddd, 0px 0px 0px 1px #ddd);
+  
+  @include small {
+    &:hover {
+      &:after {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: .5em;
+    right: .5em;
+
+    width: 1em;
+    height: 1em;
+
+    background: $passive-color;
+    opacity: .2;
+
+    padding: em(5px 10px);
+    font-family: $code-font-family;
+    color: white;
+    text-transform: uppercase;
+
+    @include transition($g-transition);
+  }
+
+  &[data-lang="markup"] {
+    @include code-decor($code-markup-color);
+  }
+
+  &[data-lang="css"] {
+    @include code-decor($code-css-color);
+  }
+
+  &[data-lang="javascript"] {
+    @include code-decor($code-js-color);
+  }
+
+  &[data-lang="ruby"] {
+    @include code-decor($code-ruby-color);
+  }
+
+  &[data-lang="python"] {
+    @include code-decor($code-python-color);
+  }
+
+  > code {
+    display: block;
+    overflow: visible;
+    background-size: 3em 3em;
+    background-origin: content-box;
+    padding-left: 0.5em;
+  }
+}
+
+:not(pre) {
+  > code {
+    @include code-block();
+  }
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  display: inline-block;
+  overflow: hidden;
+  position:relative;
+  padding: 0;
+  color: #c92c2c;
+  vertical-align: bottom;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #7D8B99;
+}
+
+.token.punctuation {
+  color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol {
+  color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.function,
+.token.builtin {
+  color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+  color: #a67f59;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+  color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+  color: #e90;
+}
+
+[data-lang="css"] .token.string,
+.style .token.string {
+  color: #a67f59;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+  font-weight: normal;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+/* Plugin styles */
+
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before {
+  color: #e0d7d1;
+}
+
+/* Line Highlighter */
+
+.line-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+
+  background: hsla(24, 20%, 50%,.08);
+  background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+  background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+  background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+  background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+  
+  pointer-events: none;
+  
+  line-height: inherit;
+  white-space: pre;
+}
+
+  .line-highlight:before,
+  .line-highlight[data-end]:after {
+    content: attr(data-start);
+    position: absolute;
+    z-index: 2;
+    top: .4em;
+    left: .5em;
+    min-width: 1em;
+    padding: 0 .5em;
+    color: hsl(24, 20%, 95%);
+    font: bold 65%/1.5 sans-serif;
+    text-align: center;
+    vertical-align: .3em;
+    border-radius: 999px;
+    text-shadow: none;
+    box-shadow: 0 1px white;
+  }
+  
+  .line-highlight[data-end]:after {
+    content: attr(data-end);
+    top: auto;
+    bottom: .4em;
+  }
+
+/* Line numbers */
+
+pre.line-numbers {
+  position: relative;
+  counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+  position: relative;
+  padding-left: 2.5em;
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: .5em;
+  letter-spacing: -1px;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+}
+
+  .line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+  }
+
+    .line-numbers-rows > span:before {
+      content: counter(linenumber);
+      color: #ddd;
+      display: block;
+      padding-right: 0.8em;
+      text-align: right;
+    }
+
+} // $include-code

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

@@ -1,16 +1,19 @@
 @if $include-normalize {
 	
-/* ---------------------------
+/* ------------------------
 EDGE Normalize
 Based on git.io/normalize
------------------------------- */
-// NOTE: Customized style is the commented part
+--------------------------- */
+// Normalize can work independently outside EDGE,
+// but the reset is 100% complete with EDGE Typography
 
 // Set box-sizing globally to handle padding and border widths
 *,
 *:before,
 *:after {
-	@include box-sizing(border-box);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 // Basic reset margin and padding
@@ -19,11 +22,6 @@ Based on git.io/normalize
 	padding: 0;
 }
 
-// html,
-// body {
-// 	font-size: $base-font-size;
-// }
-
 // Chrome Sibling Selector Fix
 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { 
@@ -50,13 +48,6 @@ a:active, a:hover { outline: 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;

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

@@ -4,10 +4,14 @@ $body-font-color  : #222 !default;
 $body-font-weight : normal !default;
 $body-font-style  : normal !default;
 
-// FONT
+// Compass' VERTICAL RHYTM
+// note: variable for $body-font-size and $body-line-height is in _base.scss due to it being used in em conversion
+$base-font-size   : $body-font-size;
+$base-line-height : $body-line-height;
+
+// FONT FAMILY
 $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
 $h1-font-size : 44px !default;
@@ -21,7 +25,7 @@ $header-font-color  : $body-font-color !default;
 $header-font-weight : 700 !default;
 
 // PARAGRAPH
-$p-margin-bottom    : em(24px) !default;
+$p-margin-bottom    : 1.5em !default;
 
 // LIST
 $ul-parent-style  : disc !default;
@@ -97,6 +101,7 @@ h5 { font-size: em($h5-font-size); }
 h6 { font-size: em($h6-font-size); }
 
 p {
+	margin-top: 0;
 	margin-bottom: $p-margin-bottom;
 	&:last-child {
 		margin-bottom: 0;
@@ -191,20 +196,10 @@ ol {
 	}
 }
 
-// Code
-
-code, kbd, samp {
-	display: inline-block;
-	&, pre {
-		font-size: 1em;
-		font-family: $code-font-family;
-	}
-}
-
 blockquote {
-	cite {
-		display: block;
-	}
+  cite {
+    display: block;
+  }
 }
 
 } // include-typography

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

@@ -3,18 +3,18 @@
 // Slight modification from Compass' footer
 // Structure must be:
 // <body>
-//     <div id="main-wrapper">
-//         ...
-//         <div id="footer-push"></div>
-//     </div>
-//     <footer id="footer"></footer>
+//   <div id="main-wrapper">
+//     ...
+//     <div id="footer-push"></div>
+//   </div>
+//   <footer class=".main-footer"></footer>
 // </body>
 // -----------------------------------------
 
-@mixin sticky-footer($footer-height,
-					$wrapper       : '#main-wrapper', 
-					$footer-pusher : '#footer-push', 
-					$footer        : '#footer',
+@mixin sticky-footer($height,
+					$wrapper       : '#main-wrapper',
+					$footer-push   : '#footer-push',
+					$footer        : '.main-footer',
 					$containerize  : false) {
 	html, body {
 		height : 100%;
@@ -24,16 +24,16 @@
 		min-height : 100%;
 		height     : auto !important;
 		height     : 100%;
-		margin     : 0 auto ($footer-height * -1);
+		margin     : 0 auto ($height * -1);
 		@if $containerize {
 			max-width  : 1440px; 
 			background : $body-bg;
-			@include box-shadow(0px 0px 20px rgba(black, 0.2));
+			@include box-shadow(0px 0px 20px rgba(black, 0.2) );
 		}
 	}
-	#{$footer}, #{$footer-pusher} {
+	#{$footer}, #{$footer-push} {
 		margin     : 0 auto;
-		height     : $footer-height;
+		height     : $height;
 		@if $containerize {
 			max-width  : 1440px;
 		}

data/assets/test.html

@@ -0,0 +1,74 @@
+<!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>
+	
+	<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>
+			
+			<pre><code>
+				<ul class="with-tab">
+					<li>...</li>
+				</ul>
+			</code></pre>
+
+		</div>
+	</div>
+	<div id="footer-push"></div>
+</div>
+<footer id="footer">
+</footer>
+
+<script src="js-docs/jquery.min.js"></script>
+<script>
+	(function () {
+		var htmlText = $("pre > code").html();
+		// remove trailing and following line break
+		var filteredText = htmlText.replace(/</g, "&lt;").replace(/^\n/, "").replace(/\n\s+$/, "");
+
+		// split the lines and count the offset
+		var lines = filteredText.split("\n");
+		var offset = lines[0].match(/^\s*/)[ 0 ].length;
+
+		// remove excess whitespace from each line
+    lines = lines.map(function(line) {
+      return line.slice(offset);
+    });
+
+		//.replace(/(\n)\s+/g, "$1").replace(/^\n/, "");
+		$("pre > code").html(lines.join("\n") );
+	}() );
+</script>
+</body>
+</html>

data/assets/test2.html

@@ -18,19 +18,6 @@
 		}
 	</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;
@@ -49,14 +36,39 @@
 			<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>
+			
+			<pre><code>
+				<ul class="with-tab">
+					<li>...</li>
+				</ul>
+			</code></pre>
+
 		</div>
 	</div>
-	
-
-
 	<div id="footer-push"></div>
 </div>
 <footer id="footer">
 </footer>
+
+<script src="js-docs/jquery.min.js"></script>
+<script>
+	(function () {
+		var htmlText = $("pre > code").html();
+		// remove trailing and following line break
+		var filteredText = htmlText.replace(/</g, "&lt;").replace(/^\n/, "").replace(/\n\s+$/, "");
+
+		// split the lines and count the offset
+		var lines = filteredText.split("\n");
+		var offset = lines[0].match(/^\s*/)[ 0 ].length;
+
+		// remove excess whitespace from each line
+    lines = lines.map(function(line) {
+      return line.slice(offset);
+    });
+
+		//.replace(/(\n)\s+/g, "$1").replace(/^\n/, "");
+		$("pre > code").html(lines.join("\n") );
+	}() );
+</script>
 </body>
 </html>

data/edge.gemspec

@@ -1,26 +1,26 @@
-# coding: utf-8
-require File.expand_path('../lib/edge/version', __FILE__)
-
-Gem::Specification.new do |s|
-	s.name          = "edge_framework"
-	s.version       = Edge::VERSION
-	s.authors       = ["Henner Setyono"]
-	s.email         = ["henner@setyono.net"]
-	s.description   = %q{Minimal Responsive Framework}
-	s.summary       = %q{Minimal Responsive Framework with Compass}
-	s.homepage      = "http://edge.setyono.net"
-	s.license       = "MIT"
-
-	s.files         = `git ls-files`.split($/)
-	s.executables   = ["edge"]
-	s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n") #spec.files.grep(%r{^(test|spec|features)/})
-	s.require_paths = ["lib"]
-
-	s.add_dependency "sass", [">= 3.2.0"]
-	s.add_dependency "compass", [">= 0.12.0"]
-	s.add_dependency "win32console" # Color output for Windows
-
-	s.add_development_dependency "bundler", "~> 1.3"
-	s.add_development_dependency "rake"
-	s.add_development_dependency "rspec"
-end
+# coding: utf-8
+require File.expand_path('../lib/edge/version', __FILE__)
+
+Gem::Specification.new do |s|
+	s.name          = "edge_framework"
+	s.version       = Edge::VERSION
+	s.authors       = ["Henner Setyono"]
+	s.email         = ["henner@setyono.net"]
+	s.description   = %q{Responsive SASS Framework}
+	s.summary       = %q{Responsive SASS Framework that utilize Compass to its full extend}
+	s.homepage      = "http://edge.setyono.net"
+	s.license       = "MIT"
+
+	s.files         = `git ls-files`.split($/)
+	s.executables   = "edge"
+	s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+	s.require_paths = ["lib"]
+
+	s.add_dependency "sass", [">= 3.2.0"]
+	s.add_dependency "compass", [">= 0.12.0"]
+	s.add_dependency "win32console" # Color output for Windows
+
+	s.add_development_dependency "bundler", "~> 1.3"
+	s.add_development_dependency "rake"
+	s.add_development_dependency "rspec"
+end

data/lib/edge/version.rb

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