You are here

Home » API reference » Drupal Commons 6.2

grid16-fluid.css in Drupal Commons 6.2

Same filename in this branch
  1. 6.2 themes/commons_connect/css/grid16-fluid.css
  2. 6.2 themes/commons_origins/css/grid16-fluid.css
/* $Id: grid16-fluid.css 6945 2010-03-25 05:56:44Z chris $ */

/* Layout - 16 column grid, fluid width, 20px gutters
-------------------------------------------------------------- */

/* grid widths */
.grid16-1 {width: 6.25%;}
.grid16-2 {width: 12.5%;}
.grid16-3 {width: 18.75%;}
.grid16-4 {width: 25%;}
.grid16-5 {width: 31.25%;}
.grid16-6 {width: 37.5%;}
.grid16-7 {width: 43.75%;}
.grid16-8 {width: 50%;}
.grid16-9 {width: 56.25%;}
.grid16-10 {width: 62.5%;}
.grid16-11 {width: 68.75%;}
.grid16-12 {width: 75%;}
.grid16-13 {width: 81.25%;}
.grid16-14 {width: 87.5%;}
.grid16-15 {width: 93.75%;}
.grid16-16 {width: 100%;}

/* block indents */
.grid16-indent-1 {margin-left: 6.25%;}
.grid16-indent-2 {margin-left: 12.5%;}
.grid16-indent-3 {margin-left: 18.75%;}
.grid16-indent-4 {margin-left: 25%;}
.grid16-indent-5 {margin-left: 31.25%;}
.grid16-indent-6 {margin-left: 37.5%;}
.grid16-indent-7 {margin-left: 43.75%;}
.grid16-indent-8 {margin-left: 50%;}
.grid16-indent-9 {margin-left: 56.25%;}
.grid16-indent-10 {margin-left: 62.5%;}
.grid16-indent-11 {margin-left: 68.75%;}
.grid16-indent-12 {margin-left: 75%;}
.grid16-indent-13 {margin-left: 81.25%;}
.grid16-indent-14 {margin-left: 87.5%;}
.grid16-indent-15 {margin-left: 93.75%;}

/* gutters (2 x margin) */
.block .inner {
  margin-left: 10px;
  margin-right: 10px;
}

/* page min width */
body,
div.full-width {
  min-width: 960px;
}

/* row max-min width */
.row {
  max-width: 100%;  
  min-width: 960px;   
}

/*ensure body copy is not too long in very wide width browsers*/

.page-node.full-node.grid-type-fluid .content-content .node .content,
.page-node.full-node.grid-type-fluid .content-content .comments .content {
  max-width: 700px;
} 

/* allow nested rows to be smaller */
.row.nested {
  min-width: 0;
}

/* theme setting: set fluid grid width on top-level full-width elements */
.fluid-100 .full-width .grid16-16 {width: 100%;}
.fluid-95 .full-width .grid16-16 {width: 95%;}
.fluid-90 .full-width .grid16-16 {width: 90%;}
.fluid-85 .full-width .grid16-16 {width: 85%;}

/* now reset all nested full-width elements back to 100% */
#page .grid16-16 .grid16-16 {width: 100%;}

File

themes/commons_origins/css/grid16-fluid.css
View source 
  1. /* $Id: grid16-fluid.css 6945 2010-03-25 05:56:44Z chris $ */

  2. 

  3. /* Layout - 16 column grid, fluid width, 20px gutters

  4. -------------------------------------------------------------- */

  5. 

  6. /* grid widths */

  7. .grid16-1 {width: 6.25%;}

  8. .grid16-2 {width: 12.5%;}

  9. .grid16-3 {width: 18.75%;}

  10. .grid16-4 {width: 25%;}

  11. .grid16-5 {width: 31.25%;}

  12. .grid16-6 {width: 37.5%;}

  13. .grid16-7 {width: 43.75%;}

  14. .grid16-8 {width: 50%;}

  15. .grid16-9 {width: 56.25%;}

  16. .grid16-10 {width: 62.5%;}

  17. .grid16-11 {width: 68.75%;}

  18. .grid16-12 {width: 75%;}

  19. .grid16-13 {width: 81.25%;}

  20. .grid16-14 {width: 87.5%;}

  21. .grid16-15 {width: 93.75%;}

  22. .grid16-16 {width: 100%;}

  23. 

  24. /* block indents */

  25. .grid16-indent-1 {margin-left: 6.25%;}

  26. .grid16-indent-2 {margin-left: 12.5%;}

  27. .grid16-indent-3 {margin-left: 18.75%;}

  28. .grid16-indent-4 {margin-left: 25%;}

  29. .grid16-indent-5 {margin-left: 31.25%;}

  30. .grid16-indent-6 {margin-left: 37.5%;}

  31. .grid16-indent-7 {margin-left: 43.75%;}

  32. .grid16-indent-8 {margin-left: 50%;}

  33. .grid16-indent-9 {margin-left: 56.25%;}

  34. .grid16-indent-10 {margin-left: 62.5%;}

  35. .grid16-indent-11 {margin-left: 68.75%;}

  36. .grid16-indent-12 {margin-left: 75%;}

  37. .grid16-indent-13 {margin-left: 81.25%;}

  38. .grid16-indent-14 {margin-left: 87.5%;}

  39. .grid16-indent-15 {margin-left: 93.75%;}

  40. 

  41. /* gutters (2 x margin) */

  42. .block .inner {

  43.   margin-left: 10px;

  44.   margin-right: 10px;

  45. }

  46. 

  47. /* page min width */

  48. body,

  49. div.full-width {

  50.   min-width: 960px;

  51. }

  52. 

  53. /* row max-min width */

  54. .row {

  55.   max-width: 100%;  

  56.   min-width: 960px;   

  57. }

  58. 

  59. /*ensure body copy is not too long in very wide width browsers*/

  60. 

  61. .page-node.full-node.grid-type-fluid .content-content .node .content,

  62. .page-node.full-node.grid-type-fluid .content-content .comments .content {

  63.   max-width: 700px;

  64. } 

  65. 

  66. /* allow nested rows to be smaller */

  67. .row.nested {

  68.   min-width: 0;

  69. }

  70. 

  71. /* theme setting: set fluid grid width on top-level full-width elements */

  72. .fluid-100 .full-width .grid16-16 {width: 100%;}

  73. .fluid-95 .full-width .grid16-16 {width: 95%;}

  74. .fluid-90 .full-width .grid16-16 {width: 90%;}

  75. .fluid-85 .full-width .grid16-16 {width: 85%;}

  76. 

  77. /* now reset all nested full-width elements back to 100% */

  78. #page .grid16-16 .grid16-16 {width: 100%;}