Link to this page: http://caseywatts.com/flipit
Other gists & tricks: http://caseywatts.com/gists-and-tricks
This helps flip between a page the development server and the same page on the production server. Useful for comparing css or functionality changes quickly.
| /* modernizr-test_position_fixed_ios.js | |
| * Original by Daniel Ott (https://gist.github.com/1333800) | |
| * 3 March 2011 | |
| * Updated by Philipp Söhnlein 3 November 2011 | |
| * Custom Tests using Modernizr's addTest API | |
| */ | |
| /* iOS | |
| * There may be times when we need a quick way to reference whether iOS is in play or not. | |
| * While a primative means, will be helpful for that. |
| --- | |
| layout: default | |
| permalink: /search/ | |
| --- | |
| <!-- | |
| http://10consulting.com/2013/03/06/jekyll-and-lunr-js-static-websites-with-powerful-full-text-search-using-javascript/ | |
| --> | |
| <div class="home"> |
This is a quick rundown of how and why we use YUI3 grids at App.net
As far as I can tell there are three types of CSS grids: a static-width pre-defined grid, a flexible-width pre-defined grid, and a generative grid. In the first two grids (pre-defined width), you basically decide how many columns you have across the screen, and then create blocks in any multiple of those. This pattern often looks like "span-4", "span-6", "pull-10", "push-5", etc. You find this style in popular frameworks like Bootstrap and Blueprint.
The third way, the generative/recursive grid system, doesn't seem to be as popular as the others. I am not entirely sure why, because the generative grid can pack more punch in less lines. In this vein is there is OOCSS and YUI3 CSS Grids.
| @mixin yui_grid($namespace:'') { | |
| /* | |
| Copyright (c) 2010, Yahoo! Inc. All rights reserved. | |
| Code licensed under the BSD License: | |
| http://developer.yahoo.com/yui/license.html | |
| version: 3.3.0 | |
| build: 3167 | |
| */ | |
| .#{$namespace}yui3-g { | |
| letter-spacing: -0.31em; /* webkit: collapse white-space between units */ |
| /* | |
| Usage: $.windowResize(yourFunction); | |
| Intended as a replacement for $(window).resize(yourFunction) | |
| yourFunction will only be called once the resize action has been completed, improving performance | |
| Code is public domain | |
| */ |