advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

funkmyer on 04/21/08


Tagged

css safari web iphone Development


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

blackabee
mrjthethird
mikegreen


iPhone Web Applications base styles

Published in: CSS 

URL: http://www.phpinsider.com/css/iPhoneUI.css

Plain TextExpand 
  1. /*
  2.   iPhoneUI.css
  3.   
  4.   Base styles for iPhone Web applications, based on Apple's
  5.   recommended user interface styles.
  6.   
  7.   http://developer.apple.com/iphone/designingcontent.html
  8. */
  9.  
  10. body {
  11.   font-family: Helvetica, Arial, sans-serif;
  12.   margin: 0;
  13.   padding: 0;
  14. }
  15.  
  16. .edgeToEdge {
  17.   background-color: #fff;
  18.   border-spacing: 0;
  19.   border-width: 0;
  20.   font-size: 20px;
  21.   font-weight: bold;
  22.   margin: 0;
  23.   padding: 0;
  24. }
  25.  
  26. .edgeToEdge.formButtons {
  27.   margin: 0;
  28.   padding: 10px;
  29. }
  30.  
  31. .edgeToEdge .formList {
  32.   font-weight: normal;
  33. }
  34.  
  35. .edgeToEdge.formFields textarea,
  36. .roundedRect.formFields textarea,
  37. .roundedRect .formFields textarea {
  38.   clear: left;
  39.   display: block;
  40.   width: 296px;
  41. }
  42.  
  43. dl.edgeToEdge.formFields dd,
  44. dl.roundedRect.formFields dd,
  45. .roundedRect .formFields dd {
  46.   border-bottom: 1px solid rgb(217,217,217);
  47.   padding: 10px;
  48.   margin: 0;
  49.   text-align: right;
  50. }
  51.  
  52. dl.edgeToEdge.formFields dd.last,
  53. dl.roundedRect.formFields dd.last,
  54. .roundedRect .formFields dd.last {
  55.   border-bottom-width: 0;
  56. }
  57.  
  58. dl.edgeToEdge.formFields dt,
  59. dl.roundedRect.formFields dt,
  60. .roundedRect .formFields dt {
  61.   clear: left;
  62.   float: left;
  63.   padding: 10px 10px 0 10px;
  64.   margin: 0;
  65. }
  66.  
  67. p.edgeToEdgeLast {
  68.   border-bottom-width: 0;
  69. }
  70.  
  71. form {
  72.   margin: 0;
  73. }
  74.  
  75. .formButtons {
  76.   text-align: right;
  77. }
  78.  
  79. .formList {
  80.   list-style-type: none;
  81.   margin: 0 0 -.33em 0;
  82.   padding: 0;
  83. }
  84.  
  85. .formList li {
  86.   margin-bottom: .33em;
  87. }
  88.  
  89. .formResults {
  90.   background-color: #fff;
  91.   -webkit-border-radius: 8px;
  92.   color: #900;
  93.   font: normal normal bold 17px/normal Helvetica, Arial, sans-serif;
  94.   margin: 1em 10px;
  95.   padding: 10px;
  96.   text-align: center;
  97. }
  98.  
  99. .iphone-preview-landscape,
  100. .iphone-preview-portrait {
  101.   background-color: #A3A3A3;
  102.   border: 1px solid #000;
  103.   margin: 1em auto;
  104.   min-height: 320px;
  105.   width: 356px;
  106. }
  107.  
  108. .iphone-preview-portrait {
  109.   min-height: 356px;
  110.   width: 320px;
  111. }
  112.  
  113. .roundedRect {
  114.   background-color: #fff;
  115.   border-width: 0;
  116.   font-family: Helvetica, Arial, sans-serif;
  117.   font-size: 17px;
  118.   font-weight: bold;
  119.   margin: 10px;
  120.   -webkit-border-radius: 8px 8px;
  121. }
  122.  
  123. body.roundedRect,
  124. body.roundedRect .iphone-preview-landscape {
  125.   background-color: #C5CCD3;
  126. }
  127.  
  128. body.roundedRect {
  129.   font: normal normal bold 17px/normal Helvetica, Arial, sans-serif;
  130. }
  131.  
  132. div.roundedRect {
  133.   margin: .6em 10px 1em 10px;
  134.   padding: 1px 10px;
  135. }
  136.  
  137. p.roundedRect {
  138.   padding: 10px;
  139. }
  140.  
  141. .roundedRectHead,
  142. .roundedRect legend {
  143.   color: rgb(76,86,108);
  144.   font: normal normal bold 17px/normal Helvetica, Arial, sans-serif;
  145.   margin: 0;
  146. }
  147.  
  148. .roundedRectIntHead {
  149.   font: normal normal normal 21px/normal Helvetica, Arial, sans-serif;
  150.   margin: 1em 0 -.75em 0;
  151. }
  152.  
  153. fieldset.roundedRect {
  154.   margin: 2em 10px 1em 10px;
  155.   padding: 0 0 1px 0;
  156. }
  157.  
  158. fieldset.roundedRect p {
  159.   margin: 1em 10px;
  160. }
  161.  
  162. .roundedRect legend {
  163.   padding-left: 10px;
  164.   position: relative;
  165.   top: -.8em;
  166. }
  167.  
  168. .roundedRectHead {
  169.   margin: 1em 20px -.5em 20px;
  170. }

Report this snippet 

You need to login to post a comment.