Skip to content
Browse files

Some new stuff

  • Loading branch information...
1 parent 899bb51 commit e1fcf6a3ee0cb9615f3ad517d8ca0df1fabf995d @mattfordham mattfordham committed
Showing with 176 additions and 25 deletions.
  1. +0 −4 _grid.scss
  2. +12 −0 _pages.scss
  3. +42 −0 _utils.scss
  4. +3 −0 ie8.scss
  5. +40 −0 libs/_hidpi.scss
  6. +70 −0 libs/_retina-sprites.scss
  7. +9 −21 main.scss
View
4 _grid.scss
@@ -2,8 +2,4 @@
GRID SYSTEM
-Consider:
-http://gridpak.com
-http://susy.oddbird.net
-
///////////////////////////////////////////////////// */
View
12 _pages.scss
@@ -0,0 +1,12 @@
+/* /////////////////////////////////////////////////////
+
+PAGES
+// Scope page using body class
+
+///////////////////////////////////////////////////// */
+
+
+/* Home page
+--------------------------------------------- */
+
+body.home {}
View
42 _utils.scss
@@ -22,6 +22,48 @@ General CSS utilities and SASS mixins
}
+/* Responsive Mixins
+ see: http://jakearchibald.github.com/sass-ie
+------------------------------------------------ */
+
+$fix-mqs: false !default;
+
+@mixin respond-min($width : $break-small) {
+ @if $fix-mqs {
+ @if $fix-mqs >= $width {
+ @content;
+ }
+ } @else {
+ @media screen and (min-width: $width) {
+ @content;
+ }
+ }
+}
+
+$old-ie: false !default;
+
+@mixin old-ie {
+ @if $old-ie {
+ @content;
+ }
+}
+
+.no-mobile {
+ display: none;
+
+ @include respond-min {
+ display: block;
+ }
+}
+
+.mobile-only {
+ display: block;
+
+ @include respond-min {
+ display: none;
+ }
+}
+
View
3 ie8.scss
@@ -0,0 +1,3 @@
+$old-ie: true;
+$fix-mqs: 960px;
+@import 'main';
View
40 libs/_hidpi.scss
@@ -0,0 +1,40 @@
+/*! HiDPI v1 | MIT License | git.io/hidpi */
+$hidpi-debug: false !default;
+
+@import 'compass/css3';
+
+@mixin hidpi-abstract($image, $extension) {
+ $image-fullname: '#{$image}.#{$extension}';
+ $image-hidpi-fullname: '#{$image}_x2.#{$extension}';
+
+ background-image: image-url($image-hidpi-fullname);
+ @include background-size(
+ image-width($image-fullname)
+ image-height($image-fullname)
+ );
+}
+
+@mixin hidpi($image: false, $extension: png) {
+ @if $hidpi-debug {
+ @if $image {
+ @include hidpi-abstract($image, $extension);
+ } @else {
+ @content;
+ }
+ } @else {
+ @if $image {
+ background-image: image-url('#{$image}.#{$extension}');
+ }
+ @media (-webkit-min-device-pixel-ratio: 1.3),
+ (-o-min-device-pixel-ratio: 2.6/2),
+ (min--moz-device-pixel-ratio: 1.3),
+ (min-device-pixel-ratio: 1.3),
+ (min-resolution: 1.3dppx) {
+ @if $image {
+ @include hidpi-abstract($image, $extension);
+ } @else {
+ @content;
+ }
+ }
+ }
+}
View
70 libs/_retina-sprites.scss
@@ -0,0 +1,70 @@
+@import "compass/utilities/sprites"; // Include compass sprite helpers
+@import "compass/css3/background-size"; // Include helper to calc background size
+
+
+@mixin retina-sprite($name, $hover: false, $active: false) {
+ @include _retina-sprite($name, $sprites, $sprites2x, $hover, $active);
+}
+
+// The general purpose retina sprite mixin.
+ //
+ // @include retina-sprite(name, $spritemap1, $spritemap2)
+ // @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0])
+ //
+ // If `dimensions` is true, then width/height will also be set.
+ //
+ // if `pad` is non-zero, then that's how much padding the element will have (requires
+ // $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger.
+ //
+@mixin _retina-sprite($name, $sprites, $sprites2x, $hover, $active, $dimensions: true, $pad: 0) {
+ @if $dimensions == true {
+ @include sprite-dimensions($sprites, $name);
+ }
+ background-image: sprite-url($sprites);
+ background-position: sprite-position($sprites, $name, -$pad, -$pad);
+ background-repeat: no-repeat;
+
+ @if $hover == true {
+ $name_hover: $name + _hover;
+ &:hover {
+ background-position: sprite-position($sprites, $name_hover, -$pad, -$pad);
+ }
+ }
+ @if $active == true {
+ $name_active: $name + _active;
+ &:active {
+ background-position: sprite-position($sprites, $name_active, -$pad, -$pad);
+ }
+ }
+
+ @if $pad > 0 {
+ padding: $pad;
+ }
+
+ @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
+ & {
+ $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2);
+ background-image: sprite-url($sprites2x);
+ background-position: nth($pos, 1) nth($pos, 2) / 2;
+ @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);
+ // sprite-path() returns the path of the generated sprite sheet, which
+ // image-width() calculates the width of. the ceil() is in place in case
+ // you have sprites that have an odd-number of pixels in width
+
+ @if $hover == true {
+ $name_hover: $name + _hover; // create myButton_hover and assign it
+ &:hover{
+ $pos: sprite-position($sprites2x, $name_hover, -$pad * 2, -$pad * 2);
+ background-position: nth($pos, 1) nth($pos, 2) / 2;
+ }
+ }
+ @if $active == true {
+ $name_active: $name + _active; // create myButton_active and assign it
+ &:active{
+ $pos: sprite-position($sprites2x, $name_active, -$pad * 2, -$pad * 2);
+ background-position: nth($pos, 1) nth($pos, 2) / 2;
+ }
+ }
+ }
+ }
+}
View
30 main.scss
@@ -1,6 +1,6 @@
/* /////////////////////////////////////////////////////
-PROJECT TITLE
+BREW OVER ICE
matt@wintr.us @ WINTR
///////////////////////////////////////////////////// */
@@ -12,6 +12,7 @@ matt@wintr.us @ WINTR
@import "compass/reset";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
+@import "compass/css3/background-size";
@@ -28,19 +29,21 @@ $body-font: Helvetica, Arial, sans-serif;
/* Sprites
--------------------------------------------- */
-$misc-sprite-dimensions : true;
-$misc-spacing : 2px;
-@import "misc/*.png";
-
+// USE WITH RETINA SPRITES MIXIN
+// $sprites: sprite-map("sprites/*.png", $spacing: 2px);
+// $sprites2x: sprite-map("sprites_x2/*.png", $spacing: 4px);
/* Imports
--------------------------------------------- */
+@import "libs/hidpi";
+@import "libs/retina-sprites";
@import "base";
@import "grid";
@import "utils";
@import "modules";
+@import "pages";
@@ -53,19 +56,4 @@ GLOBAL LAYOUT
.wrapper {
width: 960px;
margin: 0 auto;
-}
-
-
-
-/* /////////////////////////////////////////////////////
-
-PAGE LAYOUTS
-
-///////////////////////////////////////////////////// */
-
-
-/* Home page
---------------------------------------------- */
-
-body.home {}
-
+}

0 comments on commit e1fcf6a

Please sign in to comment.
Something went wrong with that request. Please try again.