Permalink
Browse files

Merge branch 'master' of github.com:anthonyshort/stitch-css

  • Loading branch information...
2 parents 552fb91 + 9687eb0 commit e05262ea59b49c10d645603ab13af4300302c807 Anthony Short committed Apr 23, 2012
View
@@ -2,7 +2,7 @@
Patterns are chunks of styles that we use on every project. These chunks of styles generally perform a particular function, such as clearing floats. Having to write these styles each time is annoying and the function of these chunks of code in our stylesheets is obscure.
-By breaking these patterns into reusable classes and mixins we:
+By breaking these patterns into reusable classes and mixins we can:
* Make our stylesheets free from clutter
* Give our styles more meaning
View
@@ -1,3 +1,3 @@
module Stitch
- VERSION = "0.1.2"
+ VERSION = "0.1.4.beta.2"
end
@@ -2,10 +2,12 @@
@import 'patterns/accessibility';
@import 'patterns/animation';
//@import 'patterns/css3';
+@import 'patterns/color';
@import 'patterns/forms';
@import 'patterns/images';
@import 'patterns/layout';
@import 'patterns/legacy';
@import 'patterns/mobile';
@import 'patterns/print';
-@import 'patterns/text';
+@import 'patterns/text';
+@import 'patterns/responsive';
@@ -250,6 +250,10 @@ a:active {
outline: none;
}
+a img{
+ border: none;
+}
+
// Set sub, sup without affecting line-height: gist.github.com/413930
sub,sup {
@@ -1,2 +1,3 @@
@import 'animation/hardware-acceleration';
-@import 'animation/timing-functions';
+@import 'animation/timing-functions';
+//@import 'animation/keyframes';
@@ -0,0 +1 @@
+@import 'color/rgba';
@@ -1,2 +1,3 @@
@import 'images/image-rendering';
-@import 'images/image-replace';
+@import 'images/image-replace';
+@import 'images/inline-icon';
@@ -3,4 +3,9 @@
@import 'layout/columns';
@import 'layout/force-scrollbars';
@import 'layout/media';
-@import 'layout/simple-gradient';
+@import 'layout/simple-gradient';
+@import 'layout/pseudo-elements';
+@import 'layout/absolute';
+@import 'layout/relative';
+@import 'layout/move';
+@import 'layout/float-children';
@@ -1,2 +1,3 @@
@import 'legacy/has-layout';
-@import 'legacy/inline-block';
+@import 'legacy/inline-block';
+//@import 'legacy/hacks';
@@ -0,0 +1 @@
+@import 'responsive/media';
@@ -2,4 +2,5 @@
@import 'text/font-stacks';
@import 'text/hyphens';
@import 'text/rem';
-@import 'text/justify';
+@import 'text/justify';
+//@import 'text/selection';
@@ -0,0 +1,5 @@
+@mixin keyframes {
+ @-webkit-keyframes { @content; }
+ @-moz-keyframes { @content; }
+ @keyframes { @content; }
+}
@@ -0,0 +1,21 @@
+/*
+ Pass through a property and color value
+*/
+
+/*
+ #header {
+ @include rgba(color, #000, 0.8);
+ or
+ @include rgba(color, #000);
+ }
+*/
+
+@mixin rgba($property, $color, $alpha:false){
+ #{$property}: $color;
+ @if ($alpha){
+ #{$property}: rgba($color, $alpha);
+ }
+ @else {
+ #{$property}: rgba($color, 1);
+ }
+}
@@ -5,7 +5,7 @@
display : block;
text-indent : -9999em;
overflow : hidden;
- background-repeat : no-repeat;
+ background-repeat : no-repeat;
text-align : left;
direction : ltr;
}
@@ -0,0 +1,18 @@
+//
+// Add an icon to an inline element. E.g anchor or span
+// Pass through an asset, and optionally a padding value, x-position and y-position.
+//
+
+@mixin inline-icon($img, $spacing:5px, $pos: left) {
+ background-image:image-url($img);
+ background-repeat: no-repeat;
+ @if $pos == right {
+ background-position: right top;
+ text-align: right;
+ } @else {
+ background-position: left top;
+ text-align: left;
+ }
+ line-height:image-height($img);
+ padding-#{$pos}:image-width($img) + $spacing;
+}
@@ -0,0 +1,7 @@
+@mixin absolute($top:false,$right:false,$bottom:false,$left:false) {
+ position:absolute;
+ @if $top { top:$top; }
+ @if $left { left:$left; }
+ @if $bottom { bottom:$bottom; }
+ @if $right { right:$right; }
+}
@@ -5,12 +5,12 @@
// @see http://nicolasgallagher.com/micro-clearfix-hack/
//
.__clearfix {
- &::before,
- &::after {
+ &:before,
+ &:after {
content:"";
display:table;
}
- &::after {
+ &:after {
clear:both;
}
zoom:1;
@@ -0,0 +1,15 @@
+@mixin float-children($children:false,$direction:left,$width:false) {
+ @include clear-floats;
+
+ @if $children == false {
+ $children: '*';
+ }
+
+ & > #{$children} {
+ float:$direction;
+
+ @if $width != false {
+ width: $width;
+ }
+ }
+}
@@ -0,0 +1,19 @@
+@mixin move-up($x) {
+ position:relative;
+ top:-$x;
+}
+
+@mixin move-down($x) {
+ position:relative;
+ top:$x;
+}
+
+@mixin move-left($x) {
+ position:relative;
+ left:-$x;
+}
+
+@mixin move-right($x) {
+ position:relative;
+ left:$x;
+}
@@ -0,0 +1,4 @@
+@mixin show-pseudo-element {
+ content:'';
+ display:block;
+}
@@ -0,0 +1,7 @@
+@mixin relative($top:false,$right:false,$bottom:false,$left:false) {
+ position:relative;
+ @if $top { top:$top; }
+ @if $left { left:$left; }
+ @if $bottom { bottom:$bottom; }
+ @if $right { right:$right; }
+}
@@ -0,0 +1,7 @@
+@mixin ie6-hack {
+ * html { @content }
+}
+
+@mixin ie7-hack {
+ *+html { @content }
+}
@@ -0,0 +1,59 @@
+@mixin mobile {
+ @media only screen and (min-width : 320px) and (max-width : 480px) {
+ @content;
+ }
+}
+
+@mixin mobile-portrait {
+ @media only screen and (max-width : 320px) {
+ @content;
+ }
+}
+
+@mixin mobile-landscape {
+ @media only screen and (max-width : 480px) {
+ @content;
+ }
+}
+
+@mixin tablet {
+ @media only screen and (min-width : 768px) and (max-width : 1024px) {
+ @content;
+ }
+}
+
+@mixin max-tablet {
+ @media only screen and (max-width : 1024px) {
+ @content;
+ }
+}
+
+@mixin tablet-portrait {
+ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
+ @content;
+ }
+}
+
+@mixin tablet-landscape {
+ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
+ @content;
+ }
+}
+
+@mixin desktop {
+ @media only screen and (min-width : 1025px) {
+ @content;
+ }
+}
+
+@mixin wide-screen {
+ @media only screen and (min-width : 1824px) {
+ @content;
+ }
+}
+
+@mixin retina {
+ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
+ @content;
+ }
+}
@@ -0,0 +1,8 @@
+@mixin text-selection {
+ ::selection {
+ @content;
+ }
+ ::-moz-selection {
+ @content;
+ }
+}

0 comments on commit e05262e

Please sign in to comment.