You are here

Home » API reference » Blazy 8.2

blazy.column.css in Blazy 8.2

Same filename and directory in other branches
  1. 8 css/components/blazy.column.css
  2. 7 css/components/blazy.column.css

Experimental: CSS3 multi-column.

column-count is the maximum number of columns and column-width is the minimum width for those columns. Gets consistent with Grid Foundation even if non-BEM classes. Note: The reason for making column-width somewhat flexible is to achieve scalable designs that can fit many screen sizes. To set an exact column width, the column gap and the width of the multicol element (assuming horizontal text) must also be specified.

File

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

  2.  * @file

  3.  * Experimental: CSS3 multi-column.

  4.  *

  5.  * column-count is the maximum number of columns and column-width is the minimum

  6.  * width for those columns.

  7.  * Gets consistent with Grid Foundation even if non-BEM classes.

  8.  * Note: The reason for making column-width somewhat flexible is to achieve

  9.  * scalable designs that can fit many screen sizes. To set an exact column

  10.  * width, the column gap and the width of the multicol element (assuming

  11.  * horizontal text) must also be specified.

  12.  */

  13. 

  14. .block-column,

  15. .blazy.block-column,

  16. .item-list > .block-column {

  17.   clear: both;

  18.   display: block;

  19.   list-style: none;

  20.   margin: 0 auto;

  21.   padding: 0;

  22.   width: 100%;

  23. }

  24. 

  25. /** https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside */

  26. .block-column > .grid {

  27.   display: block;

  28.   float: none;

  29.   height: auto;

  30.   overflow: hidden;

  31.   -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */

  32.   page-break-inside: avoid; /* Deprecated Firefox, works at 49.0.2 */

  33.   -moz-column-break-inside: avoid; /* Current Firefox, but no joy */

  34.   break-inside: avoid; /* IE 10+ */

  35.   break-inside: avoid-column;

  36. }

  37. 

  38. .block-column > .grid ,

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

  40.   margin: 0 0 1rem;

  41.   padding: 0;

  42. }

  43. 

  44. /** Fix for broken break-inside with extremely tall grid for FF. */

  45. .block-column .grid__content {

  46.   display: inline-block;

  47.   margin: 0;

  48.   max-width: 100%;

  49.   position: relative;

  50.   vertical-align: top;

  51.   width: 100%;

  52. }

  53. 

  54. /** 480px with 16px base font. */

  55. @media only screen and (min-width: 30em) {

  56.   .small-block-column-1 {

  57.     -webkit-columns: 30em 1;

  58.     -moz-columns: 30em 1;

  59.     columns: 30em 1;

  60.   }

  61. 

  62.   .small-block-column-2 {

  63.     -webkit-columns: 15em 2;

  64.     -moz-columns: 15em 2;

  65.     columns: 15em 2;

  66.   }

  67. }

  68. 

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

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

  71.   .medium-block-column-1 {

  72.     -webkit-columns: 40.063em 1;

  73.     -moz-columns: 40.063em 1;

  74.     columns: 40.063em 1;

  75.   }

  76. 

  77.   .medium-block-column-2 {

  78.     -webkit-columns: 20.0315em 2;

  79.     -moz-columns: 20.0315em 2;

  80.     columns: 20.0315em 2;

  81.   }

  82. 

  83.   .medium-block-column-3 {

  84.     -webkit-columns: 3 auto;

  85.     -moz-columns: 3 auto;

  86.     columns: 3 auto;

  87.   }

  88. 

  89.   .medium-block-column-4 {

  90.     -webkit-columns: 4 auto;

  91.     -moz-columns: 4 auto;

  92.     columns: 4 auto;

  93.   }

  94. 

  95.   .medium-block-column-5 {

  96.     -webkit-columns: 5 auto;

  97.     -moz-columns: 5 auto;

  98.     columns: 5 auto;

  99.   }

  100. 

  101.   .medium-block-column-6 {

  102.     -webkit-columns: 6 auto;

  103.     -moz-columns: 6 auto;

  104.     columns: 6 auto;

  105.   }

  106. 

  107.   .medium-block-column-7 {

  108.     -webkit-columns: 7 auto;

  109.     -moz-columns: 7 auto;

  110.     columns: 7 auto;

  111.   }

  112. 

  113.   .medium-block-column-8 {

  114.     -webkit-columns: 8 auto;

  115.     -moz-columns: 8 auto;

  116.     columns: 8 auto;

  117.   }

  118. 

  119.   .medium-block-column-9 {

  120.     -webkit-columns: 9 auto;

  121.     -moz-columns: 9 auto;

  122.     columns: 9 auto;

  123.   }

  124. 

  125.   .medium-block-column-10 {

  126.     -webkit-columns: 10 auto;

  127.     -moz-columns: 10 auto;

  128.     columns: 10 auto;

  129.   }

  130. 

  131.   .medium-block-column-11 {

  132.     -webkit-columns: 11 auto;

  133.     -moz-columns: 11 auto;

  134.     columns: 11 auto;

  135.   }

  136. 

  137.   .medium-block-column-12 {

  138.     -webkit-columns: 12 auto;

  139.     -moz-columns: 12 auto;

  140.     columns: 12 auto;

  141.   }

  142. }

  143. 

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

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

  146.   .large-block-column-1 {

  147.     -webkit-columns: 64.063em 1;

  148.     -moz-columns: 64.063em 1;

  149.     columns: 64.063em 1;

  150.   }

  151. 

  152.   .large-block-column-2 {

  153.     -webkit-columns: 2 auto;

  154.     -moz-columns: 2 auto;

  155.     columns: 2 auto;

  156.   }

  157. 

  158.   .large-block-column-3.block-count-2,

  159.   .large-block-column-4.block-count-2 {

  160.     -webkit-columns: 32.0315em 2;

  161.     -moz-columns: 32.0315em 2;

  162.     columns: 32.0315em 2;

  163.   }

  164. 

  165.   .large-block-column-3,

  166.   .large-block-column-4.block-count-3 {

  167.     -webkit-columns: 3 auto;

  168.     -moz-columns: 3 auto;

  169.     columns: 3 auto;

  170.   }

  171. 

  172.   .large-block-column-4 {

  173.     -webkit-columns: 4 auto;

  174.     -moz-columns: 4 auto;

  175.     columns: 4 auto;

  176.   }

  177. 

  178.   .large-block-column-5 {

  179.     -webkit-columns: 5 auto;

  180.     -moz-columns: 5 auto;

  181.     columns: 5 auto;

  182.   }

  183. 

  184.   .large-block-column-6 {

  185.     -webkit-columns: 6 auto;

  186.     -moz-columns: 6 auto;

  187.     columns: 6 auto;

  188.   }

  189. 

  190.   .large-block-column-7 {

  191.     -webkit-columns: 7 auto;

  192.     -moz-columns: 7 auto;

  193.     columns: 7 auto;

  194.   }

  195. 

  196.   .large-block-column-8 {

  197.     -webkit-columns: 8 auto;

  198.     -moz-columns: 8 auto;

  199.     columns: 8 auto;

  200.   }

  201. 

  202.   .large-block-column-9 {

  203.     -webkit-columns: 9 auto;

  204.     -moz-columns: 9 auto;

  205.     columns: 9 auto;

  206.   }

  207. 

  208.   .large-block-column-10 {

  209.     -webkit-columns: 10 auto;

  210.     -moz-columns: 10 auto;

  211.     columns: 10 auto;

  212.   }

  213. 

  214.   .large-block-column-11 {

  215.     -webkit-columns: 11 auto;

  216.     -moz-columns: 11 auto;

  217.     columns: 11 auto;

  218.   }

  219. 

  220.   .large-block-column-12 {

  221.     -webkit-columns: 12 auto;

  222.     -moz-columns: 12 auto;

  223.     columns: 12 auto;

  224.   }

  225. }