style-tiles 0.1

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA1: 
+  metadata.gz: c92daa4865068d7f15cf15167a2a9dc91ff022b6
+  data.tar.gz: 64a04b01e0ff82ac3ae4207eca36b331fa7d3e58
+SHA512: 
+  metadata.gz: 91da17f827e6063ca6737e4c0c81c55448e8264fef6b7e29cc7ebd813fa4e654f770e508c1270a46a04588c0474f3c24c27362d93ba0c8dc1fd757474bad3b2c
+  data.tar.gz: 88e9d7d7db573e0146ff56aac03f70f34c6eab47ac78ad2a58391fdcbf3ffae95f712aee7fe61ae9cc8d5eff1977fb5e2414c4a9762f2f8060065d40e7a1c86f

data/lib/style-tiles.rb

@@ -0,0 +1,30 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('Style Tiles', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Style_Tiles
+  VERSION = "0.1"
+  DATE = "2013-06-14"
+end
+
+# This is where any custom SassScript should be placed. The functions will be  
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# 
+# end

data/stylesheets/style-tiles.scss

@@ -0,0 +1,9 @@
+@import "compass/reset";
+@import "compass/typography";
+@import "compass/css3";
+
+// Import the base and style-tiles
+@import "style-tiles/core/_content";
+@import "style-tiles/core/_mixins";
+@import "style-tiles/core/_variables";
+@import "style-tiles/core/_typography";

data/stylesheets/style-tiles/core/_content.scss

@@ -0,0 +1,11 @@
+// Content Variables
+
+// Lorem ipsum — choose your flavor! http://designshack.net/articles/inspiration/30-useful-and-hilarious-lorem-ipsum-generators/
+
+$para-1: "There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.";
+
+$para-2: "Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.";
+
+$para-3: "Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.";
+
+$figure-caption: ''; // if your textures are form an external source that needs crediting i.e. istockphoto, squid fingers etc.

data/stylesheets/style-tiles/core/_mixins.scss

@@ -0,0 +1,134 @@
+@mixin set-link-colors($link-color, $mode: saturation default, $amount-1: 10%, $amount-2: -20%) {
+  
+  $link-color-over: adjust-saturation($link-color, $amount-1);
+  $link-color-visited: adjust-saturation($link-color, $amount-2);
+  
+  @if $mode == lightness { 
+    $link-color-over: adjust-lightness($link-color, $amount-1);
+    $link-color-visited: adjust-lightness($link-color, $amount-2);
+  }
+  
+  @include hover-link;
+  @include link-colors( $link-color,
+                        $hover: $link-color-over,
+                        $active: $link-color-over,
+                        $visited: $link-color-visited,
+                        $focus: $link-color-over
+                      );
+}
+
+@mixin st-text-shadow($text-shadow) {
+  @if $text-shadow { @include text-shadow( $text-shadow); }
+}
+
+@mixin type-size($size, $leading: false) {
+  font-size: $size;
+  @if $leading { line-height: $leading; }
+}
+
+@mixin st-font-face($font-name, $font-woff, $font-ttf, $inline-fonts: false, $font-style:normal, $font-weight:normal, $eot:false) {
+  @if $inline-fonts and $font-name { @include font-face($font-name, inline-font-files($font-woff, woff, $font-ttf, truetype), $eot, $font-weight, $font-style); }
+  @else if $font-name { @include font-face($font-name, font-files($font-woff, woff, $font-ttf, truetype), $eot, $font-weight, $font-style); }
+  
+}
+@mixin st-font-faced($font-name: false) {
+  @if $font-name { font-family: $font-name; }
+}
+
+@mixin st-box-shadow($box-shadow) {
+  @if $box-shadow { @include box-shadow($box-shadow) }
+}
+
+@mixin content-before-after($content, $before: default, $after:false ) {
+  @if $before { &:before { content: $content; } }
+  @if $after { &:after { content: $content; } }
+}
+
+@mixin background($background-color, $background-image: false, $inline-images:false, $body-background-gradient-1: false, $body-background-gradient-position-1: false, $body-background-gradient-2: false, $body-background-gradient-position-2: false) {
+  
+  @if $background-color { background-color: $background-color; }
+  
+  @if $inline-images and $background-image { $background-image: inline-image("#{$background-image}"); }
+  @else if $background-image { $background-image: image-url("#{$background-image}"); }  
+  
+  @if $background-image and $body-background-gradient-1 and $body-background-gradient-2 { @include background-image(linear-gradient( $body-background-gradient-position-1, $body-background-gradient-1 ), linear-gradient( $body-background-gradient-position-2, $body-background-gradient-2 ), $background-image); }
+  @else if $background-image and $body-background-gradient-1 { @include background-image(linear-gradient( $body-background-gradient-position-1, $body-background-gradient-1 ), $background-image); } 
+  @else if $body-background-gradient-1 and $body-background-gradient-2 { @include background-image(linear-gradient( $body-background-gradient-position-1, $body-background-gradient-1 ), linear-gradient( $body-background-gradient-position-2, $body-background-gradient-2 )); }
+  @else if $body-background-gradient-1 { @include background-image(linear-gradient( $body-background-gradient-position-1, $body-background-gradient-1 )); }
+  @else if $background-image { @include background-image($background-image) }
+}
+
+@mixin background-size($background-size: false) {
+  @if $background-size { background-size: $background-size; }
+}
+
+@mixin reset-margin-padding-border($margin :default, $padding: false, $border: false) {
+  @if $margin { margin: 0; }
+  @if $padding { padding: 0; }
+  @if $border { border: none; }
+}
+@mixin bold-italic-uppercase($bold :default, $italic: false, $uppercase: false) {
+  @if $bold { font-weight: bold; }
+  @if $italic { font-variant: italic; }
+  @if $uppercase { text-transform: uppercase; }
+}
+
+@mixin color-boxes($colors) {
+  $i : 1;
+  @each $color in $colors {
+    &:nth-of-type(#{$i}) {
+      border: $figure-border;
+      background:#{$color};
+    }
+    $i: $i + 1;
+  }
+}
+
+@mixin texture-boxes($textures, $inline-images: false) {
+  $i : 1;
+  @each $texture in $textures {
+    &:nth-of-type(#{$i}) {
+      border: $figure-border;
+      @if $inline-images { @include background-image(inline-image("textures/#{$texture}")); }
+      @else { background-image: image-url("textures/#{$texture}"); }
+    }
+    $i: $i + 1;
+  }
+}
+@mixin adjectives($adjectives) {
+  $i : 1;
+  @each $adjective in $adjectives {
+    li:nth-of-type(#{$i}):after {
+      content: "#{$adjective}";
+    }
+    $i: $i + 1;
+  }
+}
+
+@mixin button-style($button-background-color, $button-text-color, $button-corners: false, $button-border: false, $button-font-size: false, $button-gradient: false, $button-box-shadow: false) {
+  @if $button-corners { @include border-radius($button-corners) };
+  color: $button-text-color !important;
+  @if $button-gradient { 
+    background: $button-background-color;
+    @include background-image(linear-gradient( tint($button-background-color, 20%) 5%, $button-background-color 20%, $button-background-color 80%, shade($button-background-color, 20%) 100%)); 
+    } 
+  @else { background: $button-background-color; }
+  padding: ($standard-spacing / 2)  $standard-spacing;
+  @if $button-text-shadow { @include st-text-shadow($button-text-shadow) };
+  @if $button-box-shadow { @include box-shadow($button-box-shadow) };
+  @if $button-border { border: $button-border };
+  @if $button-font-size { font-size: $button-font-size};
+}
+
+@mixin image-dimensions($image-url) {
+  $image-height: calc-em(image-height($image-url), $base-font-size);
+  $image-width: calc-em(image-width($image-url), $base-font-size);
+  height: $image-height;
+  width: $image-width;
+  @include background-size($image-width $image-height);
+}
+
+// Functions
+@function calc-em($target-px, $context) {
+  @return ($target-px / $context) * 1em;
+}

data/stylesheets/style-tiles/core/_structure.scss

@@ -0,0 +1,168 @@
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+* { 
+  @include box-sizing(border-box);
+}
+@include st-font-face($font-name, $font-woff, $font-ttf, $inline-fonts, $font-weight, $font-style);
+
+body {
+  @include background($body-background-color, $body-background-image, $inline-images, $body-background-gradient-1, $body-background-gradient-position-1, $body-background-gradient-2, $body-background-gradient-position-2);
+  background-repeat: $body-background-repeat;
+  @include background-size($body-background-size);
+}
+
+a { 
+ @include set-link-colors($link-color);
+}
+body > div {
+  width: $page-width;
+  margin: $page-margin;
+  @include st-box-shadow($page-box-shadow);
+  @include background($page-background-color, $page-background-image, $inline-images, $page-background-gradient-1, $page-background-gradient-position-1, $page-background-gradient-2, $page-background-gradient-position-2);
+  background-repeat: $page-background-repeat;
+  @include background-size($page-background-size);
+  color: $page-text-color;
+  @include st-text-shadow($main-text-shadow);
+  @include border-radius($page-corners);
+}
+section:nth-of-type(1) {
+  header {
+    height: $header-height;
+    padding: $header-padding;
+    @include background($header-background-color, $header-background-image, $inline-images, $header-background-gradient-1, $header-background-gradient-position-1, $header-background-gradient-2, $header-background-gradient-position-2);
+    background-repeat: $header-background-repeat;
+    @include background-size($header-background-size);
+    color: $header-text-color;
+    figure {
+      @include image-dimensions($logo-file);
+      @include background(false, $logo-file, $inline-images);
+      background-repeat: no-repeat;
+      float: $logo-float;
+      margin: $logo-margin;
+      padding: $standard-spacing;
+      @include st-box-shadow($logo-box-shadow);
+    }
+     hgroup {
+       text-align: $header-text-align;
+      h1 {
+        @include reset-margin-padding-border(true, true, false);
+        @include type-size($project-name-font-size, $project-name-line-height);
+        @include content-before-after($project-name, false, true);
+      }
+      h2 {
+        @include reset-margin-padding-border(true, true, false);
+        @include type-size($version-font-size, $version-line-height);
+        @include content-before-after($version-number, false, true);
+      }
+    }
+  }
+}
+section:nth-of-type(2){
+  clear: both;
+  padding: $standard-spacing;  
+  article {
+    padding: $standard-spacing * 2;
+    width: $article-width;
+    float: left;
+  }
+  header {
+    h1 {
+      margin: $standard-spacing 0;
+      @include st-text-shadow($heading-h1-text-shadow);
+      @include bold-italic-uppercase($heading-h1-font-style);
+      @if $heading-h1-font-size { font-size:$heading-h1-font-size; }
+      @include st-font-faced($heading-h1-font-name);
+      color: $heading-h1-font-color;
+    }
+    h2 {
+      @include st-text-shadow($heading-h2-text-shadow);
+      @include bold-italic-uppercase($heading-h2-font-style);
+      @if $heading-h2-font-size { font-size:$heading-h2-font-size; }
+      @include st-font-faced($heading-h2-font-name);
+      color: $heading-h2-font-color; 
+    }
+    @if $heading-h1-font-name { @include content-before-after("font: "$heading-h1-font-name, false, true) };
+  }
+  p:nth-of-type(1) {
+    display: block;
+    @include content-before-after($para-1);
+  }  
+  p:nth-of-type(2) {
+    display: block;
+    @include content-before-after($para-2);
+  }
+  p:nth-of-type(3) {
+    display: block;
+    @include content-before-after($para-3);
+    }
+  p:nth-of-type(5) a {
+    @include button-style($button-background-color, $button-text-color, $button-corners, $button-border, $button-font-size, $button-gradient);
+    text-transform: capitalize;
+    &:hover, &:focus, &:active {
+      color: $button-text-color-over !important;
+      text-decoration: none;
+      background: $button-background-color-over;
+    }
+  }
+}
+
+aside {
+  display: block;
+  margin: $aside-margin;
+  padding: $aside-padding;
+  @include background($aside-background-color, $aside-background-image, $inline-images, $aside-background-gradient-1, $aside-background-gradient-position-1, $aside-background-gradient-2, $aside-background-gradient-position-2);
+  background-repeat: $aside-background-repeat;
+  @include background-size($aside-background-size);
+  @include border-radius($aside-border-radius);
+  outline: $aside-outline;
+  border: $aside-border;
+  @include st-box-shadow($aside-box-shadow);
+  color: $aside-text-color;
+  &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
+    float: left;
+    width: $aside-width;
+  }
+  &:nth-of-type(3) {
+    ul {
+      list-style: none;
+      display: inline;
+      @include adjectives($adjectives);
+    }
+  }
+  figure {
+    float: left;
+    margin: 0 $standard-spacing 0 0;
+  }
+  &:nth-of-type(1) figure {
+    width: $figure-width;
+    height: $figure-height;
+    @include color-boxes($colors);
+  }
+  &:nth-of-type(2) figure {
+    width: $texture-width;
+    height: $texture-height;
+    @include texture-boxes($textures, $inline-images);
+  }
+}
+figcaption {
+  clear: both;
+  display: block;
+  @include type-size($figure-caption-text-size, false);
+  @include content-before-after($figure-caption);
+}
+footer {
+  clear: both;
+  text-align: $footer-text-align;
+  padding: $standard-spacing;
+  @include content-before-after($footer-text, false, true);
+  @include background($footer-background-color, $footer-background-image, $inline-images, $footer-background-gradient-1, $footer-background-gradient-position-1, $footer-background-gradient-2, $footer-background-gradient-position-2);
+   color: $footer-text-color;
+   @include st-text-shadow($footer-text-shadow);
+   figure {
+     width: $footer-logo-width;
+     height: $footer-logo-height;
+     @include background(false, $footer-logo-file, $inline-images);
+     background-repeat: no-repeat;
+     float: left;
+     padding: $standard-spacing;
+   }
+}

data/stylesheets/style-tiles/core/_typography.scss

@@ -0,0 +1,69 @@
+body {
+  font: normal 100% / #{$base-line-height} $primary-font;
+}
+
+pre,
+code {
+  font-family: 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+}
+
+/* `Headings
+----------------------------------------------------------------------------------------------------*/
+
+h1 {
+  font-size: calc-em(24px, $base-font-size); /* 24px */
+}
+
+h2 {
+  font-size: calc-em(22px, $base-font-size); /* 22px */
+}
+
+h3 {
+  font-size: calc-em(20px, $base-font-size); /* 20px */
+}
+
+h4 {
+  font-size: calc-em(18px, $base-font-size); /* 18px */
+}
+
+h5 {
+  font-size: calc-em(16px, $base-font-size); /* 16px */
+}
+
+h6 {
+  font-size: calc-em(15px, $base-font-size); /* 15px */
+}
+
+/* `Spacing
+----------------------------------------------------------------------------------------------------*/
+
+ol {
+  list-style: decimal;
+}
+
+ul {
+  list-style: disc;
+}
+
+li {
+  margin-left: 30px;
+}
+
+p,
+dl,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+pre,
+table,
+address,
+fieldset,
+figure {
+  margin-bottom: 20px;
+}

data/stylesheets/style-tiles/core/_variables.scss

@@ -0,0 +1,160 @@
+// All Variables - Default
+
+// Remove some legacy support since it's not really needed for style tiles (tell your clients to view style tiles a modern browser or send them a screenshot)
+$support-for-original-webkit-gradients: false;
+$legacy-support-for-mozilla: false;
+$legacy-support-for-ie: false; 
+$experimental-support-for-microsoft: false;
+$experimental-support-for-opera: false;
+
+// Project Name and Version Header 
+$project-name: "Super Awesome Project";// You'll want to override this!
+$version-number: "1.0" default;
+$footer-text: '\2606\20 Designed by Rock Stars \2606'; // You'll want to override this!
+
+/// Global Variables
+$standard-spacing: calc-em(10px, $base-font-size);
+$page-width: calc-em(960px, $base-font-size);
+$article-width: calc-em(540px, $base-font-size);
+$aside-width: calc-em(300px, $base-font-size);
+$inline-images: true; // inline all images so you don't need to send them with the style sheet(s)
+
+
+// Typography 
+$primary-font: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
+$base-font-size: 16px;
+$base-line-height:1.5em;
+$body-font-size: calc-em(14px, $base-font-size);
+
+// @font-face fonts
+$font-name: false;
+$font-ttf: false;
+$font-woff: false;
+$font-eot: false; // we don't need this as it's not production code
+$font-svg: false; // we don't need this either
+$inline-fonts: true;
+$font-weight: normal;
+$font-style: normal;
+
+/// Design Variables
+$link-color: #00f;
+
+
+// sample 5 colors and 3 textures (add figures to html for more)
+$colors: #929ca5, #a2af45, #405b6b,  #dfe1d1, #e5e5e5;
+$textures: "concrete.png", "dark-concrete.png", "asphalt.png";
+$adjectives:  current, conservative, whimiscal, contradictory; //
+
+$body-background-color: #efefef; // for older browsers that don't support gradients
+$body-background-image: false; // e.g "asphalt.png"
+$body-background-gradient-position-1: false; // e.g. top OR 45deg
+$body-background-gradient-1: false; // rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%
+$body-background-gradient-position-2: false; // e.g. right OR 0deg
+$body-background-gradient-2: false; // $body-background-gradient-1 Or another gradient
+$body-background-size: false; // 40px 40px OR contain
+$body-background-repeat: repeat; // no-repeat OR repeat-x etc
+
+$page-background-color: #f2f2f2; // for older browsers that don't support gradients or just a solid color
+$page-background-image: false; // e.g "asphalt.png"
+$page-background-gradient-position-1: false; // e.g. top OR 45deg
+$page-background-gradient-1: false; // rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%
+$page-background-gradient-position-2: false; // e.g. right OR 0deg
+$page-background-gradient-2: false;
+$page-background-size: false; 
+$page-background-repeat: repeat;
+$page-box-shadow: false; // e.g. 5px 5px 10px rgba(0,0,0,.75), -5px 5px 10px rgba(0,0,0,.75)
+$page-corners: false; //  0 10px
+$page-margin: 0 auto ($standard-spacing * 4) auto; //
+$page-text-color: #333; 
+
+// Logo is added as a background to a transparent image. Adjust height and width and source
+$logo-margin: 0 $standard-spacing $standard-spacing  0; // TRBL: Top Right Bottom Left
+$logo-float: left; // right OR none
+$logo-file: "logos/sample-logo.png"; // e.g. "sample-logo.png"
+$logo-box-shadow: false; // e.g. 5px 5px 10px rgba(0,0,0,.75)
+
+$header-height: calc-em(image-height($logo-file), $base-font-size) + ($standard-spacing * 2); // allow some breathing room around the logo
+$header-padding: $standard-spacing;
+$header-background-color: false;
+$header-background-image: false;
+$header-background-gradient-position-1: false;
+$header-background-gradient-1: false;
+$header-background-gradient-position-2: false;
+$header-background-gradient-2: false;
+$header-background-size: false;
+$header-background-repeat: repeat;
+$header-text-color: false;
+$header-text-align: right; // align the Project Name and Version Number text
+
+// Project name and version font size / line-height
+$project-name-font-size: 1em; // Override the default H1 size
+$project-name-line-height: 1.5em;
+$version-font-size: .9em; // Override the default H2 size
+$version-line-height: 1em;
+
+$heading-h1-text-shadow: false;
+$heading-h1-font-style: false;
+$heading-h1-font-color: none;
+$heading-h1-font-name: false;
+$heading-h1-font-size: false;
+
+$heading-h2-text-shadow: false;
+$heading-h2-font-style: false;
+$heading-h2-font-color: none;
+$heading-h2-font-name: false;
+$heading-h2-font-size: false;
+
+$main-text-shadow: false; //
+
+$aside-margin: 0 0 $standard-spacing 0;
+$aside-padding: $standard-spacing;
+$aside-background-color: rgba(255,255,255,.25);
+$aside-background-image: false;
+$aside-background-gradient-position-1: false;
+$aside-background-gradient-1: false;
+$aside-background-gradient-position-2: false;
+$aside-background-gradient-2: false;
+$aside-background-size: false;
+$aside-background-repeat: repeat;
+$aside-box-shadow: none;
+$aside-border: $standard-spacing solid rgba(255,255,255,.35);
+$aside-border-radius: false; // 3px
+$aside-outline: calc-em(1px, $base-font-size) solid rgba(200,200,200,.25);
+$aside-text-color: #333;
+
+// Figure (colors and textures boxes)
+$figure-width: calc-em(40px, $base-font-size);
+$figure-height: calc-em(40px, $base-font-size);
+$texture-width: $figure-width * 2; // double the color size to show the textures better
+$texture-height: $figure-height * 2; // same
+$figure-border:  calc-em(1px, $base-font-size) #888 solid; // only if there's a color
+
+$figure-caption-text-size: calc-em(12px, $base-font-size); // if you want to credit eternal texture sources or add notes
+
+$button-corners: calc-em(10px, $base-font-size);  //
+$button-background-color: #57068c;
+$button-gradient: false; // automatic gradients
+$button-text-color: #eee;
+$button-font-size: 1.2em;
+$button-text-shadow: false; // e.g 0px 1px 1px rgba(0,0,0,.5)
+$button-border: calc-em(1px, $base-font-size) #eee solid;
+$button-box-shadow: none; // e.g. 1px 1px 2px rgba(0,0,0,.5)
+$button-text-color-over: adjust-lightness($button-text-color, 10%);
+$button-background-color-over: adjust-lightness($button-background-color, 10%);
+
+$footer-background-color: false ; // e.g. rgba(0,0,0,.75)
+$footer-background-image: false;
+$footer-background-gradient-position-1: false;
+$footer-background-gradient-1: false;
+$footer-background-gradient-position-2: false;
+$footer-background-gradient-2: false;
+$footer-background-size: false;
+$footer-background-repeat: repeat;
+
+$footer-text-color: rgba(255,255,255,.75);
+$footer-text-align: right;
+$footer-text-shadow: calc-em(-1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.5), 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35);
+
+$footer-logo-file: false;
+$footer-logo-width: calc-em(66px, $base-font-size);
+$footer-logo-height: calc-em(24px, $base-font-size);