https://github.com/dumindu/mytemplate2.tumblr.com

Second Attempt Of Responsive Web Design
https://github.com/dumindu/mytemplate2.tumblr.com

css3 html5 rwd tumblr

Last synced: 3 months ago
JSON representation

Second Attempt Of Responsive Web Design

• Host: GitHub
• URL: https://github.com/dumindu/mytemplate2.tumblr.com
• Owner: dumindu
• Created: 2012-12-09T04:12:12.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2017-01-09T16:10:59.000Z (almost 9 years ago)
• Last Synced: 2025-01-10T18:59:25.136Z (10 months ago)
• Topics: css3, html5, rwd, tumblr
• Language: CSS
• Homepage: http://mytemplate2.tumblr.com
• Size: 342 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# My Second Attempt Of Responsive Web Design

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

![My Second Attempt Of Responsive Web Design in 2012-2013](http://i.imgur.com/ZmHU8DW.png)

* 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