You are here

Home » API reference » Blazy 8

blazy.grid.css in Blazy 8

Same filename and directory in other branches
  1. 8.2 css/components/blazy.grid.css
  2. 7 css/components/blazy.grid.css

Block grid based on Foundation 5.

This is a modified version to be re-usable for divities, not only UL/OL list, as long as the list item has class "grid".

File

css/components/blazy.grid.css
View source 
  1. /**

  2.  * @file

  3.  * Block grid based on Foundation 5.

  4.  *

  5.  * This is a modified version to be re-usable for divities, not only UL/OL list,

  6.  * as long as the list item has class "grid".

  7.  */

  8. 

  9. [class*="block-grid-"],

  10. [class*="block-grid-"] * {

  11.   -webkit-box-sizing: border-box;

  12.   box-sizing: border-box;

  13. }

  14. 

  15. [class*="block-grid-"],

  16. .block [class*="block-grid-"],

  17. .item-list > [class*="block-grid-"] {

  18.   display: block;

  19.   list-style: none;

  20.   padding: 0;

  21.   margin: 0 -0.625rem;

  22. }

  23. 

  24. [class*="block-grid-"]::before,

  25. [class*="block-grid-"]::after {

  26.   content: " ";

  27.   display: table;

  28. }

  29. 

  30. [class*="block-grid-"]::after {

  31.   clear: both;

  32. }

  33. 

  34. [class*="block-grid-"] > .grid {

  35.   display: block;

  36.   float: left;

  37.   height: auto;

  38.   list-style: none;

  39.   margin: 0;

  40.   padding: 0 0.625rem 1.25rem;

  41. }

  42. 

  43. .block-grid--centered[class*="block-grid"],

  44. .item-list > .block-grid--centered[class*="block-grid"] {

  45.   text-align: center;

  46. }

  47. 

  48. .block-grid--centered[class*="block-grid"] > .grid,

  49. .item-list > .block-grid--centered[class*="block-grid"] > .grid {

  50.   text-align: left;

  51.   display: inline-block;

  52.   float: none;

  53.   vertical-align: top;

  54. }

  55. 

  56. @media only screen {

  57.   .small-block-grid-1 > .grid {

  58.     width: 100%;

  59.   }

  60. 

  61.   .small-block-grid-2 > .grid {

  62.     width: 50%;

  63.   }

  64. 

  65.   .small-block-grid-3 > .grid {

  66.     width: 33.33333%;

  67.   }

  68. 

  69.   .small-block-grid-4 > .grid {

  70.     width: 25%;

  71.   }

  72. 

  73.   .small-block-grid-5 > .grid {

  74.     width: 20%;

  75.   }

  76. 

  77.   .small-block-grid-6 > .grid {

  78.     width: 16.66667%;

  79.   }

  80. 

  81.   .small-block-grid-7 > .grid {

  82.     width: 14.28571%;

  83.   }

  84. 

  85.   .small-block-grid-8 > .grid {

  86.     width: 12.5%;

  87.   }

  88. 

  89.   .small-block-grid-9 > .grid {

  90.     width: 11.11111%;

  91.   }

  92. 

  93.   .small-block-grid-10 > .grid {

  94.     width: 10%;

  95.   }

  96. 

  97.   .small-block-grid-11 > .grid {

  98.     width: 9.09091%;

  99.   }

  100. 

  101.   .small-block-grid-12 > .grid {

  102.     width: 8.33333%;

  103.   }

  104. 

  105.   .small-block-grid-1 > .grid:nth-of-type(1n),

  106.   .small-block-grid-2 > .grid:nth-of-type(1n),

  107.   .small-block-grid-3 > .grid:nth-of-type(1n),

  108.   .small-block-grid-4 > .grid:nth-of-type(1n),

  109.   .small-block-grid-5 > .grid:nth-of-type(1n),

  110.   .small-block-grid-6 > .grid:nth-of-type(1n),

  111.   .small-block-grid-8 > .grid:nth-of-type(1n),

  112.   .small-block-grid-7 > .grid:nth-of-type(1n),

  113.   .small-block-grid-9 > .grid:nth-of-type(1n),

  114.   .small-block-grid-10 > .grid:nth-of-type(1n),

  115.   .small-block-grid-11 > .grid:nth-of-type(1n),

  116.   .small-block-grid-12 > .grid:nth-of-type(1n) {

  117.     clear: none;

  118.   }

  119. 

  120.   .small-block-grid-1 > .grid:nth-of-type(1n+1),

  121.   .small-block-grid-2 > .grid:nth-of-type(2n+1),

  122.   .small-block-grid-3 > .grid:nth-of-type(3n+1),

  123.   .small-block-grid-4 > .grid:nth-of-type(4n+1),

  124.   .small-block-grid-5 > .grid:nth-of-type(5n+1),

  125.   .small-block-grid-6 > .grid:nth-of-type(6n+1),

  126.   .small-block-grid-7 > .grid:nth-of-type(7n+1),

  127.   .small-block-grid-8 > .grid:nth-of-type(8n+1),

  128.   .small-block-grid-9 > .grid:nth-of-type(9n+1),

  129.   .small-block-grid-10 > .grid:nth-of-type(10n+1),

  130.   .small-block-grid-11 > .grid:nth-of-type(11n+1),

  131.   .small-block-grid-12 > .grid:nth-of-type(12n+1) {

  132.     clear: both;

  133.   }

  134. }

  135. 

  136. /** 641px with 16px base font. */

  137. @media only screen and (min-width: 40.063em) {

  138.   .medium-block-grid-1 > .grid {

  139.     width: 100%;

  140.   }

  141. 

  142.   .medium-block-grid-2 > .grid {

  143.     width: 50%;

  144.   }

  145. 

  146.   .medium-block-grid-3 > .grid {

  147.     width: 33.33333%;

  148.   }

  149. 

  150.   .medium-block-grid-4 > .grid {

  151.     width: 25%;

  152.   }

  153. 

  154.   .medium-block-grid-5 > .grid {

  155.     width: 20%;

  156.   }

  157. 

  158.   .medium-block-grid-6 > .grid {

  159.     width: 16.66667%;

  160.   }

  161. 

  162.   .medium-block-grid-7 > .grid {

  163.     width: 14.28571%;

  164.   }

  165. 

  166.   .medium-block-grid-8 > .grid {

  167.     width: 12.5%;

  168.   }

  169. 

  170.   .medium-block-grid-9 > .grid {

  171.     width: 11.11111%;

  172.   }

  173. 

  174.   .medium-block-grid-10 > .grid {

  175.     width: 10%;

  176.   }

  177. 

  178.   .medium-block-grid-11 > .grid {

  179.     width: 9.09091%;

  180.   }

  181. 

  182.   .medium-block-grid-12 > .grid {

  183.     width: 8.33333%;

  184.   }

  185. 

  186.   .medium-block-grid-1 > .grid:nth-of-type(1n),

  187.   .medium-block-grid-2 > .grid:nth-of-type(1n),

  188.   .medium-block-grid-3 > .grid:nth-of-type(1n),

  189.   .medium-block-grid-4 > .grid:nth-of-type(1n),

  190.   .medium-block-grid-5 > .grid:nth-of-type(1n),

  191.   .medium-block-grid-6 > .grid:nth-of-type(1n),

  192.   .medium-block-grid-7 > .grid:nth-of-type(1n),

  193.   .medium-block-grid-8 > .grid:nth-of-type(1n),

  194.   .medium-block-grid-9 > .grid:nth-of-type(1n),

  195.   .medium-block-grid-10 > .grid:nth-of-type(1n),

  196.   .medium-block-grid-11 > .grid:nth-of-type(1n),

  197.   .medium-block-grid-12 > .grid:nth-of-type(1n) {

  198.     clear: none;

  199.   }

  200. 

  201.   .medium-block-grid-1 > .grid:nth-of-type(1n+1),

  202.   .medium-block-grid-2 > .grid:nth-of-type(2n+1),

  203.   .medium-block-grid-3 > .grid:nth-of-type(3n+1),

  204.   .medium-block-grid-4 > .grid:nth-of-type(4n+1),

  205.   .medium-block-grid-5 > .grid:nth-of-type(5n+1),

  206.   .medium-block-grid-6 > .grid:nth-of-type(6n+1),

  207.   .medium-block-grid-7 > .grid:nth-of-type(7n+1),

  208.   .medium-block-grid-8 > .grid:nth-of-type(8n+1),

  209.   .medium-block-grid-9 > .grid:nth-of-type(9n+1),

  210.   .medium-block-grid-10 > .grid:nth-of-type(10n+1),

  211.   .medium-block-grid-11 > .grid:nth-of-type(11n+1),

  212.   .medium-block-grid-12 > .grid:nth-of-type(12n+1) {

  213.     clear: both;

  214.   }

  215. }

  216. 

  217. /** 1025px with 16px base font. */

  218. @media only screen and (min-width: 64.063em) {

  219.   .large-block-grid-1 > .grid {

  220.     width: 100%;

  221.   }

  222. 

  223.   .large-block-grid-2 > .grid {

  224.     width: 50%;

  225.   }

  226. 

  227.   .large-block-grid-3 > .grid {

  228.     width: 33.33333%;

  229.   }

  230. 

  231.   .large-block-grid-4 > .grid {

  232.     width: 25%;

  233.   }

  234. 

  235.   .large-block-grid-5 > .grid {

  236.     width: 20%;

  237.   }

  238. 

  239.   .large-block-grid-6 > .grid {

  240.     width: 16.66667%;

  241.   }

  242. 

  243.   .large-block-grid-7 > .grid {

  244.     width: 14.28571%;

  245.   }

  246. 

  247.   .large-block-grid-8 > .grid {

  248.     width: 12.5%;

  249.   }

  250. 

  251.   .large-block-grid-9 > .grid {

  252.     width: 11.11111%;

  253.   }

  254. 

  255.   .large-block-grid-10 > .grid {

  256.     width: 10%;

  257.   }

  258. 

  259.   .large-block-grid-11 > .grid {

  260.     width: 9.09091%;

  261.   }

  262. 

  263.   .large-block-grid-12 > .grid {

  264.     width: 8.33333%;

  265.   }

  266. 

  267.   .large-block-grid-1 > .grid:nth-of-type(1n),

  268.   .large-block-grid-2 > .grid:nth-of-type(1n),

  269.   .large-block-grid-3 > .grid:nth-of-type(1n),

  270.   .large-block-grid-4 > .grid:nth-of-type(1n),

  271.   .large-block-grid-5 > .grid:nth-of-type(1n),

  272.   .large-block-grid-6 > .grid:nth-of-type(1n),

  273.   .large-block-grid-7 > .grid:nth-of-type(1n),

  274.   .large-block-grid-8 > .grid:nth-of-type(1n),

  275.   .large-block-grid-9 > .grid:nth-of-type(1n),

  276.   .large-block-grid-10 > .grid:nth-of-type(1n),

  277.   .large-block-grid-11 > .grid:nth-of-type(1n),

  278.   .large-block-grid-12 > .grid:nth-of-type(1n) {

  279.     clear: none;

  280.   }

  281. 

  282.   .large-block-grid-1 > .grid:nth-of-type(1n+1),

  283.   .large-block-grid-2 > .grid:nth-of-type(2n+1),

  284.   .large-block-grid-3 > .grid:nth-of-type(3n+1),

  285.   .large-block-grid-4 > .grid:nth-of-type(4n+1),

  286.   .large-block-grid-5 > .grid:nth-of-type(5n+1),

  287.   .large-block-grid-6 > .grid:nth-of-type(6n+1),

  288.   .large-block-grid-7 > .grid:nth-of-type(7n+1),

  289.   .large-block-grid-8 > .grid:nth-of-type(8n+1),

  290.   .large-block-grid-9 > .grid:nth-of-type(9n+1),

  291.   .large-block-grid-10 > .grid:nth-of-type(10n+1),

  292.   .large-block-grid-11 > .grid:nth-of-type(11n+1),

  293.   .large-block-grid-12 > .grid:nth-of-type(12n+1) {

  294.     clear: both;

  295.   }

  296. }