My Second Attempt Of Responsive Web Design

A Responsive template created for Tumblr blogging platform in 2012-2013

• Tools: HTML5, CSS3, HTML5 Boilerplate, Non-pixel/ Em Based Units and CSS Media Queries.
• Design: www.behance.net/gallery/New-Tumblr-theme/6648753
• Code: www.github.com/dumindu/mytemplate2.tumblr.com

Typography

font-size and line-height, margins and etc

Basic Unit        |    Measurement    |

--------------------- | ----------------- | font | 1em = 100% = 16px | line-height p | 1.5em | line-height H1-H6 | 0.9625em | | | margin H1-H6 | 0.75em 0 | margin P | 0 0 1.5em | | | margin-left UL/OL | 1.5em | margin-left DL/DD | 0.75em | | | margin-sub | 0.75em | text-shadow H1-H6 | 0.0625em = 1/16 | | | font PRE/CODE | 0.875em | font FIGCAPTION | 0.875em |

RWD Measurements

viewport type	viewport info	font size	P 1x	H1 1.5x	H2 1.25x	H3 1x	H4,H5,H6 .75x

Mobile     |  default           |    1em      |  16/24 |    24     |     20     |   16    |        12       |
Tablet     |  min-width: 35em   |    1.25em   |  20/30 |    30     |     25     |   20    |        15       |
Desktop    |  min-width: 76.5em |    1.5em    |  24/36 |    36     |     30     |   24    |        18       |
TV         |  min-width: 114em  |    2em      |  32/48 |    48     |     40     |   32    |        24       |

Media figure classes

• figure_landscape_large
• figure_landscape_medium
• figure_landscape_small
• figure_portrait_large
• figure_portrait_medium
• figure_portrait_small

Last updated : January, 2013