colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
78 lines (72 loc) • 2.16 kB
text/stylus
// List
//
// Colette provides the possibility to create a list of items, with the adequate gutters.
// You'll be able to set the number of columns you need, also, the responsive aspect can be managed
//
// `.list` should be in a `overflow: hidden` block to avoid overflow margin
//
// **Usage**
// List should have the adequate class `list`
//
// <table class="co_table mb2">
// <thead>
// <tr>
// <th>Breakpoint</th>
// <td></td>
// <th>sm</th>
// <th>md</th>
// <th>lg</th>
// </tr>
// </thead>
// <tbody>
// <tr>
// <td>Media query</td>
// <td align="center">default</td>
// <td align="center">min-width: 420px</td>
// <td align="center">min-width: 768px</td>
// <td align="center">min-width: 960px</td>
// </tr>
// <tr>
// <td>Class name</td>
// <td align="center">.list-by[n]</td>
// <td align="center">.list-sm-by[n]</td>
// <td align="center">.list-md-by[n]</td>
// <td align="center">.list-lg-by[n]</td>
// </tr>
// <tr>
// <td>CSS declaration</td>
// <td colspan="4" align="center">{ width: ([n] / 12) * 100 }</td>
// </tr>
// </tbody>
// </table>
//
// Markup: list.twig
//
// Styleguide: Layout.List
columnGap = _gutters(2) // horizontal margin between content previews / columns
.list
_ml(-1)
_mr(-1)
display flex
flex-direction row
flex-wrap wrap
align-items stretch
justify-content flex-start
&-item // .list-item could be a .preview
_m(0 1 2 1)
width s('calc(100% - %s)', columnGap)
// override _teaser styles
.teaser-title
font-size 1.3125em
// Modifier number of items by row
for i in (1..$list-columns)
&-by{i} .list-item
width s('calc(100% / %s - %s)', i, columnGap)
// Modifier number of items by row and by MQ
for breakpoint, query in $breakpoints
query
for i in (1..$list-columns)
&-{breakpoint}-by{i} .list-item
_ml(1)
_mr(1)
width s('calc(100% / %s - %s)', i, columnGap)