iPhone Web Applications base styles


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  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. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.