advanced code snippet search

Posted By

LeeRJohnson on 05/24/08


Tagged

layout conversion grid blueprint BlueprintCSS


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

basicmagic
SpinZ
visuallyspun
alvaroisorna
hannizkaos
titox
LeeRJohnson


BlueprintCSS Default Pixel to Em Conversion

 / Published in: CSS
 
Expand | Embed | Plain Text 
  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  

Comments

RSS Icon Subscribe to comments
Posted By: smitnn on September 28, 2009

Excellent work. However, for some reason the container width (line 2) caused a problem for me in IE8 only. I changed it to "width:79.17em;" and the problem was fixed. Thanks for putting this together tho.

Posted By: LeeRJohnson on November 20, 2009

Yes, the problem with em's is the rounding differences between browsers. I've fiddled with the 2nd to 5th decimal place and browsers can never agree to the pixel outcome. I've used many versions and I think in this version not all the columns line up in Safari (haven't test Chrome) because it doesn't read all the decimals. formula: (px / font-size) : 1px / 12px = 0.08334ems

You need to login to post a comment.