Skip to content

Instantly share code, notes, and snippets.

Avatar

Claudia Romano claudia-romano

View GitHub Profile
View layout_06_flex-grid.scss
.flex-grid {
display: flex;
flex-wrap: wrap;
margin: calc(var(--grid-gap) * -1) 0 0 calc(var(--grid-gap) * -1);
}
View layout_08_flex-util-classes.scss
$grid-columns: 12;
@for $i from 1 through $grid-columns {
.col--#{$i} {
flex-basis: round-width($i);
max-width: round-width($i);
}
}
View layout_09_round-width.scss
@function round-width ($i) {
$width : floor(100 * $i * 100/ $grid-columns) / 100;
@return $width#{"%"};
}
View layout_10_flex-util-classes-mq.scss
@media only screen and (min-width: 600px) {
@for $i from 1 through $grid-columns {
.col--md-#{$i} {
flex-basis: round-width($i);
max-width: round-width($i);
}
}
}
View layout_12_gridLayout-mixin.scss
@mixin gridLayout($cols...) {
@supports(grid-area: auto) {
grid-template-columns: repeat($grid-columns, 1fr);
$i: 1;
@each $col in $cols {
> :nth-of-type(#{$i}) {
grid-column-end: span nth($col,1);
@if length($col) > 1 {
grid-row-end: span nth($col,2);
View layout_13_gridLayout-mixin-fallback.scss
@mixin gridLayout($cols...) {
$i: 1;
@each $col in $cols {
> :nth-of-type(#{$i}) {
width: calc( #{round-width(nth($col,1))} - #{$gap-horizontal});
}
$i: $i + 1;
}
@supports(grid-area: auto) {
View layout_16_gridAdvanced-mixin-fallback.scss
@mixin gridAdvanced($cols...) {
$i: 1;
$span: 0;
@each $col in $cols {
> :nth-of-type(#{$i}) {
@if nth($col,2) == -1 {
$span: $grid-columns - nth($col,2) - nth($col,1);
} @else {
$span: nth($col,2) - nth($col,1);
}
View layout_07_flex-col.scss
.col {
padding: calc(var(--grid-gap)) 0 0 calc(var(--grid-gap));
background-clip: content-box;
flex-basis: 100%;
}
View layout_17_flex-class-action.html
<ul class="flex-grid">
<li class="col col--9">1</li>
<li class="col col--3">2</li>
</ul>