Tp Style Guide 110308
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Tp Style Guide 110308 as PDF for free.
More details
- Words: 448
- Pages: 15
style guide v0.1 | 11.03.2008
Home Pg
TakePart.com | Style Guide | 11.03.2008 | pg.2
fade left/right edges to 9EAA3E when browser window is >1900 wide in general, 30px padding above and below content
img 221x173px
img 227x86px
img 420x236px
fade left/right edges to 414B0E when browser window is >1900 wide
bkgd img height 1200px
bottom edge of bkgd img fades to black
site width 927px bkgd img width 1900px
Landing Pg, Issue
TBD
thumbnail 48x48px icon 16x16px
TakePart.com | Style Guide | 11.03.2008 | pg.3
Content View Pg
TakePart.com | Style Guide | 11.03.2008 | pg.4
thumbnail 48x48px
hero/main content width = 640px height = variable
list width = 927px height = variable
related/supporting media
Content Type / Video
TakePart.com | Style Guide | 11.03.2008 | pg.5
TakePart player
video player 16:9 ratio 640x360px
column width 640px
Content Type / Audio
TakePart.com | Style Guide | 11.03.2008 | pg.6
TakePart player
img 4:3 ratio 640x480px only appears if img is uploaded with audio; “Play Audio “ bug is added to img; entire img is clickable to play audio
column width 640px
Content Type / Photo Gallery - Multiple Photos
thumbnail 48x48px
column width 640px
TakePart.com | Style Guide | 11.03.2008 | pg.7
Content Type / Photo Gallery - Enlarged Photo
TakePart.com | Style Guide | 11.03.2008 | pg.8
img 4:3 ratio max 640px wide max 480px tall
base 987x700px
column width 640px landscape
lightbox
portrait
Content Type / Photo Gallery - Single Photo
img 4:3 ratio max 640px wide max 480px tall see previous pg for treatment of landscape vs. portrait imgs
column width 640px
TakePart.com | Style Guide | 11.03.2008 | pg.9
Content Type / Text
TakePart.com | Style Guide | 11.03.2008 | pg.10
img 4:3 ratio max 360px wide max 270px tall
when text has no related/supporting content, column width = 927px
Content Type / Video
TakePart.com | Style Guide | 11.03.2008 | pg.11
TakePart player
video player 16:9 ratio 640x360px
column width 640px
Content List, default
TakePart.com | Style Guide | 11.03.2008 | pg.12
content bar minimized width = 927px height = 52px thumbnail 48x48px icon 16x16px
numbered list
non-numbered list
Content List, expanded bar
TakePart.com | Style Guide | 11.03.2008 | pg.13
all content types fit here and follow the specs on previous pgs
expanded panel width 987px
Profile - Person Pg
avatar 115x115px
img 234x95px
thumbnail 48x48px icon 16x16px prioritized content bar see content bar states
no background img as in home, landing pg, etc.
TakePart.com | Style Guide | 11.03.2008 | pg.14
Dashboard Home Pg
img 234x95px prioritized content bar see content bar states
no background img as in home, landing pg, etc.
TakePart.com | Style Guide | 11.03.2008 | pg.15
Home Pg
TakePart.com | Style Guide | 11.03.2008 | pg.2
fade left/right edges to 9EAA3E when browser window is >1900 wide in general, 30px padding above and below content
img 221x173px
img 227x86px
img 420x236px
fade left/right edges to 414B0E when browser window is >1900 wide
bkgd img height 1200px
bottom edge of bkgd img fades to black
site width 927px bkgd img width 1900px
Landing Pg, Issue
TBD
thumbnail 48x48px icon 16x16px
TakePart.com | Style Guide | 11.03.2008 | pg.3
Content View Pg
TakePart.com | Style Guide | 11.03.2008 | pg.4
thumbnail 48x48px
hero/main content width = 640px height = variable
list width = 927px height = variable
related/supporting media
Content Type / Video
TakePart.com | Style Guide | 11.03.2008 | pg.5
TakePart player
video player 16:9 ratio 640x360px
column width 640px
Content Type / Audio
TakePart.com | Style Guide | 11.03.2008 | pg.6
TakePart player
img 4:3 ratio 640x480px only appears if img is uploaded with audio; “Play Audio “ bug is added to img; entire img is clickable to play audio
column width 640px
Content Type / Photo Gallery - Multiple Photos
thumbnail 48x48px
column width 640px
TakePart.com | Style Guide | 11.03.2008 | pg.7
Content Type / Photo Gallery - Enlarged Photo
TakePart.com | Style Guide | 11.03.2008 | pg.8
img 4:3 ratio max 640px wide max 480px tall
base 987x700px
column width 640px landscape
lightbox
portrait
Content Type / Photo Gallery - Single Photo
img 4:3 ratio max 640px wide max 480px tall see previous pg for treatment of landscape vs. portrait imgs
column width 640px
TakePart.com | Style Guide | 11.03.2008 | pg.9
Content Type / Text
TakePart.com | Style Guide | 11.03.2008 | pg.10
img 4:3 ratio max 360px wide max 270px tall
when text has no related/supporting content, column width = 927px
Content Type / Video
TakePart.com | Style Guide | 11.03.2008 | pg.11
TakePart player
video player 16:9 ratio 640x360px
column width 640px
Content List, default
TakePart.com | Style Guide | 11.03.2008 | pg.12
content bar minimized width = 927px height = 52px thumbnail 48x48px icon 16x16px
numbered list
non-numbered list
Content List, expanded bar
TakePart.com | Style Guide | 11.03.2008 | pg.13
all content types fit here and follow the specs on previous pgs
expanded panel width 987px
Profile - Person Pg
avatar 115x115px
img 234x95px
thumbnail 48x48px icon 16x16px prioritized content bar see content bar states
no background img as in home, landing pg, etc.
TakePart.com | Style Guide | 11.03.2008 | pg.14
Dashboard Home Pg
img 234x95px prioritized content bar see content bar states
no background img as in home, landing pg, etc.
TakePart.com | Style Guide | 11.03.2008 | pg.15
Related Documents
Tp Style Guide 110308
December 2019 21
110308
November 2019 21
Style Guide
October 2019 28
Style Guide
June 2020 19
Style Guide
June 2020 23