Ridiculously simple, incredibly powerful grid system
Grid system is based on flex layout and implemented as SASS/SCSS mixin
ENORMOUSLY!
Imagine, there is single mixin that allows you to do complex layouts with any number of columns of arbitrary size with different number of columns on each row. This is just a single line of code!
Absolutely
Oh well)
Some markup:
<div class="my-flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
A bit of SCSS:
.my-flex-container {
@include flexy-plexy(1em, 1 2 3, 1 1 1, 1, 2 2);
@media (max-width: 1000px) {
@include flexy-plexy(2em, 1 2, 1);
}
@media (max-width: 500px) {
@include flexy-plexy(2em, 1 1, 1);
}
border : 1px solid red;
> * {
border : 1px solid blue;
}
}
First, we've created general grid:
1em
1:2:3
, namely, first column will be 1/3 of last and twice as small as second2 2
is basically the same as 1 1
, columns are calculated relatively to each other)Second, we've created responsive grid for at most 1000px
:
2em
1:2
100%
Third - yes, responsive grid for at most 500px
width:
2em
50%
width100%
And the last - borders so that you can see how it works visually.
Well, you should already know how to use it, but here are some rules:
3 7
means that first column will have 30%
width and second 70%
, ratio 3:7
We love Web Components:) So <template>
elements will not cause any issues if you use Polymer's dom-if
or dom-repeat
.
In fact, first argument may contain not only gutter.
Usually Flexy-plexy generates CSS that uses nth-of-type
selector, which means that you can use it with <template>
, <style>
and <script>
elements inside without breaking markup.
However, this also means that you can use only one type of elements, namely, only <div>
or only <article>
, which is not always convenient.
For some cases you may want to use nth-child
instead, just pass child
keyword alongside with gutter:
@include flexy-plexy(1em child, 1, 1 3 1, 1);
Well, setting width to 0 allows you to hide column completely:
@include flexy-plexy(1em, 1 2 0 3, 2 2 2, 1, 2 2);
Third column in example above will be hidden completely and will not affect layout in any way.
MIT, see license.txt