edge_framework 0.9.0 → 0.9.9

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

@@ -1,8 +1,11 @@
+// ==================
+// EDGE TYPOGRAPHY
+// ==================
+
 // BODY
 $body-background  : #fff !default;
 $body-font-color  : #222 !default;
-$body-font-weight : normal !default;
-$body-font-style  : normal !default;
+$body-font-weight : 400 !default;
 
 // 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
@@ -34,172 +37,158 @@ $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);
-		}
-	}
+// ------------------------------------------------
+// VERTICAL RHYTHM
+// - Apply vertically-aligned paragraph and header
+// ------------------------------------------------
+@mixin vertical-rhythm(
+  $font-size   : $base-font-size,
+  $line-height : $base-line-height,
+  $for-base    : false) {
+
+  $base-font-size   : $font-size;
+  $base-line-height : $font-size * $line-height;
+  
+  @if not $for-base {
+    font-size: em($font-size);
+    line-height: $line-height;
+  }
+  
+  h1 { @include adjust-font-size-to($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,
+    &:last-of-type {
+      @include trailer(0);
+    }
+
+    + ul,
+    + ol {
+      @include trailer(1);
+    }
+  }
 }
 
-@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);
+// ------------------------------
+// BASELINE
+// - Create notebook-like row
+// ------------------------------
+@mixin baseline(
+  $font-size   : $base-font-size,
+  $line-height : $base-line-height) {
+
+  @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 {
+@if $include-typography and not $external-call {
 
-/* ------------------
-EDGE Typography
---------------------- */
+/* -----------------
+  EDGE Typography
+----------------- */
 
 body {
-	position: relative;
-	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: $base-line-height;
-	color: $body-font-color;
+  position: relative;
+  background: $body-background;
+  font-size: $base-font-size;
+  font-family: $body-font-family;
+  font-weight: $body-font-weight;
+  line-height: $base-line-height;
+  color: $body-font-color;
 }
 
 .baseline {
-	@include baseline();
+  @include baseline();
 }
 
 h1, h2, h3, h4, h5, h6 {
-	color: $header-font-color;
-	font-family: $header-font-family;
-	font-weight: $header-font-weight;
+  color: $header-font-color;
+  font-family: $header-font-family;
+  font-weight: $header-font-weight;
+}
+
+a {
+  color: $main-color;
 }
 
-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-top: 0;
-	margin-bottom: $p-margin-bottom;
-	&:last-child {
-		margin-bottom: 0;
-	}
+@if $vertical-rhythm {
+  @include vertical-rhythm($for-base: true);
+}
+@else {
+  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-top: 0;
+    margin-bottom: $p-margin-bottom;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    + ul,
+    + ol {
+      margin-bottom: $p-margin-bottom;
+    }
+  }
 }
 
-ul, ol {
-	list-style-type: none; // Clear bullet or numbering on plain <ul>
+// -----------
+// LIST
+// -----------
 
-	&.inline-list {
-		@include clearfix();
+.inline-list {
+  @include clearfix();
 
-		> li {
-			display: inline-block;
-			float: left;
-			vertical-align: top;
-		}
-	}
+  > 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);
-		}
-	}
+ul {
+  list-style-type: $ul-parent-style;
+  padding-left: 20px;
+  
+  &[class] {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
+  ul {
+    list-style-type: $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) ".";
-		}
-	}
-}
+  list-style-type: $ol-parent-style;
+  padding-left: 25px;
 
-// 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;
-	}
+  ol {
+    list-style-type: $ol-child-style;
+  }
 }
 
 blockquote {
+  margin-bottom: $p-margin-bottom;
+  
   cite {
     display: block;
+    font-style: italic;
   }
 }
 

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

@@ -1,53 +1,165 @@
+// ==================
+// EDGE VISIBILITY
+// ==================
+
+// -------------
+// VISIBLE ON
+// - Set the display of special element
+// ------------------------------------
 @mixin visible-on($size, $display: inherit) {
-	@if $size == large {
-		&.hide-for-large { display: $display !important; }
-	} @else if $size == small {
-		&.hide-for-small { display: $display !important; }
-	}
+  @if $size == large {
+    &.hide-for-large,
+    &.show-for-small,
+    &.show-for-mini { display: none !important; }
+    
+    &.hide-for-small,
+    &.hide-for-mini,
+    &.show-for-large { display: $display !important; }
+  }
+  @else if $size == small {
+    &.hide-for-small,
+    &.show-for-large { display: none !important; }
+
+    &.show-for-small,
+    &.hide-for-large { display: $display !important; }
+  }
+  @else if $size == mini {
+    &.hide-for-mini,
+    &.show-for-small { display: none !important; }
+    
+    &.show-for-mini { display: $display !important; }
+  }
 }
 
-// Elements that need special `display`
+// ---------------------------------
+// SPECIAL DISPLAY
+// - Elements that needs special display style
+// --------------------------------------------
 @mixin special-display($size) {
-	table {
-		@include visible-on($size, table);
-	}
-	thead {
-		@include visible-on($size, table-header-group);
-	}
-	tbody {
-		@include visible-on($size, table-row-group);
-	}
-	tr {
-		@include visible-on($size, table-row);
-	}
-	td, th {
-		@include visible-on($size, table-cell);
-	}
-	span, b, em, strong, .bold, .italic, code {
-		@include visible-on($size, inline-block);
-	}
-}
-
-@if $include-visibility {
-	
-/* ---------------
-EDGE Visibility
---------------- */
-
-/* Above small breakpoint (>#{$small-screen}) */
-.hide-for-large { display: none !important; }
-@include above(small) {
-	.hide-for-small { display: inherit !important; }
-	@include special-display(small);
-}
-
-
-/* Below small breakpoint (<=#{$small-screen}) */
+  table {
+    @include visible-on($size, table);
+  }
+  thead {
+    @include visible-on($size, table-header-group);
+  }
+  tbody {
+    @include visible-on($size, table-row-group);
+  }
+  tr {
+    @include visible-on($size, table-row);
+  }
+  td, th {
+    @include visible-on($size, table-cell);
+  }
+  span, b, em, strong, .bold, .italic {
+    @include visible-on($size, inline-block);
+  }
+}
+
+// ---------------------------------
+// HIDE FOR
+// - Hide the element on that screen size
+// - hide-for(small) is still hidden on mini
+// ------------------------------------------
+@mixin hide-for($size) {
+  @if $size == large {
+    @include above(small) {
+      display: none;
+    }
+  }
+
+  @else if $size == small {
+    @include below(small) {
+      display: none;
+    }
+  }
+
+  @else if $size == mini {
+    @include below(mini) {
+      display: none;
+    }
+  }
+}
+
+// ---------------------------------
+// SHOW FOR
+// - Show the element only on that size
+// - show-for(small) is still visible on mini
+// -------------------------------------------
+@mixin show-for($size) {
+  @if $size == large {
+    @include below(small) {
+      display: none;
+    }
+  }
+
+  @else if $size == small {
+    @include above(small) {
+      display: none;
+    }
+  }
+
+  @else if $size == mini {
+    @include above(mini) {
+      display: none;
+    }
+  }
+}
+
+@if $include-visibility and not $external-call {
+  
+/* -----------------
+  EDGE Visibility
+----------------- */
+
+.hide-for-large,
+.show-for-small,
+.show-for-mini {
+  display: none !important;
+}
+
+.hide-for-small,
+.hide-for-mini,
+.show-for-large {
+  display: inherit !important;
+}
+
+@include special-display(large);
+
 @include below(small) {
-	.hide-for-small { display: none !important; }
-	.hide-for-large { display: inherit !important; }
-	@include special-display(large);
+  // .hide-for-mini VISIBLE
+  // .show-for-mini NONE
+
+  .hide-for-small,
+  .show-for-large {
+    display: none !important;
+  }
+
+  .show-for-small,
+  .hide-for-large {
+    display: inherit !important;
+  }
+
+  @include special-display(small);
 }
 
+@include below(mini) {
+  // .hide-for-large VISIBLE
+  // .show-for-large NONE
+  // .hide-for-small NONE
+
+  .hide-for-mini,
+  .show-for-small {
+    display: none !important;
+  }
+
+  .show-for-mini {
+    display: inherit !important;
+  }
+
+  @include special-display(mini);
 }
 
+
+} // include-visibility
+

data/assets/sass/edge/helpers/_sprites.scss

@@ -4,80 +4,92 @@
 // - Image's type must be PNG
 // - Image's name can't start with number or contains special symbol like `@`
 //
-// - In your config.rb, add `relative_assets = true`
-// - If you use 3rd party precompiler like Prepros,
-//   don't forget to tick the `Full Compass Support`
-//
 // Special Thanks:
 // www.gayadesign.com/diy/retina-sprites-for-compass
 // -----------------------------------------------------
 
+
+// --------------------------
+// Loop through sprite-map
+// --------------------------
+@mixin loop-sprite-map(
+  $map,
+  $is-retina  : false ,
+  $prefix     : "") {
+
+  $divide-by  : 1; // for retina sprites' scaling
+  $sprite-url : "";
+
+  @if $is-retina {
+    $divide-by : 2;
+    $sprite-url : sprite-url($map);
+  }
+
+  @each $i in sprite_names($map) {
+    &.#{$prefix}#{$i} {
+      
+      // It makes sure that if the sprite doesn't exist in Retina folder,
+      //     it uses sprite from the Standard one.
+      @if $is-retina {  
+        background: $sprite-url;
+        background-size: 
+          (image-width(sprite-path($map)) / 2)
+          (image-height(sprite-path($map)) / 2);
+      }
+      background-position:
+        round(nth(sprite-position($map, $i), 1) / $divide-by)
+        round(nth(sprite-position($map, $i), 2) / $divide-by);
+      height : image-height(sprite-file($map, $i)) / $divide-by;
+      width  : image-width(sprite-file($map, $i)) / $divide-by;
+    }
+  }
+}
+
+// --------------------------
 // Generate standard sprites
+// --------------------------
 @mixin sprite(
-	$folder-name   : "sprites",
-	$main-class    : "sprite",
-	$prefix-class  : "") {
-	$sprites: sprite-map("#{$folder-name}/*.png", $layout: smart);
-	.#{$main-class}{
-		background : $sprites;
-		display    : inline-block;
-		@include loop-sprite-map($sprites, false, $prefix-class);
+  $folder  : "sprites",
+  $class   : "sprite",
+  $prefix  : "") {
 
-		@content; // placeholder for retina sprites
-	}
+  $sprites: sprite-map("#{$folder}/*.png", $layout: smart);
+
+  .#{$class} {
+    background: $sprites;
+    display: inline-block;
+    @include loop-sprite-map($sprites, false, $prefix);
+
+    @content; // placeholder for retina sprites
+  }
 }
 
+// ---------------------------------------------
 // Generate both Retina and Standard sprites
 // - Folder's name for Retina must be EXACT SAME as Standard one with the addition of `@2x`
 // - Image's name must be EXACT SAME for standard and retina
-@mixin sprite-retina($folder-name : 'sprites',
-					$main-class   : 'sprite',
-					$prefix-class : '') {
-
-	@include sprite($folder-name, $main-class, $prefix-class) {
-		$sprites    : sprite-map("#{$folder-name}/*.png", $layout: smart);
-		$sprites-2x : sprite-map("#{$folder-name}@2x/*.png", $layout: smart);
-		@include retina {
-			// If all images in Retina and Standard folder is the same
-			@if length(sprite_names($sprites) ) == length(sprite_names($sprites-2x) ) {
-			background: $sprites-2x;
-			background-size: 
-					(image-width(sprite-path($sprites-2x)) / 2)
-					(image-height(sprite-path($sprites-2x)) / 2);
-			}
-			// If there's missing images in retina folder
-			@else {
-				@include loop-sprite-map($sprites-2x, true, $prefix-class);
-			}
-		}
-	}
-}
-
-
-// Helper for looping through sprite-map
-@mixin loop-sprite-map($sprite-map, $is-retina: false , $prefix-class: '') {
-	$divide-by  : 1; // for retina sprites' scaling
-	$sprite-url : '';
-	@if $is-retina {
-		$divide-by : 2;
-		$sprite-url : sprite-url($sprite-map);
-	}
+// ----------------------------------------------------------
+@mixin sprite-retina(
+  $folder  : "sprites",
+  $class   : "sprite",
+  $prefix  : "") {
 
-	@each $i in sprite_names($sprite-map) {
-		&.#{$prefix-class}#{$i} {
-			@if $is-retina {
-				// It makes sure that if the sprite doesn't exist in Retina folder,
-				//     it uses sprite from the Standard one.
-				background: $sprite-url;
-				background-size: 
-					(image-width(sprite-path($sprite-map)) / 2)
-					(image-height(sprite-path($sprite-map)) / 2);
-			}
-			background-position:
-				round(nth(sprite-position($sprite-map, $i), 1) / $divide-by)
-				round(nth(sprite-position($sprite-map, $i), 2) / $divide-by);
-			height : image-height(sprite-file($sprite-map, $i)) / $divide-by;
-			width  : image-width(sprite-file($sprite-map, $i)) / $divide-by;
-		}
-	}
+  @include sprite($folder, $class, $prefix) {
+    $sprites    : sprite-map("#{$folder}/*.png", $layout: smart);
+    $sprites-2x : sprite-map("#{$folder}@2x/*.png", $layout: smart);
+    
+    @include below(retina) {
+      // If all images in Retina and Standard folder is the same
+      @if length(sprite_names($sprites) ) == length(sprite_names($sprites-2x) ) {
+      background: $sprites-2x;
+      background-size: 
+          (image-width(sprite-path($sprites-2x)) / 2)
+          (image-height(sprite-path($sprites-2x)) / 2);
+      }
+      // If there's missing images in retina folder
+      @else {
+        @include loop-sprite-map($sprites-2x, true, $prefix-class);
+      }
+    }
+  }
 }