Difference between revisions of "Layout"
Jump to navigation
Jump to search
(37 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{menu}} | {{menu}} | ||
− | #rwd | + | [https://twitter.com/search?q=%23rwd #rwd] |
+ | |||
+ | == Responsive == | ||
+ | * http://www.w3.org/TR/mobile-bp/ | ||
− | |||
* [http://www.alistapart.com/articles/responsive-web-design/ Responsive Web Design] - A List Apart, MAY 25, 2010 | * [http://www.alistapart.com/articles/responsive-web-design/ Responsive Web Design] - A List Apart, MAY 25, 2010 | ||
* [http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/ Responsive Web Design: Layouts and Media Queries] - difference between basic fluid, adaptive and responsive layout, April 23rd, 2012 | * [http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/ Responsive Web Design: Layouts and Media Queries] - difference between basic fluid, adaptive and responsive layout, April 23rd, 2012 | ||
+ | |||
* [http://bradfrost.github.com/this-is-responsive/ This Is Responsive.] - Patterns, resources and news for creating responsive web experiences. | * [http://bradfrost.github.com/this-is-responsive/ This Is Responsive.] - Patterns, resources and news for creating responsive web experiences. | ||
+ | ** http://bradfrost.github.io/this-is-responsive/patterns.html | ||
* [http://www.lukew.com/ff/entry.asp?933 Mobile First] - Luke Wroblewski, Nov 3 2009 | * [http://www.lukew.com/ff/entry.asp?933 Mobile First] - Luke Wroblewski, Nov 3 2009 | ||
Line 15: | Line 19: | ||
* [http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ CSS Media Query for Mobile is Fool’s Gold] - August 3, 2010 | * [http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ CSS Media Query for Mobile is Fool’s Gold] - August 3, 2010 | ||
** [https://bugs.webkit.org/show_bug.cgi?id=6656 Image loading continues when IMG elements or Image JavaScript objects are removed] - from comments | ** [https://bugs.webkit.org/show_bug.cgi?id=6656 Image loading continues when IMG elements or Image JavaScript objects are removed] - from comments | ||
+ | |||
+ | * [http://responsivenews.co.uk/ Responsive News] - Where BBC News developers blog about responsive design. | ||
* http://adactio.com/journal/4494/ | * http://adactio.com/journal/4494/ | ||
Line 21: | Line 27: | ||
* http://news.ycombinator.com/item?id=4570193 | * http://news.ycombinator.com/item?id=4570193 | ||
+ | |||
+ | * http://speckyboy.com/2013/09/11/responsive-design-is-not-about-screen-sizes-any-more/ [https://news.ycombinator.com/item?id=6366223] | ||
to review; | to review; | ||
Line 36: | Line 44: | ||
* http://paulstamatiou.com/responsive-retina-blog-development-part-1 | * http://paulstamatiou.com/responsive-retina-blog-development-part-1 | ||
+ | |||
+ | * http://www.creativebloq.com/responsive-design-tools-8134180 | ||
+ | |||
+ | * http://www.google.com/think/multiscreen/whitepaper-sitedesign.html | ||
+ | * https://news.ycombinator.com/item?id=8723024 | ||
+ | |||
+ | |||
+ | * [https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/ Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs | CSS-Tricks] | ||
+ | |||
=== Examples === | === Examples === | ||
Line 43: | Line 60: | ||
* [http://www.lukew.com/ff/entry.asp?1514 Multi-Device Layout Patterns] | * [http://www.lukew.com/ff/entry.asp?1514 Multi-Device Layout Patterns] | ||
* [http://mediaqueri.es/ Media Queries] - Many great examples | * [http://mediaqueri.es/ Media Queries] - Many great examples | ||
+ | |||
+ | * http://liquidapsive.com/ - adaptive, liquid, responsive, static | ||
=== Templates === | === Templates === | ||
Line 53: | Line 72: | ||
* [http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html device-width and how not to hate your users] - January 24, 2011 | * [http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html device-width and how not to hate your users] - January 24, 2011 | ||
+ | |||
+ | |||
+ | * [https://whatismyviewport.com/ What is my viewport] | ||
+ | |||
=== Device sizes === | === Device sizes === | ||
Line 66: | Line 89: | ||
* CSS 3: [http://www.w3.org/TR/css3-mediaqueries/ Media Queries] - W3C Recommendation 19 June 2012 | * CSS 3: [http://www.w3.org/TR/css3-mediaqueries/ Media Queries] - W3C Recommendation 19 June 2012 | ||
** MDN: [https://developer.mozilla.org/en/CSS/Media_queries/ CSS media queries] | ** MDN: [https://developer.mozilla.org/en/CSS/Media_queries/ CSS media queries] | ||
+ | |||
=== Examples === | === Examples === | ||
Line 77: | Line 101: | ||
Firefox needs spaces before and after "and" | Firefox needs spaces before and after "and" | ||
+ | |||
+ | |||
+ | * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme | ||
+ | |||
=== newer === | === newer === | ||
Line 86: | Line 114: | ||
* http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ | * http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ | ||
+ | |||
+ | * http://wicky.nillia.ms/enquire.js/ | ||
+ | |||
=== Poly, etc. === | === Poly, etc. === | ||
Line 95: | Line 126: | ||
* http://adapt.960.gs/ | * http://adapt.960.gs/ | ||
+ | |||
=== Articles === | === Articles === | ||
Line 104: | Line 136: | ||
* [http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ The EMs have it: Proportional Media Queries FTW!] - March 28, 2012 | * [http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ The EMs have it: Proportional Media Queries FTW!] - March 28, 2012 | ||
* [http://www.paulund.co.uk/css3-animated-media-queries CSS3 Animated Media Queries] - April 2012 | * [http://www.paulund.co.uk/css3-animated-media-queries CSS3 Animated Media Queries] - April 2012 | ||
+ | |||
=== 320 and Up === | === 320 and Up === | ||
Line 130: | Line 163: | ||
Need to confirm 320andup Sass to multifile so mobile doesn't get desktop sized styles. | Need to confirm 320andup Sass to multifile so mobile doesn't get desktop sized styles. | ||
+ | |||
=== Other === | === Other === | ||
Line 140: | Line 174: | ||
* http://www.getskeleton.com/ | * http://www.getskeleton.com/ | ||
− | == | + | * [http://niklausgerber.com/blog/responsive-google-or-bing-maps/ Responsive Google or Bing maps] |
+ | |||
+ | /* Flexible iFrame */ | ||
+ | |||
+ | .Flexible-container { | ||
+ | position: relative; | ||
+ | padding-bottom: 56.25%; | ||
+ | padding-top: 30px; | ||
+ | height: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .Flexible-container iframe, | ||
+ | .Flexible-container object, | ||
+ | .Flexible-container embed { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | <pre> | ||
+ | <!-- Responsive iFrame --> | ||
+ | <div class="Flexible-container"> | ||
+ | <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe> | ||
+ | </div> | ||
+ | </pre> | ||
+ | |||
+ | |||
+ | * https://news.ycombinator.com/item?id=10090973 | ||
+ | |||
+ | |||
+ | === Rearranging elements === | ||
* http://www.jtudsbury.com/thoughts/rearrange-div-order.php | * http://www.jtudsbury.com/thoughts/rearrange-div-order.php | ||
+ | * http://stackoverflow.com/questions/12933356/change-div-order-on-responsive-design | ||
+ | ** http://jsfiddle.net/bUxDE/24/ | ||
+ | |||
+ | * http://css-tricks.com/content-folding/ - mar 2012 | ||
+ | ** http://jsfiddle.net/ympKa/embedded/result/ | ||
* http://stackoverflow.com/questions/220273/css-positioning-div-above-another-div-when-not-in-that-order-in-the-html | * http://stackoverflow.com/questions/220273/css-positioning-div-above-another-div-when-not-in-that-order-in-the-html | ||
Line 166: | Line 237: | ||
* https://github.com/joggink/jquerymobiledropdown | * https://github.com/joggink/jquerymobiledropdown | ||
+ | |||
+ | |||
+ | * http://nikolay.rocks/2015-06-19-responsive-sidebar | ||
== Images == | == Images == | ||
Line 177: | Line 251: | ||
* https://github.com/estelle/clowncar | * https://github.com/estelle/clowncar | ||
+ | |||
+ | * http://bjorn.wikkeling.com/115/pure-css-responsive-images-yes-javascript.html | ||
+ | |||
+ | * [https://github.com/BBC-News/Imager.js Imager.js] is an alternative solution to the issue of how to handle responsive image loading, created at the BBC [https://news.ycombinator.com/item?id=6873632] | ||
+ | |||
+ | * https://news.ycombinator.com/item?id=8217447 | ||
+ | |||
+ | |||
+ | * [https://photoswipe.com/ PhotoSwipe] - JavaScript gallery, no dependencies. | ||
+ | |||
+ | === scrset === | ||
+ | * http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing | ||
+ | |||
+ | == Tables == | ||
+ | * http://blog.easy-designs.net/archives/responsive-tables/ | ||
+ | * http://responsivenews.co.uk/post/52382349921/tables | ||
== JavaScript == | == JavaScript == | ||
+ | See also [[JS_scripts#Responsive]] | ||
+ | |||
* http://www.quirksmode.org/blog/archives/2010/08/combining_media.html | * http://www.quirksmode.org/blog/archives/2010/08/combining_media.html | ||
* http://adactio.com/journal/5429/ | * http://adactio.com/journal/5429/ | ||
− | * | + | * http://intentionjs.com/ [https://news.ycombinator.com/item?id=6284717] |
=== Shim === | === Shim === | ||
Line 193: | Line 285: | ||
== Video == | == Video == | ||
* [http://webdesignerwall.com/tutorials/css-elastic-videos CSS: Elastic Videos] | * [http://webdesignerwall.com/tutorials/css-elastic-videos CSS: Elastic Videos] | ||
+ | |||
* [http://groups.drupal.org/node/233238 Responsive Media] | * [http://groups.drupal.org/node/233238 Responsive Media] | ||
+ | |||
* http://fitvidsjs.com/ | * http://fitvidsjs.com/ | ||
** [http://drupal.org/node/1413558 FitVids: Which class selector to use with embed videos from youtube] | ** [http://drupal.org/node/1413558 FitVids: Which class selector to use with embed videos from youtube] | ||
+ | |||
* [http://drupal.org/node/1535954 Media: YouTube - Responsive Embeds] | * [http://drupal.org/node/1535954 Media: YouTube - Responsive Embeds] | ||
+ | |||
+ | |||
+ | * https://github.com/jeffehobbs/embedresponsively - Embed Responsively helps web content producers transform fixed width embedded content into fluid responsive embeds. | ||
+ | |||
* http://drupal.org/project/fitvids - js lib | * http://drupal.org/project/fitvids - js lib | ||
Line 224: | Line 323: | ||
* [http://www.responsinator.com/about/ Responsinator] | * [http://www.responsinator.com/about/ Responsinator] | ||
+ | |||
+ | == Mobile testing == | ||
+ | * http://people.apache.org/~pmuellr/weinre/docs/latest/ | ||
== Other == | == Other == | ||
* http://responsiveurl.co.uk/while/were/making/every/damn/thing/responsive/lets/not/forget/the/url/ - lolol | * http://responsiveurl.co.uk/while/were/making/every/damn/thing/responsive/lets/not/forget/the/url/ - lolol | ||
+ | |||
+ | == PhoneGap == | ||
+ | * http://phonegap.com/ | ||
+ | |||
+ | * https://trigger.io/ | ||
+ | ** https://github.com/trigger-corp/browser-extensions | ||
+ | |||
+ | == Ionic == | ||
+ | * http://ionicframework.com/ | ||
+ | ** http://ionicframework.com/creator/ [https://news.ycombinator.com/item?id=8113347] | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | == Scale == | ||
+ | * http://modularscale.com/ | ||
+ | |||
+ | |||
+ | |||
+ | * https://www.layoutit.com/grid [https://www.reddit.com/r/webdev/comments/92319j/an_interactive_css_grid_builder_supports_template/] | ||
+ | |||
+ | == Grid basics == | ||
+ | * [https://en.wikipedia.org/wiki/Grid_%28page_layout%29 Grid (page layout)] | ||
+ | |||
+ | * [http://www.thegridsystem.org/ The Grid System] | ||
+ | * [http://www.designbygrid.com/ Design By Grid] is a resource to promote websites designed with grids, and the tools and techniques used to make websites with grids. | ||
+ | |||
+ | * [http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ Designing With Grid-Based Approach] - Smashing Magazine, April 14th 2007 | ||
+ | * [http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/ Applying Divine Proportion To Your Web Designs] - May 29th, 2008 | ||
+ | * [http://retinart.net/graphic-design/secret-law-of-page-harmony/ The Secret Law of Page Harmony] - 13th of July, 2010 | ||
+ | ** Wikipedia: [http://en.wikipedia.org/wiki/Canons_of_page_construction Canons of page construction] | ||
+ | * [http://www.teehanlax.com/blog/designing-faster-with-a-baseline-grid/ Designing Faster with a Baseline Grid] - March 9, 2011 | ||
+ | * http://richardwalshlabs.blogspot.co.uk/2012/05/grid-layouts-in-modern-web-design.html | ||
+ | * http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/ | ||
+ | |||
+ | * [http://en.wikipedia.org/wiki/Rabatment_of_the_rectangle Rabatment of the rectangle] | ||
+ | * [http://en.wikipedia.org/wiki/Golden_spiral Golden spiral] | ||
+ | |||
+ | == Layout sizings == | ||
+ | Quick resolution to grid width and layout list, wip; | ||
+ | * 240 x 320 (mobile) | ||
+ | ** 3 60px columns, 20px gutter (960) | ||
+ | * 320 x 480 (mobile) | ||
+ | ** 4 60px columns, 20px gutter (960) | ||
+ | * 480 x 640 (small tablet) | ||
+ | ** 6 60px columns, 20px gutter (960) | ||
+ | * 768 x 1024 (tablet - portrait) | ||
+ | * 1024 x 768 (tablet - landscape) | ||
+ | ** 960s has no far-left/right gutter, but there is space here | ||
+ | *** 12 60px column, 20px gutter | ||
+ | *** 16 40px column, 20px gutter | ||
+ | ** [http://webdesignerwall.com/trends/960-grid-system-is-getting-old 972] width | ||
+ | *** 12 54px column, 30px gutter | ||
+ | * 1200 x 800 (desktop) | ||
+ | |||
+ | Sizes from the Responsive Design Testing bookmarklet. See also http://978.gs/browsers/ | ||
+ | |||
+ | == Ratios == | ||
+ | * 2:3:4:6 (inner:top:outer:bottom) | ||
+ | * (more generally 1:R:2:2R for page proportion 1:R[7]) | ||
+ | * division of the page into ninths | ||
+ | |||
+ | * 12 | ||
+ | ** 6, 4, 3, 2 | ||
+ | * 16 | ||
+ | ** 8, 6, 4, 3, 2 | ||
+ | * 24 | ||
+ | ** 12, 8, 6, 4, 3, 2 | ||
+ | |||
+ | |||
+ | |||
+ | [http://northofsepo.wikidot.com/activity:factor-pairs-table Factor] [http://www2.whidbey.net/ohmsmath/webwork/javascript/fctrpr.htm pairs] | ||
+ | |||
+ | * 720 | ||
+ | * 840 | ||
+ | * '''960'''x1, 480x2, 320x3, 240x4, 192x5, 160x6, 120x8, 96x10, 80x12, 64x15, 60x16, 48x20, 40x24, and 32x30. | ||
+ | * '''972'''x1, 486x2, 324x3, 243x4, 162x6, '''''108x9''''', 81x12, 54x18, 36x27 | ||
+ | * '''978'''x1, 489x2, 326x3, 163x6 | ||
+ | * '''990'''x1, 495x2, 330x3, 198x5, 165x6, '''''110x9''''', 99x10, 90x11, 66x15, '''''55x18''''', 45x22, 33x30 | ||
+ | * '''996'''x1, 498x2, 332x3, 166x6, 83x12 | ||
+ | * 1008 - just under 1024*768 browser viewport | ||
+ | * '''1008'''x1, 504x2, 336x3, 252x4, 168x6, 144x7, 126x8, '''''112x9''''', 84x12, 72x14, 63x16, ''56x18'', 48x21, 42x24, 36x28 | ||
+ | * '''1200'''x1, 600x2, 400x3, 300x4, 240x5, 200x6, 150x8, 120x10, 100x12, 80x15, 75x16, 60x20, 50x24, 48x25 and 40x30. | ||
+ | * 1260! | ||
+ | * 1440 | ||
+ | |||
+ | The above doesn't take gutters into effect.. | ||
+ | |||
+ | Read more: http://wiki.answers.com/Q/What_are_the_factor_pairs_of_1200#ixzz21c9XWM5A | ||
+ | |||
+ | == Grid frameworks == | ||
+ | * http://benfrain.com/responsive-grid-frustrations-susy-zen-and-sub-pixel-rounding/ | ||
+ | |||
+ | === CSS === | ||
+ | ==== 960.gs ==== | ||
+ | * [http://960.gs 960.gs] | ||
+ | ** [http://960.gs/demo.html Demo] | ||
+ | *** 12 60px column, 20px gutter | ||
+ | *** 16 40px column, 20px gutter | ||
+ | *** no far-left/right gutter | ||
+ | ** [http://webdesign.tutsplus.com/articles/workflow/using-the-960-grid-system-as-a-design-framework Using the 960 Grid System as a Design Framework] - Feb 10th 2011 | ||
+ | |||
+ | golden ratio vertical rhythm; | ||
+ | * [http://www.thegoldengrid.com/ The Golden Grid] | ||
+ | |||
+ | * [https://github.com/dhgamache/Skeleton Skeleton] - "A Beautiful Boilerplate for Responsive, Mobile-Friendly Development" | ||
+ | |||
+ | ==== fluid960gs ==== | ||
+ | * [http://designinfluences.com/fluid960gs Fluid 960 Grid System] | ||
+ | ** https://github.com/bauhouse/fluid960gs - couple of years ago | ||
+ | |||
+ | ==== 978.gs ==== | ||
+ | * [http://978.gs/ 978.gs] | ||
+ | ** http://978.gs/browsers - handy device resolution info | ||
+ | |||
+ | ==== Columnal ==== | ||
+ | * [http://www.columnal.com/ The Columnal CSS grid system] | ||
+ | ** responsive | ||
+ | ** fluid | ||
+ | ** 12 columns, dividing into two, three, four, or six columns. | ||
+ | |||
+ | ==== Fluid Baseline Grid ==== | ||
+ | * [http://fluidbaselinegrid.com/ Fluid Baseline Grid] system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability. | ||
+ | ** https://github.com/thedayhascome/Fluid-Baseline-Grid - several months ago | ||
+ | |||
+ | ==== Griddle ==== | ||
+ | * [http://necolas.github.com/griddle/ Griddle] is a fluid and modular grid system for modern browsers — IE8+, Firefox, Safari, Opera, Chrome. | ||
+ | |||
+ | ==== 1000px ==== | ||
+ | * [http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/ A better Photoshop grid for responsive web design] | ||
+ | |||
+ | * https://github.com/growdigital/decimal-responsive-grid | ||
+ | |||
+ | ==== Simple Grid ==== | ||
+ | * http://thisisdallas.github.com/Simple-Grid/ | ||
+ | |||
+ | ==== Other ==== | ||
+ | * http://gridlex.devlint.fr/ [https://news.ycombinator.com/item?id=10626591] | ||
+ | |||
+ | * https://github.com/corysimmons/lost | ||
+ | |||
+ | * http://mdo.github.io/table-grid/ | ||
+ | |||
+ | === LESS === | ||
+ | ==== 960 LESS ==== | ||
+ | * [https://github.com/DavidTurner/960-LESS 960 LESS] is an adaption of the 960 Grid System available at http://960.gs. This adaption is done to make use of LESS Mixins to, in theory, allow for less code to be used in the creation of a site. The flexibility of the mixins allows for pretty much any grid system to be usable, with margins of 10px per column. This allow, in theory, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24 or more columns to be used without having to create excessive amounts of code. | ||
+ | |||
+ | ==== Kube ==== | ||
+ | * http://imperavi.com/kube/ | ||
+ | |||
+ | === LESS and SCSS === | ||
+ | ==== semantic.gs ==== | ||
+ | * [http://semantic.gs/ semantic.gs] - The Semantic Grid System | ||
+ | ** LESS, SCSS, Stylus | ||
+ | ** Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. | ||
+ | ** [http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ The Semantic Grid System: Page Layout For Tomorrow] - Aug 23rd, 2011 | ||
+ | ** [https://github.com/twigkit/semantic.gs/network network] | ||
+ | ** [https://github.com/twigkit/semantic.gs/zipball/master zipball] | ||
+ | ** [https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss grid.scss] | [https://raw.github.com/twigkit/semantic.gs/master/stylesheets/scss/grid.scss grid.scss (raw)] | ||
+ | |||
+ | @import 'grid'; | ||
+ | /* defaults to 12 column, 960 pixel grid system. */ | ||
+ | |||
+ | @column-width: 60; | ||
+ | @gutter-width: 20; | ||
+ | @columns: 16; | ||
+ | /* overriding these variables after grid.less import */ | ||
+ | |||
+ | @total-width: 100%; | ||
+ | /* for fluid (percentage-based) grid rather than a fixed pixels */ | ||
+ | |||
+ | @include row(4,4); | ||
+ | |||
+ | @row($columns:$columns) | ||
+ | @column($x,$columns:$columns) | ||
+ | @push($offset:1) | ||
+ | @pull($offset:1) | ||
+ | |||
+ | ==== Frameless ==== | ||
+ | * [http://framelessgrid.com/ Frameless] - Adapt column by column, not pixel by pixel. | ||
+ | ** adapts around 320, 480, 600, 900 and 1900 pixels | ||
+ | ** less, scss, grid overlay | ||
+ | |||
+ | === SCSS === | ||
+ | ==== compass-960-plugin ==== | ||
+ | * [https://github.com/nextmat/compass-960-plugin compass-960-plugin] - used in sasson | ||
+ | ** https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass | ||
+ | * based on [http://960.gs 960.gs] / [http://960.gs/demo.html demo] | ||
+ | |||
+ | * [http://blog.carbonfive.com/2009/03/02/compass-960-semantics/ Compass, the 960 CSS framework, and Semantic Markup] - March 2, 2009 | ||
+ | * [http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/ Cleaner 960.gs using SASS and Compass] - June 19th, 2010 | ||
+ | * [http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/ Mastering the 960 Grid System] | ||
+ | |||
+ | Install | ||
+ | gem install compass-960-plugin | ||
+ | |||
+ | Grid mixins (see Sasson's layout partials for examples) | ||
+ | @import "960/grid"; | ||
+ | |||
+ | Default is 12 colums. Set this in subtheme .scss; | ||
+ | $ninesixty-columns: 16; | ||
+ | |||
+ | Give an element a grid attribute | ||
+ | @include grid-container; - give to #page. sets width and auto margins | ||
+ | @include grid(8); - declare an 8 column wide element | ||
+ | @include grid-prefix(2); - add an empty 2-wide element before | ||
+ | @include grid-suffix(2); - add an empty 2-wide element after | ||
+ | @include grid-push(4); - push element 4 to the right | ||
+ | @include grid-pull(4); - pull element 4 to the right | ||
+ | @include alpha; - remove left gutter, for nested grid first element. must got after grid() | ||
+ | @include omega; - remove right gutter, for nested grid last element. must got after grid() | ||
+ | |||
+ | ==== Blueprint ==== | ||
+ | * [http://www.blueprintcss.org/ Blueprint] | ||
+ | ** http://compass-style.org/reference/blueprint/grid/ | ||
+ | ** 12, 16, plus 24 30pxcolumn, 10px gutter | ||
+ | ** 950px | ||
+ | |||
+ | ==== sass-960gs ==== | ||
+ | * [https://github.com/Hauleth/sass-960gs 960 Grid System - Standalone] - recent | ||
+ | ** Ruby Gem | ||
+ | |||
+ | ==== Susy ==== | ||
+ | * [http://susy.oddbird.net/ Susy] - Responsive grids for Compass | ||
+ | ** https://github.com/ericam/susy/ | ||
+ | |||
+ | * http://susy.oddbird.net/tutorial/ | ||
+ | * http://susy.oddbird.net/guides/reference/ | ||
+ | |||
+ | * [http://scottdavis.github.com/blog/2011/12/30/introduction-to-building-websites-using-susy-and-compass-vertical-rhythm/ Introduction to Building Websites Using Susy and Compass's Vertical Rhythm] - Dec 30th, 2011 | ||
+ | * [http://net.tutsplus.com/tutorials/html-css-techniques/responsive-grids-with-susy/ Responsive Grids With Susy] - net tuts | ||
+ | * Gist: [https://gist.github.com/liuwen-lvtu/1294530 Susy Tutorial] | ||
+ | |||
+ | $total-columns : 12; // a 12-column grid | ||
+ | $column-width : 4em; // each column is 4em wide | ||
+ | $gutter-width : 1em; // 1em gutters between columns | ||
+ | $grid-padding : $gutter-width; // grid-padding equal to gutters | ||
+ | |||
+ | .page { | ||
+ | // page acts as a container for our grid. | ||
+ | @include container; | ||
+ | |||
+ | // header and footer are full-width by default. | ||
+ | header, footer { clear: both; } | ||
+ | |||
+ | // nav spans 3 columns of total 12. | ||
+ | nav { @include span-columns(3,12); } | ||
+ | |||
+ | .content { | ||
+ | // content spans the final (omega) 9 columns of 12. | ||
+ | @include span-columns(9 omega,12); | ||
+ | |||
+ | // main content spans 6 of those 9 columns. | ||
+ | .main { @include span-columns(6,9); } | ||
+ | |||
+ | // secondary content spans the final 3 (omega) of 9 columns. | ||
+ | .secondary { @include span-columns(3 omega,9); } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | ==== Blankwork ==== | ||
+ | * [http://blankwork.net/ Blankwork] is a simple, flexible and semantic grid system. | ||
+ | ** scss, flexible and semantic | ||
+ | |||
+ | ==== Golden Grid System ==== | ||
+ | * [http://goldengridsystem.com/ Golden Grid System] - A folding grid for responsive design. | ||
+ | ** https://github.com/jonikorpi/Golden-Grid-System - few of months ago | ||
+ | ** less and scss | ||
+ | ** 240 up | ||
+ | ** 18 even columns, two for grid border, 16 columns for design | ||
+ | |||
+ | ==== Singularity ==== | ||
+ | * http://singularity.gs/ | ||
+ | |||
+ | ==== Zen ==== | ||
+ | * http://zengrids.com/ | ||
+ | |||
+ | ==== Neat ==== | ||
+ | * https://github.com/thoughtbot/neat - for bourbon | ||
+ | |||
+ | ==== Salsa ==== | ||
+ | * https://github.com/tsi/Salsa - from Sasson v3, was Griddy | ||
+ | |||
+ | ==== Griddles ==== | ||
+ | * [https://github.com/muffinresearch/griddles Griddles] is a simple, opinionated grid system for modern responsive layouts. Free of columns it provides percentage based-layouts with an override capability so you can determine what happens to the layout at given break-points purely by adding classes. | ||
+ | |||
+ | ==== Bootstrap and Foundation ==== | ||
+ | * http://alefeuvre.github.com/foundation-grid-displayer/ | ||
+ | |||
+ | ==== etc ==== | ||
+ | * http://jhough10.github.com/Centurion/ | ||
+ | |||
+ | * http://www.profoundgrid.com/ | ||
+ | |||
+ | === Bulma === | ||
+ | * [https://bulma.io/ Bulma] - a free, open source CSS framework based on Flexbox and used by more than 100,000 developers. | ||
+ | ** https://github.com/jgthms/bulma | ||
+ | |||
+ | === JS === | ||
+ | * http://salvattore.com/ | ||
+ | |||
+ | * http://jeet.gs/ | ||
+ | |||
+ | * http://gridstylesheets.org/ | ||
+ | ** https://raygun.io/blog/2014/06/next-gen-constraint-layouts-browser-grid-style-sheets/ | ||
+ | |||
+ | == Fluid grid and content == | ||
+ | * http://www.alistapart.com/articles/fluidgrids/ | ||
+ | * http://unstoppablerobotninja.com/entry/fluid-images/ | ||
+ | |||
+ | == Grid generators == | ||
+ | * http://grids.heroku.com/ | ||
+ | * http://www.gridsystemgenerator.com/gs01.php | ||
+ | * http://gridpak.com/ | ||
+ | * http://www.designbygrid.com/tools | ||
+ | * http://modulargrid.org | ||
+ | * http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/ | ||
+ | * http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/ | ||
+ | |||
+ | == Overlays == | ||
+ | * http://hashgrid.com/ - js grid display | ||
+ | |||
+ | * http://gridwax.gs/ - grid bookmarklet | ||
+ | |||
+ | * http://peol.github.com/960gridder/ - grid and rhythm bookmarklet | ||
+ | ** https://github.com/peol/960gridder | ||
+ | |||
+ | * https://github.com/milkmiruku/960gridder - my fork of the above. 16 column, 24 line height. | ||
+ | |||
+ | == Vertical rhythm == | ||
+ | * [http://webtypography.net/toc/ The Elements of Typographic Style Applied to the Web] | ||
+ | ** [http://webtypography.net/toc#Vertical_Motion Vertical Motion] | ||
+ | |||
+ | * [http://24ways.org/2006/compose-to-a-vertical-rhythm Compose to a Vertical Rhythm]- oft' linked to, Dec 12th 2006 | ||
+ | |||
+ | |||
+ | |||
+ | * http://jransijn.tumblr.com/post/5304050674/resources-vertical-rhythm-in-webdesign | ||
+ | |||
+ | * http://designbyelle.com.au/journal/2008/02/14/vertical-rhythm-recent-resources | ||
+ | |||
+ | |||
+ | * http://csswizardry.com/2012/06/single-direction-margin-declarations | ||
+ | |||
+ | |||
+ | * http://blog.weare1910.com/post/72755990718/grids-from-typography [https://news.ycombinator.com/item?id=7371423] | ||
+ | |||
+ | |||
+ | === Web tool === | ||
+ | * http://www.gridlover.net | ||
+ | |||
+ | * http://drewish.com/tools/vertical-rhythm - calculator, px based | ||
+ | |||
+ | * http://topfunky.com/baseline-rhythm-calculator - px based | ||
+ | |||
+ | * http://lamb.cc/typograph - Scale & Rhythm - weird paddings | ||
+ | |||
+ | |||
+ | * http://joshnh.com/tools/em-baseline-generator.html | ||
+ | |||
+ | |||
+ | === JS === | ||
+ | * [http://samuel.bowles.es/2007/08/syncotype/ Syncotype-Alt] | ||
+ | |||
+ | * http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm | ||
+ | |||
+ | |||
+ | * http://simplefocus.com/flowtype/ FlowType.JS - Web typography at its finest: font-size and line-height based on element width. | ||
+ | ** https://github.com/simplefocus/FlowType.JS | ||
+ | |||
+ | |||
+ | === Bookmarklets === | ||
+ | * http://gridwax.gs/ - great | ||
+ | |||
+ | |||
+ | * http://sfcgeorge.github.com/Grid-Bookmarklet | ||
+ | |||
+ | |||
+ | * http://scribu.net/util/baseline-checker-bookmarklet.html | ||
+ | |||
+ | |||
+ | * http://www.portamento.pixelite.me/ - too snazzy | ||
+ | |||
+ | === CSS === | ||
+ | * [http://forrst.com/posts/Check_Your_Vertical_Rhythm_With_CSS3_gradients-6XE Check Your Vertical Rhythm With CSS3 gradients] | ||
+ | |||
+ | * http://basehold.it | ||
+ | |||
+ | |||
+ | * http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/ | ||
+ | * [http://pearsonified.com/typography/ Golden Ratio Typography Calculator] | ||
+ | ** [http://www.pearsonified.com/2011/12/golden-ratio-typography.php Secret Symphony: The Ultimate Guide to Readable Web Typography] | ||
+ | |||
+ | * https://github.com/jonschlinkert/vertical-rhythm - css/less templates | ||
+ | |||
+ | === Sass === | ||
+ | * See [[Sass]] |
Latest revision as of 01:15, 15 October 2023
Responsive
- Responsive Web Design - A List Apart, MAY 25, 2010
- Responsive Web Design: Layouts and Media Queries - difference between basic fluid, adaptive and responsive layout, April 23rd, 2012
- This Is Responsive. - Patterns, resources and news for creating responsive web experiences.
- Mobile First - Luke Wroblewski, Nov 3 2009
- How to make your CSS *really* mobile-friendly - 12.10.2010
- “The absence of support for @media queries is in fact the first @media query”
- Optimizing content for different browsers: the RIGHT way - w3c wiki
- CSS Media Query for Mobile is Fool’s Gold - August 3, 2010
- Responsive News - Where BBC News developers blog about responsive design.
- http://adactio.com/journal/4494/
- http://www.html5rocks.com/en/mobile/responsivedesign/
- http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
to review;
- Effective Design for Multiple Screen Sizes - effective design strategies to target a diverse range of mobile devices and screen sizes. to review
- Design Process in the Responsive Age - A UX perspective
- Supporting high-dpi pixel-dense "Retina" Displays like iPhones or the iPad 3 with CSS or IMG
- A non-responsive approach to building cross-device webapps
- http://www.google.com/think/multiscreen/whitepaper-sitedesign.html
- https://news.ycombinator.com/item?id=8723024
Examples
- Multi-Device Layout Patterns
- Media Queries - Many great examples
- http://liquidapsive.com/ - adaptive, liquid, responsive, static
Templates
Viewport
- Safari Developer Library: Configuring the Viewport
- MDN: Using the viewport meta tag to control layout on mobile browsers
- tuts+: Quick Tip: Don’t Forget the Viewport Meta Tag
- device-width and how not to hate your users - January 24, 2011
Device sizes
- http://screensiz.es/
- http://phone-size.com/
- http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/
Media Types and Queries
- CSS 2: Media types
- Recognized media types
- e.g., all, screen, print, projection, etc.
- https://developer.mozilla.org/en/CSS/@media
- Recognized media types
- CSS 3: Media Queries - W3C Recommendation 19 June 2012
- MDN: CSS media queries
Examples
@media <media type (expressions)> { /* media-specific rules */ } @media screen and (min-width: 500px) and (max-width: 800px) { ... }
or
<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />
Firefox needs spaces before and after "and"
newer
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" />
Poly, etc.
- Respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
- device.js - a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing.
Articles
- CSS3 Media Queries - web designer wall , Aug 18, 2010
- CSS Media Queries & Using Available Space - css tricks, Jul 6 2010
- How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - July 19th, 2010
- The EMs have it: Proportional Media Queries FTW! - March 28, 2012
- CSS3 Animated Media Queries - April 2012
320 and Up
- 320 and Up - The ‘tiny screen first’ responsive boilerplate
@media only screen and (min-width: 480px) { /* 480 =================================================== */ } @media only screen and (min-width: 600px) { /* 600 =================================================== */ } @media only screen and (min-width: 768px) { /* 768 =================================================== */ } @media only screen and (min-width: 992px) { /* 992 =================================================== */ } @media only screen and (min-width: 1382px) { /* 1382 =================================================== */ body { max-width: 1440px; } }
Need to confirm 320andup Sass to multifile so mobile doesn't get desktop sized styles.
Other
- http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ - deprecated method
- http://internet-alacarte.com/media-queries-template-for-browser-window-adjustments/ - basic example
/* Flexible iFrame */ .Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
<!-- Responsive iFrame --> <div class="Flexible-container"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe> </div>
Rearranging elements
- http://www.jtudsbury.com/thoughts/rearrange-div-order.php
- http://stackoverflow.com/questions/12933356/change-div-order-on-responsive-design
text formatting;
@media (max-width: 480px) { .your-particular-selector br { display: none; } }
text-content; responsive text
- responsive navigation patterns - Feb 24 2012
- Responsive Multi Level Navigation - June 19, 2012
select menu;
- TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts ul and ol navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item. This isn't the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size).
- http://css-tricks.com/blog/convert-menu-to-dropdown/
Images
- http://css-tricks.com/on-responsive-images/
- http://www.brucelawson.co.uk/2012/html5-urgently-needs-adaptive-images-mechanism/
- http://adaptive-images.com/
- Imager.js is an alternative solution to the issue of how to handle responsive image loading, created at the BBC [2]
- PhotoSwipe - JavaScript gallery, no dependencies.
scrset
Tables
- http://blog.easy-designs.net/archives/responsive-tables/
- http://responsivenews.co.uk/post/52382349921/tables
JavaScript
See also JS_scripts#Responsive
Shim
- css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
Performance
Video
- https://github.com/jeffehobbs/embedresponsively - Embed Responsively helps web content producers transform fixed width embedded content into fluid responsive embeds.
- http://drupal.org/project/fitvids - js lib
Tools
Responsive testing
- Simple responsive design test page - html file and bookmarklet iframe based viewport size simulation
- Responsi - draggable
- Viewport Resizer - v. good
- ish. is yet another viewport resizer.
Mobile testing
Other
- http://responsiveurl.co.uk/while/were/making/every/damn/thing/responsive/lets/not/forget/the/url/ - lolol
PhoneGap
Ionic
Scale
Grid basics
- The Grid System
- Design By Grid is a resource to promote websites designed with grids, and the tools and techniques used to make websites with grids.
- Designing With Grid-Based Approach - Smashing Magazine, April 14th 2007
- Applying Divine Proportion To Your Web Designs - May 29th, 2008
- The Secret Law of Page Harmony - 13th of July, 2010
- Wikipedia: Canons of page construction
- Designing Faster with a Baseline Grid - March 9, 2011
- http://richardwalshlabs.blogspot.co.uk/2012/05/grid-layouts-in-modern-web-design.html
- http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Layout sizings
Quick resolution to grid width and layout list, wip;
- 240 x 320 (mobile)
- 3 60px columns, 20px gutter (960)
- 320 x 480 (mobile)
- 4 60px columns, 20px gutter (960)
- 480 x 640 (small tablet)
- 6 60px columns, 20px gutter (960)
- 768 x 1024 (tablet - portrait)
- 1024 x 768 (tablet - landscape)
- 960s has no far-left/right gutter, but there is space here
- 12 60px column, 20px gutter
- 16 40px column, 20px gutter
- 972 width
- 12 54px column, 30px gutter
- 960s has no far-left/right gutter, but there is space here
- 1200 x 800 (desktop)
Sizes from the Responsive Design Testing bookmarklet. See also http://978.gs/browsers/
Ratios
- 2:3:4:6 (inner:top:outer:bottom)
- (more generally 1:R:2:2R for page proportion 1:R[7])
- division of the page into ninths
- 12
- 6, 4, 3, 2
- 16
- 8, 6, 4, 3, 2
- 24
- 12, 8, 6, 4, 3, 2
- 720
- 840
- 960x1, 480x2, 320x3, 240x4, 192x5, 160x6, 120x8, 96x10, 80x12, 64x15, 60x16, 48x20, 40x24, and 32x30.
- 972x1, 486x2, 324x3, 243x4, 162x6, 108x9, 81x12, 54x18, 36x27
- 978x1, 489x2, 326x3, 163x6
- 990x1, 495x2, 330x3, 198x5, 165x6, 110x9, 99x10, 90x11, 66x15, 55x18, 45x22, 33x30
- 996x1, 498x2, 332x3, 166x6, 83x12
- 1008 - just under 1024*768 browser viewport
- 1008x1, 504x2, 336x3, 252x4, 168x6, 144x7, 126x8, 112x9, 84x12, 72x14, 63x16, 56x18, 48x21, 42x24, 36x28
- 1200x1, 600x2, 400x3, 300x4, 240x5, 200x6, 150x8, 120x10, 100x12, 80x15, 75x16, 60x20, 50x24, 48x25 and 40x30.
- 1260!
- 1440
The above doesn't take gutters into effect..
Read more: http://wiki.answers.com/Q/What_are_the_factor_pairs_of_1200#ixzz21c9XWM5A
Grid frameworks
CSS
960.gs
- 960.gs
- Demo
- 12 60px column, 20px gutter
- 16 40px column, 20px gutter
- no far-left/right gutter
- Using the 960 Grid System as a Design Framework - Feb 10th 2011
- Demo
golden ratio vertical rhythm;
- Skeleton - "A Beautiful Boilerplate for Responsive, Mobile-Friendly Development"
fluid960gs
- Fluid 960 Grid System
- https://github.com/bauhouse/fluid960gs - couple of years ago
978.gs
- 978.gs
- http://978.gs/browsers - handy device resolution info
Columnal
- The Columnal CSS grid system
- responsive
- fluid
- 12 columns, dividing into two, three, four, or six columns.
Fluid Baseline Grid
- Fluid Baseline Grid system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.
- https://github.com/thedayhascome/Fluid-Baseline-Grid - several months ago
Griddle
- Griddle is a fluid and modular grid system for modern browsers — IE8+, Firefox, Safari, Opera, Chrome.
1000px
Simple Grid
Other
LESS
960 LESS
- 960 LESS is an adaption of the 960 Grid System available at http://960.gs. This adaption is done to make use of LESS Mixins to, in theory, allow for less code to be used in the creation of a site. The flexibility of the mixins allows for pretty much any grid system to be usable, with margins of 10px per column. This allow, in theory, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24 or more columns to be used without having to create excessive amounts of code.
Kube
LESS and SCSS
semantic.gs
- semantic.gs - The Semantic Grid System
- LESS, SCSS, Stylus
- Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
- The Semantic Grid System: Page Layout For Tomorrow - Aug 23rd, 2011
- network
- zipball
- grid.scss | grid.scss (raw)
@import 'grid'; /* defaults to 12 column, 960 pixel grid system. */ @column-width: 60; @gutter-width: 20; @columns: 16; /* overriding these variables after grid.less import */ @total-width: 100%; /* for fluid (percentage-based) grid rather than a fixed pixels */
@include row(4,4);
@row($columns:$columns) @column($x,$columns:$columns) @push($offset:1) @pull($offset:1)
Frameless
- Frameless - Adapt column by column, not pixel by pixel.
- adapts around 320, 480, 600, 900 and 1900 pixels
- less, scss, grid overlay
SCSS
compass-960-plugin
- compass-960-plugin - used in sasson
- based on 960.gs / demo
- Compass, the 960 CSS framework, and Semantic Markup - March 2, 2009
- Cleaner 960.gs using SASS and Compass - June 19th, 2010
- Mastering the 960 Grid System
Install
gem install compass-960-plugin
Grid mixins (see Sasson's layout partials for examples)
@import "960/grid";
Default is 12 colums. Set this in subtheme .scss;
$ninesixty-columns: 16;
Give an element a grid attribute
@include grid-container; - give to #page. sets width and auto margins @include grid(8); - declare an 8 column wide element @include grid-prefix(2); - add an empty 2-wide element before @include grid-suffix(2); - add an empty 2-wide element after @include grid-push(4); - push element 4 to the right @include grid-pull(4); - pull element 4 to the right @include alpha; - remove left gutter, for nested grid first element. must got after grid() @include omega; - remove right gutter, for nested grid last element. must got after grid()
Blueprint
- Blueprint
- http://compass-style.org/reference/blueprint/grid/
- 12, 16, plus 24 30pxcolumn, 10px gutter
- 950px
sass-960gs
- 960 Grid System - Standalone - recent
- Ruby Gem
Susy
- Susy - Responsive grids for Compass
- Introduction to Building Websites Using Susy and Compass's Vertical Rhythm - Dec 30th, 2011
- Responsive Grids With Susy - net tuts
- Gist: Susy Tutorial
$total-columns : 12; // a 12-column grid $column-width : 4em; // each column is 4em wide $gutter-width : 1em; // 1em gutters between columns $grid-padding : $gutter-width; // grid-padding equal to gutters
.page { // page acts as a container for our grid. @include container; // header and footer are full-width by default. header, footer { clear: both; } // nav spans 3 columns of total 12. nav { @include span-columns(3,12); } .content { // content spans the final (omega) 9 columns of 12. @include span-columns(9 omega,12); // main content spans 6 of those 9 columns. .main { @include span-columns(6,9); } // secondary content spans the final 3 (omega) of 9 columns. .secondary { @include span-columns(3 omega,9); } } }
Blankwork
- Blankwork is a simple, flexible and semantic grid system.
- scss, flexible and semantic
Golden Grid System
- Golden Grid System - A folding grid for responsive design.
- https://github.com/jonikorpi/Golden-Grid-System - few of months ago
- less and scss
- 240 up
- 18 even columns, two for grid border, 16 columns for design
Singularity
Zen
Neat
- https://github.com/thoughtbot/neat - for bourbon
Salsa
- https://github.com/tsi/Salsa - from Sasson v3, was Griddy
Griddles
- Griddles is a simple, opinionated grid system for modern responsive layouts. Free of columns it provides percentage based-layouts with an override capability so you can determine what happens to the layout at given break-points purely by adding classes.
Bootstrap and Foundation
etc
Bulma
- Bulma - a free, open source CSS framework based on Flexbox and used by more than 100,000 developers.
JS
Fluid grid and content
Grid generators
- http://grids.heroku.com/
- http://www.gridsystemgenerator.com/gs01.php
- http://gridpak.com/
- http://www.designbygrid.com/tools
- http://modulargrid.org
- http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/
- http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/
Overlays
- http://hashgrid.com/ - js grid display
- http://gridwax.gs/ - grid bookmarklet
- http://peol.github.com/960gridder/ - grid and rhythm bookmarklet
- https://github.com/milkmiruku/960gridder - my fork of the above. 16 column, 24 line height.
Vertical rhythm
- Compose to a Vertical Rhythm- oft' linked to, Dec 12th 2006
Web tool
- http://drewish.com/tools/vertical-rhythm - calculator, px based
- http://lamb.cc/typograph - Scale & Rhythm - weird paddings
JS
- http://simplefocus.com/flowtype/ FlowType.JS - Web typography at its finest: font-size and line-height based on element width.
Bookmarklets
- http://gridwax.gs/ - great
- http://www.portamento.pixelite.me/ - too snazzy
CSS
- http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design/
- Golden Ratio Typography Calculator
- https://github.com/jonschlinkert/vertical-rhythm - css/less templates
Sass
- See Sass