Sven Wolfermann maddesigns
aral
/ rem16px.styl
Created
July 18, 2012 19:46
Work in progress… mixins for Stylus that handle 16px root em in a way that still gives you pixel parity
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Mixins | |
| // Since some horrible browsers (e.g., on *spit* Android) don’t let you change the | |
| // root em, I’m forced to use the browser default of 16px as the base. This mixin | |
| // will help me keep sane by using units that correspond to pixel units. | |
| line-height(h) | |
| if unit(h) == "rem" | |
| line-height: unit(h, 'px') | |
| line-height: unit(h/16, 'rem') |
madrobby
/ gist:2997187
Created
June 26, 2012 17:13
The ultimate media query to rule them all ("all" being high DPI/"Retina" screens)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (min--moz-device-pixel-ratio: 1.5), | |
| (-o-min-device-pixel-ratio: 3/2), | |
| (-webkit-min-device-pixel-ratio: 1.5), | |
| (min-device-pixel-ratio: 1.5), | |
| (min-resolution: 1.5dppx) { | |
| /* "retina" styles */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Media Queries in Sass 3.2 | |
| // | |
| // These mixins make media queries a breeze with Sass. | |
| // The media queries from mobile up until desktop all | |
| // trigger at different points along the way | |
| // | |
| // And important point to remember is that and width | |
| // over the portrait width is considered to be part of the | |
| // landscape width. This allows us to capture widths of devices | |
| // that might not fit the dimensions exactly. This means the break |
lensco
/ responsive.html
Created
January 26, 2012 21:11
Simple responsive design test page. More info here: http://bricss.net/post/16538278376/simple-responsive-design-test-page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Responsive Design Testing</title> | |
| <style> | |
| body { margin: 20px; font-family: sans-serif; overflow-x: scroll; } | |
| .wrapper { width: 6000px; } | |
| .frame { float: left; } | |
| h2 { margin: 0 0 5px 0; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * anchor-include pattern for already-functional links that work as a client-side include | |
| * Copyright 2011, Scott Jehl, scottjehl.com | |
| * Dual licensed under the MIT | |
| * Idea from Scott Gonzalez | |
| * to use, place attributes on an already-functional anchor pointing to content | |
| * that should either replace, or insert before or after that anchor | |
| * after the page has loaded | |
| * Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a> | |
| * Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a> |
imathis
/ gist:590559
Created
September 21, 2010 21:12
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Create a simple top to bottom linear gradient with a background-color backup | |
| // The first argument, $color will be output as background-color: $color | |
| // | |
| // This yields a gradient that is 5% brighter on the top and 5% darker on the bottom | |
| // | |
| // +gradient-bg(#777) | |
| // | |
| // This yeilds a gradient where the bright and dark colors are shifted 10% from the original color. | |
| // If you don't specify a third argument it will assign this value for the darkness too, keeping the gradient even. | |
| // |
NewerOlder