You are here

Home » API reference » Blazy 8.2

blazy.grid.css in Blazy 8.2

Same filename and directory in other branches
  1. 8 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. .block-grid,

  10. .blazy.block-grid,

  11. .item-list > .block-grid {

  12.   clear: both;

  13.   display: block;

  14.   list-style: none;

  15.   padding: 0;

  16.   margin: 0 -0.625rem;

  17. }

  18. 

  19. .block-grid::before,

  20. .block-grid::after {

  21.   content: " ";

  22.   display: table;

  23. }

  24. 

  25. .block-grid::after {

  26.   clear: both;

  27. }

  28. 

  29. .block-grid > .grid {

  30.   display: block;

  31.   float: left;

  32.   height: auto;

  33.   list-style: none;

  34.   margin: 0;

  35.   padding: 0 0.625rem 1.25rem;

  36. }

  37. 

  38. .block-grid.block-grid--centered,

  39. .item-list > .block-grid.block-grid--centered {

  40.   text-align: center;

  41. }

  42. 

  43. .block-grid.block-grid--centered > .grid,

  44. .item-list > .block-grid.block-grid--centered > .grid {

  45.   text-align: left;

  46.   display: inline-block;

  47.   float: none;

  48.   vertical-align: top;

  49. }

  50. 

  51. .block-grid .grid__content {

  52.   position: relative;

  53. }

  54. 

  55. @media only screen {

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

  57.     width: 100%;

  58.   }

  59. 

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

  61.     width: 50%;

  62.   }

  63. 

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

  65.     width: 33.33333%;

  66.   }

  67. 

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

  69.     width: 25%;

  70.   }

  71. 

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

  73.     width: 20%;

  74.   }

  75. 

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

  77.     width: 16.66667%;

  78.   }

  79. 

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

  81.     width: 14.28571%;

  82.   }

  83. 

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

  85.     width: 12.5%;

  86.   }

  87. 

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

  89.     width: 11.11111%;

  90.   }

  91. 

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

  93.     width: 10%;

  94.   }

  95. 

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

  97.     width: 9.09091%;

  98.   }

  99. 

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

  101.     width: 8.33333%;

  102.   }

  103. 

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

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

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

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

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

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

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

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

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

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

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

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

  116.     clear: none;

  117.   }

  118. 

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

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

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

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

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

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

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

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

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

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

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

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

  131.     clear: both;

  132.   }

  133. }

  134. 

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

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

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

  138.     width: 100%;

  139.   }

  140. 

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

  142.     width: 50%;

  143.   }

  144. 

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

  146.     width: 33.33333%;

  147.   }

  148. 

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

  150.     width: 25%;

  151.   }

  152. 

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

  154.     width: 20%;

  155.   }

  156. 

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

  158.     width: 16.66667%;

  159.   }

  160. 

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

  162.     width: 14.28571%;

  163.   }

  164. 

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

  166.     width: 12.5%;

  167.   }

  168. 

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

  170.     width: 11.11111%;

  171.   }

  172. 

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

  174.     width: 10%;

  175.   }

  176. 

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

  178.     width: 9.09091%;

  179.   }

  180. 

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

  182.     width: 8.33333%;

  183.   }

  184. 

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

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

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

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

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

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

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

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

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

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

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

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

  197.     clear: none;

  198.   }

  199. 

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

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

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

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

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

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

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

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

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

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

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

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

  212.     clear: both;

  213.   }

  214. }

  215. 

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

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

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

  219.     width: 100%;

  220.   }

  221. 

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

  223.     width: 50%;

  224.   }

  225. 

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

  227.     width: 33.33333%;

  228.   }

  229. 

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

  231.     width: 25%;

  232.   }

  233. 

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

  235.     width: 20%;

  236.   }

  237. 

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

  239.     width: 16.66667%;

  240.   }

  241. 

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

  243.     width: 14.28571%;

  244.   }

  245. 

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

  247.     width: 12.5%;

  248.   }

  249. 

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

  251.     width: 11.11111%;

  252.   }

  253. 

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

  255.     width: 10%;

  256.   }

  257. 

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

  259.     width: 9.09091%;

  260.   }

  261. 

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

  263.     width: 8.33333%;

  264.   }

  265. 

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

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

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

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

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

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

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

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

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

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

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

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

  278.     clear: none;

  279.   }

  280. 

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

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

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

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

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

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

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

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

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

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

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

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

  293.     clear: both;

  294.   }

  295. }