Layout

From Things and Stuff Wiki
Jump to navigation Jump to search


#rwd

Responsive

to review;



Examples

Templates

Viewport

Device sizes

Media Types and 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


320 and Up

@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

/* 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

text formatting; 

@media (max-width: 480px) {
   .your-particular-selector br { display:  none; }
}

text-content; responsive text

Navigation

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

  • Imager.js is an alternative solution to the issue of how to handle responsive image loading, created at the BBC [2]


scrset

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





Tools

Responsive testing

  • ish. is yet another viewport resizer.

Mobile testing

Other

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.

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
  • 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


Factor pairs

  • 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

golden ratio vertical rhythm;

  • Skeleton - "A Beautiful Boilerplate for Responsive, Mobile-Friendly Development"

fluid960gs

978.gs

Columnal

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.

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

@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

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

sass-960gs

Susy

$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

Singularity

Zen

Neat

Salsa

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

JS

Fluid grid and content

Grid generators

Overlays

Vertical rhythm





Web tool



JS



Bookmarklets




CSS


Sass

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Layout&oldid=56559"