Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 20th, 2012  |  syntax: None  |  size: 2.01 KB  |  hits: 8  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /*-----------------------------------------------------
  2.   960 Grid System ~ Core CSS.
  3.   Learn more ~ http://960.gs/
  4.  
  5.   Licensed under GPL and MIT.
  6. -------------------------------------------------------*/
  7.  
  8. /* Grid Settings
  9. ---------------------------*/
  10. // 12-column grid
  11. $columns: 12;     // Number of columns
  12. $col_width: 60px; // Column width
  13. $gutter: 20px;    // Gutter width
  14.  
  15. // 16-column grid
  16. //$columns: 16;
  17. //$col_width: 40px;
  18. //$gutter: 20px;
  19.  
  20. // 24-column grid
  21. //$columns: 24;
  22. //$col_width: 30px;
  23. //$gutter: 10px;
  24.  
  25. $cell_width: $col_width + $gutter;
  26.  
  27. body {
  28.   min-width: 960px;
  29. }
  30.  
  31. /* `Containers
  32. ----------------------------------------------------------------------------------------------------*/
  33. @mixin grid_container {
  34.   margin-left: auto;
  35.   margin-right: auto;
  36.   width: 960px;
  37. }
  38.  
  39. /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
  40. ----------------------------------------------------------------------------------------------------*/
  41. @mixin alpha {
  42.   margin-left: 0;
  43. }
  44.  
  45. @mixin omega {
  46.   margin-right: 0;
  47. }
  48.  
  49. /* `Grid >> Columns
  50. ----------------------------------------------------------------------------------------------------*/
  51. @mixin grid($i) {
  52.   display: inline;
  53.   float: left;
  54.   margin-left: $gutter / 2;
  55.   margin-right: $gutter / 2;
  56.   width: $col_width * $i + $gutter * ($i - 1);
  57. }
  58.  
  59. /* `Prefix Extra Space
  60. ----------------------------------------------------------------------------------------------------*/
  61. @mixin prefix($i) {
  62.   padding-left: $cell_width * $i
  63. }
  64.  
  65. /* `Suffix Extra Space
  66. ----------------------------------------------------------------------------------------------------*/
  67. @mixin suffix($i) {
  68.   padding-right: $cell_width * $i;
  69. }
  70.  
  71. /* `Push Space
  72. ----------------------------------------------------------------------------------------------------*/
  73. @mixin push($i) {
  74.   position: relative;
  75.   left: $cell_width * $i;
  76. }
  77.  
  78. /* `Pull Space >> 12 Columns
  79. ----------------------------------------------------------------------------------------------------*/
  80. @mixin pull($i) {
  81.   position: relative;
  82.   left: 0 - ($cell_width * $i);
  83. }