Posted By

LeeRJohnson on 05/24/08


Tagged

layout conversion grid blueprint BlueprintCSS


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

basicmagic
visuallyspun
alvaroisorna
Milad


BlueprintCSS Default Pixel to Em Conversion


 / Published in: CSS
 

  1. .container {
  2. width:79.166em;
  3. margin: 0 auto;
  4. }
  5.  
  6.  
  7. /* Columns
  8. -------------------------------------------------------------- */
  9.  
  10. /* Sets up basic grid floating and margin. */
  11. .span-1, .span-2, .span-3, .span-4, .span-5,
  12. .span-6, .span-7, .span-8, .span-9, .span-10,
  13. .span-11, .span-12, .span-13, .span-14, .span-15,
  14. .span-16, .span-17, .span-18, .span-19, .span-20,
  15. .span-21, .span-22, .span-23, .span-24 {
  16. float: left;
  17. /* Change: approximate EM width of orginal 10px margin (LRJ)*/
  18. margin-right: .833em;
  19. }
  20.  
  21. /* Use these classes to set the width of a column. */
  22. /* Added by Lee R Johnson 2008-03-08.
  23.   EM widths aproximate original pixel widths based
  24.   based on default font-size. px-width is a holder;
  25. */
  26. .span-1 { width: 2.5em; }
  27. .span-2 { width: 5.833em; }
  28. .span-3 { width: 9.166em; }
  29. .span-4 { width: 12.5em; }
  30. .span-5 { width: 15.833em; }
  31. .span-6 { width: 19.166em; }
  32. .span-7 { width: 22.5em; }
  33. .span-8 { width: 25.833em; }
  34. .span-9 { width: 29.166em; }
  35. .span-10 { width: 32.5em; }
  36. .span-11 { width: 35.833em; }
  37. .span-12 { width: 39.166em; }
  38. .span-13 { width: 42.5em; }
  39. .span-14 { width: 45.833em; }
  40. .span-15 { width: 49.166em; }
  41. .span-16 { width: 52.5em; }
  42. .span-17 { width: 55.833em; }
  43. .span-18 { width: 59.166em; }
  44. .span-19 { width: 62.5em; }
  45. .span-20 { width: 65.833em; }
  46. .span-21 { width: 69.166em; }
  47. .span-22 { width: 72.5em; }
  48. .span-23 { width: 75.833em; }
  49. .span-24 { width: 79.166em; }
  50.  
  51. /* The last column in a row needs this class. */
  52. .last, span-24{ margin-right: 0; }
  53.  
  54.  
  55. /* Add these to a column to append empty cols. */
  56. .append-1 { padding-right: 3.333em; }
  57. .append-2 { padding-right: 6.666em; }
  58. .append-3 { padding-right: 10em; }
  59. .append-4 { padding-right: 13.333em; }
  60. .append-5 { padding-right: 16.666em; }
  61. .append-6 { padding-right: 20em; }
  62. .append-7 { padding-right: 23.333em; }
  63. .append-8 { padding-right: 26.666em; }
  64. .append-9 { padding-right: 30em; }
  65. .append-10 { padding-right: 33.333em; }
  66. .append-11 { padding-right: 36.666em; }
  67. .append-12 { padding-right: 40em; }
  68. .append-13 { padding-right: 43.333em; }
  69. .append-14 { padding-right: 46.666em; }
  70. .append-15 { padding-right: 50em; }
  71. .append-16 { padding-right: 53.333em; }
  72. .append-17 { padding-right: 56.666em; }
  73. .append-18 { padding-right: 60em; }
  74. .append-19 { padding-right: 63.333em; }
  75. .append-20 { padding-right: 66.666em; }
  76. .append-21 { padding-right: 70em; }
  77. .append-22 { padding-right: 73.333em; }
  78. .append-23 { padding-right: 76.666em; }
  79. .append-24 { padding-right: 80em; }
  80.  
  81. /* Add these to a column to prepend empty cols. */
  82. .prepend-1 { padding-left: 3.333em; }
  83. .prepend-2 { padding-left: 6.666em; }
  84. .prepend-3 { padding-left: 10em; }
  85. .prepend-4 { padding-left: 13.333em; }
  86. .prepend-5 { padding-left: 16.666em; }
  87. .prepend-6 { padding-left: 20em; }
  88. .prepend-7 { padding-left: 23.333em; }
  89. .prepend-8 { padding-left: 26.666em; }
  90. .prepend-9 { padding-left: 30em; }
  91. .prepend-10 { padding-left: 33.333em; }
  92. .prepend-11 { padding-left: 36.666em; }
  93. .prepend-12 { padding-left: 40em; }
  94. .prepend-13 { padding-left: 43.333em; }
  95. .prepend-14 { padding-left: 46.666em; }
  96. .prepend-15 { padding-left: 50em; }
  97. .prepend-16 { padding-left: 53.333em; }
  98. .prepend-17 { padding-left: 56.666em; }
  99. .prepend-18 { padding-left: 60em; }
  100. .prepend-19 { padding-left: 63.333em; }
  101. .prepend-20 { padding-left: 66.666em; }
  102. .prepend-21 { padding-left: 70em; }
  103. .prepend-22 { padding-left: 73.333em; }
  104. .prepend-23 { padding-left: 76.666em; }
  105. .prepend-24 { padding-left: 80em; }
  106.  
  107. /* Use these classes on an element to push it into the
  108.   next column, or to pull it into the previous column. */
  109.  
  110. .pull-1 { margin-left: -3.333em; }
  111. .pull-2 { margin-left: -6.666em; }
  112. .pull-3 { margin-left: -10em; }
  113. .pull-4 { margin-left: -13.333em; }
  114. .pull-5 { margin-left: -16.666em; }
  115.  
  116. .pull-1, .pull-2, .pull-3,
  117. .pull-4, .pull-5, .pull-5 {
  118. float:left;
  119. position:relative;
  120. }
  121.  
  122. .push-1 { margin: 0 -3.333em 1.5em 3.333em; }
  123. .push-2 { margin: 0 -6.666em 1.5em 6.666em; }
  124. .push-3 { margin: 0 -10em 1.5em 10em; }
  125. .push-4 { margin: 0 -13.333em 1.5em 13.333em; }
  126. .push-5 { margin: 0 -16.666em 1.5em 16.666em; }
  127.  
  128. .push-0, .push-1, .push-2,
  129. .push-3, .push-4, .push-5 {
  130. float: right;
  131. position:relative;
  132. }

Report this snippet  

You need to login to post a comment.