edge_framework 0.1.0 → 0.2.0

data/site/assets/img/logo/edge-logo-transparent.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="612.036px" height="528.163px" viewBox="15.874 148.445 612.036 528.163"
+	 enable-background="new 15.874 148.445 612.036 528.163" xml:space="preserve">
+<polygon fill="#E4E3D5" enable-background="new    " points="627.91,676.607 183.096,676.607 254.161,552.024 555.617,552.024 "/>
+<polygon fill="#E4E3D5" enable-background="new    " points="322.594,148.445 544.913,533.601 401.73,534.302 250.827,273.204 "/>
+<polygon fill="#E4E3D5" enable-background="new    " points="15.874,676.607 238.369,291.276 310.662,414.983 159.934,676.081 "/>
+</svg>

data/site/assets/img/logo/edge-logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="627.91px" height="528.162px" viewBox="0 148.445 627.91 528.162" enable-background="new 0 148.445 627.91 528.162"
+	 xml:space="preserve">
+<path fill="#D8BC62" d="M59.586,1043.407h-251.97L-36.26,774.101H84.152l-24.566,46.787h-70.516l-35.094,59.128h70.721
+	l-26.32,46.787h-71.116l-39.491,69.447H84.152L59.586,1043.407z"/>
+<path fill="#D8BC62" d="M840.839,1043.407h-290.21V774.104h134.583l26.32,46.785H607.735v59.128h60.514l26.32,46.787h-86.834v69.447
+	h206.783L840.839,1043.407z"/>
+<polygon fill="#D8BC62" points="335.228,996.488 438.755,821.019 450.862,821.019 450.862,820.844 500.871,820.844 527.191,774.169 
+	404.012,774.169 248.195,1043.163 442.966,1043.163 470.163,1043.163 527.191,1043.163 527.191,996.488 527.191,926.827 
+	527.191,879.977 473.673,879.977 452.266,879.977 425.945,926.827 473.673,926.827 473.673,996.488 "/>
+<path fill="#D8BC62" d="M330.043,774.104H187.679h-27.124h-57.07v46.785v222.336h123.281L356.505,818.99L330.043,774.104z
+	 M157.045,996.253V820.891h138.368L191.971,996.253H157.045z"/>
+<polygon fill="#D8BC62" points="627.91,676.607 183.096,676.607 254.161,552.024 555.617,552.024 "/>
+<polygon fill="#D8BC62" points="322.594,148.445 544.913,533.601 401.73,534.302 250.827,273.204 "/>
+<polygon fill="#D8BC62" points="15.874,676.607 238.369,291.277 310.662,414.983 159.934,676.081 "/>
+</svg>

data/site/assets/sass/_setting.scss

@@ -1,40 +1,69 @@
-@charset "UTF-8";
-@import "edge/base";
-// @import "../../../assets/sass/edge/base";
-
 // Settings file to override Edge variables
 
+// -----------------------------------------------------
+// OUTPUT CONFIG
+// PRO:
+//   Set to true to keep only basic styling
+//   Set to false to use full styling
+// INCLUDE:
+//   Set to false if you want to import the mixins only
+// -----------------------------------------------------
+// $pro : true;
+
+// $include-grid       : true;
+// $include-block-grid : true;
+// $include-visibility : true;
+
+// $include-button     : true;
+// $include-form       : true;
+// $include-typography : true;
+
+// $include-normalize  : true;
+// $include-print      : true;
+
 // BODY
 // ------
-$header-font-family : "Roboto Slab", "Helvetica", Helvetica, Arial, sans-serif;
-$body-font-family   : "Open Sans", Helvetica, Arial, sans-serif;
-// $body-bg            : #fff;
-// $body-font-color    : #222;
+$header-font-family : "Bitter", "Helvetica", Helvetica, Arial, sans-serif;
+$body-font-family   : "Source Sans Pro", Helvetica, Arial, sans-serif;
+$code-font-family   : "Source Code Pro", "Consolas", "monospace";
+$body-bg            : #E4E3D5;
+// $body-font-color   : #222;
 
 // COLOR
 // -------
 // $main-color    : #0099CC;
-// $sub-color     : #AAA;
+$sub-color     : #DBA924;
+// $passive-color : #E9E9E9;
 // $alert-color   : #CC0000;
-// $success-color : #3D9900;
+// $success-color : #99CC00;
 
 // GLOBAL VAR
 // -----------
 // $g-radius      : 5px;
+// $g-transition  : all 0.2s ease-in;
 // $content-width : 1140px; // For grid
 
 // MEDIA QUERIES
 // -------------------
-// $phone-screen  : em(480px);
-// $small-screen  : em(767px);
-// $medium-screen : em(1140px);
-// $large-screen  : em(1440px);
+// $phone-screen  : 480px;
+// $small-screen  : 767px;
+// $medium-screen : 1140px;
+// $large-screen  : 1440px;
 // $retina-screen : 192dpi;
 
 // TEXT DIRECTION
 // ---------------------
 // $text-direction   : ltr; // Controls default global text direction, 'rtl' or 'ltr'
 
+// HEADER
+// ---------------------
+// $h1-font-size: em(44px);
+// $h2-font-size: em(37px);
+// $h3-font-size: em(27px);
+// $h4-font-size: em(23px);
+// $h5-font-size: em(18px);
+// $h6-font-size: 1em;
+$header-font-weight: 400;
 
 // GRID
 // --------
@@ -47,4 +76,4 @@ $body-font-family   : "Open Sans", Helvetica, Arial, sans-serif;
 // -----------
 // $block-grid-max-width : em($content-width);
 // $block-grid-total     : 12;
-// $block-grid-margin    : em(25px); // Margin between column at maximum row's width
+// $block-grid-margin    : em(25px); // Margin between block at maximum row's width

data/site/assets/sass/app.scss

@@ -1,7 +1,194 @@
 @import "setting";
-@import "edge/helpers";
-// @import "../../../assets/sass/edge/helpers";
+// @import "edge/helpers";
+@import "../../../assets/sass/edge/no-output";
 
+// COLOR
+$hero-bg    : #EFEDDF;
+$feature-bg : #E4E3D5;
+
+.block-hero {
+	position   : relative;
+	background : $hero-bg;
+	overflow   : hidden;
+
+	.logo {
+		position   : relative;
+		top        : 20%;
+		max-height : em(300px);
+
+		@include small {
+			min-height : 0;
+		}
+	}
+
+	.logo-letter,
+	.logo-shape {
+		@extend %transition;
+		opacity : 0.6;
+		&:hover {
+			opacity : 1;
+		}
+	}
+
+	.pitch-intro {
+		padding : em(20px 10px 20px);
+		z-index : 2;
+
+		@include small {
+			padding-top: 0;
+		}
+		
+		h1, h2 {
+			font-family : $body-font-family;
+			font-weight : 300;
+		}
+
+		h1 {
+			font-size     : em(56px);
+			margin-bottom : em(20px, 56px);
+		}
+
+		h2 {
+			font-size     : em(30px);
+			margin-bottom : em(20px, 30px);
+		}
+
+		code {
+			background : white;
+			font-size  : em(20px);
+			padding    : em(5px 10px);
+			border     : 1px solid rgba(black, 0.1);
+			margin-bottom : em(20px, 20px);
+		}
+
+		.hero-button {
+			@include button(#1D7886);
+			text-transform : uppercase;
+			font-size      : em(20px);
+		}
+
+		&.has-logo {
+			background : $hero-bg url('../img/logo/edge-logo-transparent.svg') center right no-repeat;
+			background-size: auto 125%;
+			@include small {
+				background: none;
+			}
+		}
+	}
+
+	.ruby-install {
+		margin-top: 1.29em;
+		@include small {
+			margin-top: 0;
+		}
+	}
+
+	@include small {
+		font-size: 12px;
+
+		background : $hero-bg url('../img/logo/edge-logo-transparent.svg') center right no-repeat;
+		background-size: auto 125%;
+	}
+}
+
+@mixin feature-button($button-color: $main-color) {
+	border-top: 2px solid $button-color;
+	&:hover {
+		background: $button-color;
+	}
+} 
+
+.block-feature {
+	background : $feature-bg;
+	padding    : em(20px 10px 20px);
+	margin-bottom: em(15px);
+	
+	.feature-button {
+		@extend %transition;
+		display  : block;
+		padding  : em(20px 0);
+		color    : inherit;
+		text-align : center;
+		&:hover {
+			color: white;
+		}
+		&:active {
+			@include box-shadow(
+				em( inset 1px 1px 12px rgba(black, 0.1) ),
+				em( inset -1px -1px 12px rgba(black, 0.1) )
+			);
+		}
+	}
+
+	.feature-list {
+		> li {
+			margin-bottom : em(15px);
+
+			&:nth-child(1) {
+				.feature-button {
+					@include feature-button($main-color);
+				}
+			}
+			&:nth-child(2) {
+				.feature-button {
+					@include feature-button($sub-color);
+				}
+			}
+			&:nth-child(3) {
+				.feature-button {
+					@include feature-button($alert-color);
+				}
+			}
+			&:nth-child(4) {
+				.feature-button {
+					@include feature-button($success-color);
+				}
+			}
+		}
+	}
+
+	.feature-item {
+		position         : relative;
+		background-color : white;
+		@include box-shadow(em(0 1px 2px rgba(black, 0.2) ) );
+	}
+	
+	.feature-description,
+	.feature-title {
+		text-align: center;
+	}
+
+	.feature-description {
+		padding: em(0 15px 15px);
+	}
+
+	.feature-title {
+		padding   : em(15px, 25px);
+		font-size : em(25px);
+	}
+}
+
+#footer {
+	background: #3F4944;
+	color: #BBB;
+	padding: em(40px 10px 20px);
+
+	.footer-nav-title {
+		margin-bottom  : em(10px, 18px);
+	}
+
+	.footer-nav {
+		a {
+			padding-bottom: em(8px);
+			color: inherit;
+		}
+	}
+
+	.copyright {
+		text-align: center;
+		padding: em(20px 0);
+	}
+}
 
 .demo-grid {
 	p {
@@ -10,21 +197,25 @@
 	}
 	.column,
 	.columns {
-		margin-bottom  : 15px;
-		padding-top    : 10px;
-		padding-bottom : 10px;
-		background     : #eee;
-		text-align     : center;
+		p {
+			margin-bottom  : em(15px);
+			padding-top    : em(10px);
+			padding-bottom : em(10px);
+			background     : em(#eee);
+			text-align     : center;
+		}
 
 		.column,
 		.columns {
-			background    : #ddd;
-			margin-bottom : 0;
+			p {
+				background    : #ddd;
+			}
 			
 			.column,
 			.columns {
-				background    : #ccc;
-				margin-bottom : 0;
+				p {
+					background    : #ccc;
+				}
 		 	}
 		}
 	}
@@ -47,10 +238,4 @@
 	padding : em(10px 15px 25px);
 }
 
-@include sticky-footer(54px, $containerize: true);
-
-@include sprite-retina("icons", "ic");
-
-body {
-	text-shadow: 2px 2px 3px yellow;
-}
+@include sprite-retina("icons", "ic");

data/site/assets/sass/edge.scss

@@ -1,3 +1,3 @@
 @import "setting";
-@import "edge/components";
-// @import "../../../assets/sass/edge";
+// @import "edge/components";
+@import "../../../assets/sass/edge";

data/site/config.rb

@@ -1,5 +1,5 @@
 # Require any additional compass plugins here.
-require "edge_framework"
+# require "edge_framework"
 
 # Set this to the root of your project when deployed:
 http_path       = "/"

data/site/views/docs/grid.erb

@@ -3,108 +3,80 @@
 		<div class="demo-grid">
 			<h1>Grid</h1>
 				<div class="row">
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
+					<div class="large-4 columns"><p>4</p></div>
+					<div class="large-4 columns"><p>4</p></div>
+					<div class="large-4 columns"><p>4</p></div>
 				</div>
 				<div class="row">
-					<div class="large-4 columns">4</div>
-					<div class="large-4 columns">4</div>
-					<div class="large-4 columns">4</div>
+					<div class="large-6 columns"><p>6</p></div>
+					<div class="large-6 columns"><p>6</p></div>
 				</div>
 				<div class="row">
-					<div class="large-6 columns">6</div>
-					<div class="large-6 columns">6</div>
-				</div>
-				<div class="row">
-					<div class="large-12 columns">12</div>
+					<div class="large-12 columns"><p>12</p></div>
 				</div>
 			
 			<h1>Collapsed Grid</h1>
 				<div class="row collapse">
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-					<div class="large-1 columns">1</div>
-				</div>
-				<div class="row collapse">
-					<div class="large-4 columns">4</div>
-					<div class="large-4 columns">4</div>
-					<div class="large-4 columns">4</div>
+					<div class="large-4 columns"><p>4</p></div>
+					<div class="large-4 columns"><p>4</p></div>
+					<div class="large-4 columns"><p>4</p></div>
 				</div>
 				<div class="row collapse">
-					<div class="large-6 columns">6</div>
-					<div class="large-6 columns">6</div>
+					<div class="large-6 columns"><p>6</p></div>
+					<div class="large-6 columns"><p>6</p></div>
 				</div>
 				<div class="row collapse">
-					<div class="large-12 columns">12</div>
+					<div class="large-12 columns"><p>12</p></div>
 				</div>
 
 			<h1>Responsive Grid</h1>
 				<div class="row">
-					<div class="large-4 small-4 columns">large-4 small-4</div>
-					<div class="large-4 small-4 columns">large-4 small-4</div>
-					<div class="large-4 small-4 columns">large-4 small-4</div>
+					<div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
+					<div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
+					<div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
 				</div>
 				<div class="row">
-					<div class="large-6 small-8 columns">large-6 small-8</div>
-					<div class="large-6 small-4 columns">large-6 small-4</div>
+					<div class="large-6 small-8 columns"><p>large-6 small-8</p></div>
+					<div class="large-6 small-4 columns"><p>large-6 small-4</p></div>
 				</div>
 				<div class="row">
-					<div class="large-8 small-4 columns">large-8 small-4</div>
-					<div class="large-4 small-8 columns">large-4 small-8</div>
+					<div class="large-8 small-4 columns"><p>large-8 small-4</p></div>
+					<div class="large-4 small-8 columns"><p>large-4 small-8</p></div>
 				</div>
 
 			<h1>Offset and Source Ordering</h1>
 				<div class="row">
-					<div class="large-3 columns">large-3</div>
-					<div class="large-6 large-offset-3 columns">large-6 large-offset-3</div>
+					<div class="large-3 columns"><p>large-3</p></div>
+					<div class="large-6 large-offset-3 columns"><p>large-6 large-offset-3</p></div>
 				</div>
 				<div class="row">
-					<div class="large-3 push-9 columns">push-9</div>
-					<div class="large-9 pull-3 columns">pull-3, last-child</div>
+					<div class="large-3 push-9 columns"><p>push-9</p></div>
+					<div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
 				</div>
 				<div class="row collapse">
 					<p>collapsed</p>
-					<div class="large-3 push-9 columns">push-9</div>
-					<div class="large-9 pull-3 columns">pull-3, last-child</div>
+					<div class="large-3 push-9 columns"><p>push-9</p></div>
+					<div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
 				</div>
 			
 			<h1>Nested Grid</h1>
 				<div class="row">
 					<div class="large-12 columns">
-						12
+						<p>12</p>
 						<div class="row">
 							<div class="large-8 columns">
-								8
+								<p>8</p>
 								<div class="row">
-									<div class="large-6 columns">6</div>
-									<div class="large-6 columns">6</div>
+									<div class="large-6 columns"><p>6</p></div>
+									<div class="large-6 columns"><p>6</p></div>
 								</div>
 								
 							</div>
 							<div class="large-4 columns">
-								4
+								<p>4</p>
 								<div class="row">
-									<div class="large-7 columns">7</div>
-									<div class="large-5 columns">5</div>
+									<div class="large-7 columns"><p>7</p></div>
+									<div class="large-5 columns"><p>5</p></div>
 								</div>
 							</div>
 						</div>
@@ -114,32 +86,35 @@
 			<h1>Responsive Nested Grid</h1>
 				<div class="row">
 					<div class="large-12 small-12 columns">
-						12-12
+						<p>12-12</p>
 						<div class="row">
 							<div class="large-8 small-8 columns">
-								8-8
+								<p>8-8</p>
 								<div class="row">
-									<div class="large-6 small-9 columns">6-9</div>
-									<div class="large-6 small-3 columns">6-3</div>
+									<div class="large-6 small-9 columns"><p>6-9</p></div>
+									<div class="large-6 small-3 columns"><p>6-3</p></div>
 								</div>
 							</div>
 							<div class="large-4 small-4 columns">
-								4-4
+								<p>4-4</p>
 								<div class="row">
-									<div class="large-7 small-7 columns">7-7</div>
-									<div class="large-5 small-5 columns">5-5</div>
+									<div class="large-7 small-7 columns"><p>7-7</p></div>
+									<div class="large-5 small-5 columns"><p>5-5</p></div>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
+			
 			<h1>Responsive Grid with Offset</h1>
 				<div class="row">
-					<div class="large-8 large-offset-2 small-5 small-offset-3 columns">large-8 large-offset-2 small-5 off-3</div>
+					<div class="large-8 large-offset-2 small-5 small-offset-3 columns">
+						<p>large-8 large-offset-2 small-5 off-3</p>
+					</div>
 				</div>
 				<div class="row">
 					<div class="large-6 large-centered small-8 small-centered columns">
-						large-6 large-centered small-8 small-centered
+						<p>large-6 large-centered small-8 small-centered</p>
 					</div>
 				</div>
 		</div>

data/site/views/index.erb

@@ -1,10 +1,58 @@
-<div id="content-home">
-	<div class="row ">
+<div class="block-hero">
+	<div class="row">
+		<div class="large-6 small-12 columns">
+			<div class="pitch-intro has-logo">
+				<h1>EDGE</h1>
+				<h2>Light-weight front-end framework</h2>
+				<a href="/docs/" class="button hero-button">Read the Docs</a>
+			</div>
+		</div>
+		<div class="large-6 small-12 columns">
+			<div class="pitch-intro">
+				<div class="ruby-install">
+					<h2>Ruby Installation:</h2>
+					<code>gem install edge_framework</code>
+				</div>
+				<a href="/docs/ruby/" class="button hero-button">What is that?</a>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="block-feature">
+	<div class="row">
 		<div class="large-12 columns">
-			<ul>
-				<li><a href="<%= url('/docs/grid') %>">Grid</a></li>
-				<li><a href="<%= url('/docs/block_grid') %>">Block Grid</a></li>
-			</ul>
+			<section class="wrapper-feature">
+				<ul class="feature-list large-block-grid-4 small-block-grid-2">
+					<li>
+						<div class="feature-item">
+							<h1 class="feature-title">Stylesheet</h1>
+							<p class="feature-description">Light-weight framework for front-end developer that works with designer.</p>
+							<a href="/docs/css/" class="feature-button">Read Stylesheet Docs</a>
+						</div>
+					</li>
+					<li>
+						<div class="feature-item">
+							<h1 class="feature-title">JavaScript</h1>
+							<p class="feature-description">Collection of best open source library, re-written into consistent script.</p>
+							<a href="/docs/js/" class="feature-button">Read JavaScript Docs</a>
+						</div>
+					</li>
+					<li>
+						<div class="feature-item">
+							<h1 class="feature-title">Compass</h1>
+							<p class="feature-description">Edge is an extension of Compass, which provide programming logic to CSS.</p>
+							<a href="/docs/compass/" class="feature-button">Read Compass Docs</a>
+						</div>
+					</li>
+					<li>
+						<div class="feature-item">
+							<h1 class="feature-title">Template</h1>
+							<p class="feature-description">Kick start your new project with our template creator. Nothing fancy though.</p>
+							<a href="/docs/template/" class="feature-button">Read Template Docs</a>
+						</div>
+					</li>
+				</ul>
+			</section>
 		</div>
 	</div>
 </div>