compass-52-plugin 0.1 → 0.2

data/CHANGELOG.rdoc

@@ -0,0 +1,8 @@
+== 0.0.2
+
+* Update to 52Framework 2.0.4
+
+== 0.0.1
+
+* Release with 52Framework 1.0
+

data/MIT-LICENSE

@@ -0,0 +1,21 @@
+Copyright 2011 Fabio Kreusch - http://www.kreusch.com.br
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

data/README.rdoc

@@ -0,0 +1,39 @@
+== 52 Framework Compass Plugin
+
+This plugin adds 52 Framework to Compass (http://compass-style.org/).
+
+For more information, visit the official site at http://www.52framework.com
+
+
+=== Installation
+
+    gem install compass-52-plugin
+
+
+=== Getting Started
+
+To create a Compass project using 52 Framework, enter:
+
+    compass create -r fiftytwo my_project --using 52
+
+The above command will generate a +styles.sass+ file with the framework stylesheets included.
+
+
+=== Populating the Grid
+
+To set an element as a row, use the +row+ mixin:
+
+    header
+      @include row
+
+If the row is an inner row (a row inside another row), use +row+ with parameter setted as +true+:
+
+    header
+      .left-block
+        @include row(true)
+
+To calculate column widths, use the +column+ mixin specifying the number of columns as the parameter:
+
+    article
+      @include column(5)
+

data/stylesheets/52/_forms.scss

@@ -0,0 +1,77 @@
+/* ** ** forms ** ** */
+form fieldset {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px; padding:10px; border:1px solid #eee; }
+form fieldset legend {font-size:1.4em; padding:0 5px;}
+form input[type=text], form input[type=email], form input[type=url], form input[type=password], form input[type=number], textarea {
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius:3px;
+		height:20px;
+		margin-bottom:5px;
+		border:1px solid #ccc;
+		padding:4px 0 1px 5px;
+		}
+form .textarea textarea {-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+		border-radius:3px;
+		margin-bottom:5px;
+		min-height:50px;
+		border:1px solid #ccc;
+		padding:4px 0 1px 5px; width:100%;}
+form .textarea {height:auto;}
+form label {display:block; height:20px; font-size:1.2em;}
+
+/* special form styling */
+form div {height:24px; clear:both; margin-bottom:6px; padding:5px 0px;}
+form div label {float:left; width:auto;}
+form div input {width:52%; float:right;}
+form div input.invalid {border-bottom:1px solid #f00;}
+form fieldset input[type=submit], form fieldset button { display: inline-block;
+
+    padding: 4px 8px;
+    font-family: 'Lucida Grande', Arial, sans-serif;
+    font-size: 13px;
+
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+
+    border: 1px solid rgba(0, 0, 0, 0.6);
+
+    background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
+    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
+    background-color: #eee;
+
+    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;
+
+    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+	cursor:pointer;
+}
+form fieldset input:hover[type=submit], form fieldset button:hover {
+	background: #B5B5B5;
+    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
+                        black 0px 1px 3px inset,
+                        rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
+
+    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
+                     black 0px 1px 3px inset,
+                     rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
+
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
+                black 0px 1px 3px inset,
+                rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
+
+    text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
+	cursor:pointer;
+}
+
+/* single column form styling */
+
+form .s_column div {height:auto; margin-bottom:3px; padding:0px;}
+form .s_column div label {float:none; width:100%;}
+form .s_column div input {width:98%; float:none;}
+

data/stylesheets/52/_general.scss

@@ -1,218 +1,90 @@
 /* 52framework General StyleSheet - contains styles for all the HTML elements this framework supports */
 
 body {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 52% / 1.52em;
+  background:#fff;
+  color:#000;
+  font:12px Arial, Helvetica, sans-serif;
+  position:relative;
 }
 
-/* ** ** Common Addative Classes ** ** */
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}
-
-.clear {
-  clear: both;
-  display: block;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0px;
-  height: 0px;
-}
 
-.hide {
-  display: none;
-}
-
-.align_right {
-  text-align: right;
-}
-
-.align_left {
-  text-align: left;
-}
+/* ** ** Common Addative Classes ** ** */
+.left, .float_left  { float:left	}
+.right, .float_right { float:right	}
+.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
+.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
+.hide  { display:none	} .block {display:block !important;} .inline {display:inline !important;}
 
-.align_center {
-  text-align: center;
-}
+.align_right    { text-align:right;	  }
+.align_left     { text-align:left;	  }
+.align_center   { text-align:center;  }
+.align_justify  { text-align:justify; }
 
-.align_justify {
-  text-align: justify;
-}
+.bold {font-weight:600;}
+.italic {font-style:italic;}
 
-a {
-  color: #525252;
-  &:hover, &:focus {
-    text-decoration: underline; }
-  &:active, &:visited {}
-}
+a {	color:#525252;	}
+a:hover, a:focus { text-decoration:underline;}
+a:active, a:visited { }
 
 blockquote {
-  font-family: Georgia,"Times New Roman", Times, serif;
-  margin: 5px;
-  padding: 10px;
-  font-size: 1.52em;
-  color: #999;
-  font-style: italic;
-  line-height: 1.3em;
-  width: 100%;
-  quotes: none;
-  &.left {
-    border-right: 1px dashed #ccc;
-    width: 35%;
-  }
-  &.right {
-    border-left: 1px dashed #ccc;
-    width: 35%;
-  }
-}
+		font-family: Georgia,"Times New Roman", Times, serif;
+		margin:5px;
+		padding:10px;
+		font-size:1.52em;
+		color:#999;
+		font-style:italic;
+		line-height:1.3em;
+		width:100%;
+		quotes:none;
+	}
+	blockquote.left {border-right:1px dashed #ccc; width:35%;} /* float blockquote left, and set width */
+	blockquote.right {border-left:1px dashed #ccc; width:35%;} /* float blockquote right and set a width */
 
 /* ** ** Header Styles ** ** */
+h1, h2, h3, h4, h5 {margin:0 0 0.5em; line-height:1.1em;}
+h1 {	font-size:2.52em;}
+h2 {	font-size:1.952em;}
+h3 {	font-size:1.652em;}
+h4 {	font-size:1.452em;}
+h5 {	font-size:1.252em;}
+h6 {	font-size:1.52em;}
 
-h1, h2, h3, h4, h5 {
-  margin: 0 0 0.5em;
-  line-height: 1.1em;
-}
-
-h1 {
-  font-size: 2.52em;
-}
-
-h2 {
-  font-size: 1.952em;
-}
-
-h3 {
-  font-size: 1.652em;
+/* ** ** ul li's ** ** */
+ul{
+  list-style:outside disc;
 }
-
-h4 {
-  font-size: 1.452em;
+ul,ol{
+  margin:0 0 1.5em 1.5em;
+  padding:0;
 }
-
-h5 {
-  font-size: 1.252em;
+li ul,li ol{
+  padding:0;
+  margin:0 0 1.5em 1.5em;
 }
 
-h6 {
-  font-size: 1.52em;
-}
-
-/* ** ** ul li's ** ** */
-
-ul li {
-  margin-left: 25px;
-}
 
 /* ** ** custom select color ** ** */
-
 ::selection {
-  background: #525252; /* Safari */
-}
-
+	background: #525252; /* Safari */
+	}
 ::-moz-selection {
-  background: #525252; /* Firefox */
-  color: #fff;
+	background: #525252; /* Firefox */
+	color:#fff;
 }
-
 /* ** ** paragraph styling ** ** */
+p {margin:0 0 1.52em;}
+	p img.left {float:left;margin:1.52em 1.52em 1.52em 0;padding:0;}
+	p img.right {float:right;margin:1.52em 0 1.52em 1.52em;}
+
+strong   		{	font-weight:600;}
+em, dfn  		{	font-style:italic;}
+dfn 	 		{   font-weight:600;}
+sup, sub 		{   line-height:0;}
+abbr, acronym   {	border-bottom:1px dashed #ccc;}
+address 		{	margin:0 0 1.5em;font-style:italic;}
+del 			{	color:#666;}
+pre, code, tt   {	font:1em 'andale mono', 'lucida console', monospace;line-height:1.5; display:block;}
+code 			{	background-color:#eee; display:inline; padding:0px 2px 1px 2px; line-height:1.1em;}
+pre 			{	margin:1.5em 0;white-space:pre;}
 
-p {
-  margin: 0 0 1.52em;
-  img {
-    &.left {
-      float: left;
-      margin: 1.52em 1.52em 1.52em 0;
-      padding: 0;
-    }
-    &.right {
-      float: right;
-      margin: 1.52em 0 1.52em 1.52em;
-    }
-  }
-}
-
-/* ** ** forms ** ** */
-
-form {
-  fieldset {
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    padding-top: 5px;
-    padding-left: 5px;
-    border: 1px solid #ccc;
-    legend {
-      font-size: 1.4em;
-      padding: 0 5px;
-    }
-  }
-  input {
-    &[type=text], &[type=email], &[type=url] {
-      -moz-border-radius: 4px;
-      -webkit-border-radius: 4px;
-      border-radius: 4px;
-      height: 20px;
-      margin-bottom: 5px;
-      border: 1px solid #ccc;
-      padding: 4px 0 1px 5px;
-    }
-  }
-  label {
-    display: block;
-    height: 20px;
-    font-size: 1.2em;
-  }
-}
-
-strong {
-  font-weight: 600;
-}
-
-em {
-  font-style: italic;
-}
-
-dfn {
-  font-style: italic;
-  font-weight: 600;
-}
-
-sup, sub {
-  line-height: 0;
-}
-
-abbr, acronym {
-  border-bottom: 1px dashed #ccc;
-}
-
-address {
-  margin: 0 0 1.5em;
-  font-style: italic;
-}
-
-del {
-  color: #666;
-}
-
-pre, code, tt {
-  font: 1em 'andale mono', 'lucida console', monospace;
-  line-height: 1.5;
-  display: block;
-}
-
-code {
-  background-color: #d5d2d8;
-  display: block;
-  padding: 0px 2px 4px 26px;  
-  line-height: 1.67em;
-}
-
-pre {
-  margin: 1.5em 0;
-  white-space: pre;
-}

data/stylesheets/52/_grid.scss

@@ -1,59 +1,60 @@
 /* 52 framework grid */
 
 $max-columns: 16 !default;
-$column-width: 40px !default;
+$column-width: 40px !default;
 $gutter-width: 10px !default;
 
 @mixin width($columns, $side_gutters: false) {
-  @if $side_gutters == true {
-    width: ($column-width + ($gutter-width * 2)) * ($columns);
-  } @else {
-    width: ($column-width + ($gutter-width * 2)) * ($columns - 1) + $column-width;
-  }
+        @if $side_gutters == true {
+                width: ($column-width + ($gutter-width * 2)) * ($columns);
+        } @else {
+                width: ($column-width + ($gutter-width * 2)) * ($columns - 1) + $column-width;
+        }
 }
 
 .col {
-  margin-left: $gutter-width;
-  margin-right: $gutter-width;
-  display: inline;
-  overflow: hidden;
-  float: left;
-  position: relative;
+        margin-left: $gutter-width;
+        margin-right: $gutter-width;
+        display: inline;
+        overflow: hidden;
+        float: left;
+        position: relative;
 }
 
 .row {
-  overflow: hidden;
-  margin: 0 auto;
-  @include width($max-columns, true);
+        overflow: hidden;
+        margin: 0 auto;
+        @include width($max-columns, true);
 }
 
 .inner_row {
-  margin: 0 -$gutter-width;
-  display: inline-block;
-  width: auto;
+        margin: 0 -$gutter-width;
+        width: auto;
+        display: inline-block;
 }
 
 .row .row {
-  @extend .inner_row;
+        @extend .inner_row;
 }
 
 @mixin column($columns) {
-  @extend .col;
-  @include width($columns);
-}
+        @extend .col;
+        @include width($columns);
+}
 
 @mixin row($inner: false) {
-  @extend .row;
-  @if $inner == true {
-    @extend .inner_row;
-  }
+        @extend .row;
+        @if $inner == true {
+                @extend .inner_row;
+        }
 }
 
 @for $i from 1 through $max-columns {
-  .col_#{$i} {
-    @include column($i)
-  }
-  .width_#{$i} {
-    @include width($i)
-  }
-}
+        .col_#{$i} {
+                @include column($i)
+        }
+        .width_#{$i} {
+                @include width($i)
+        }
+}
+