Claudia Romano claudia-romano

## icons_02_icon-class-basic.scss
.icon {
  display: inline-block;
  color: var(--color-icon-primary);
  height: 1em;
  width: 1em;
  line-height: 1;
}

## icons_01_including-icons.html
<body>
  {% include "icons.svg" %}
  <svg class="icon"><use href="#icon-rugby" xlink:href="#icon-rugby"/></svg>
</body>

## layout_18_gridAuto-mixin-action.scss
.gallery-grid {
  @include grid;
  @include gridAuto(260px);
}

## 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>

## 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);
      }

## layout_15_gridAdvanced-mixin.scss
@mixin gridAdvanced($cols...) {
  @supports(grid-area: auto) {
    grid-template-columns: repeat($grid-columns, 1fr);

    $i: 1;
    @each $col in $cols {
      > :nth-of-type(#{$i}) {
        grid-column-start: nth($col,1);
        grid-column-end: nth($col,2);
        grid-row-start: nth($col,3);

## layout_14_gridAdvanced-mixin-action.scss
.grid {
  @include gridAdvanced(
    (1, 8, 1, 3), //item 1
    (1, 8, 3, 5), //item 2
    (5, -1, 2, 4) //item 3
  );
}

## 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) {

## 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);

## layout_11_gridLayout-mixin-action.scss
.grid {
  @include gridLayout(
    (7, 2), //item 1
    (5, 1), //item 2
    (5, 1), //item 3
    (12, 1) //item 4
  );
}
	.icon {
	display: inline-block;
	color: var(--color-icon-primary);
	height: 1em;
	width: 1em;
	line-height: 1;
	}
	<body>
	{% include "icons.svg" %}
	<svg class="icon"><use href="#icon-rugby" xlink:href="#icon-rugby"/></svg>
	</body>
	<ul class="flex-grid">
	<li class="col col--9">1</li>
	<li class="col col--3">2</li>
	</ul>
	@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);
	}
	@mixin gridAdvanced($cols...) {
	@supports(grid-area: auto) {
	grid-template-columns: repeat($grid-columns, 1fr);

	$i: 1;
	@each $col in $cols {
	> :nth-of-type(#{$i}) {
	grid-column-start: nth($col,1);
	grid-column-end: nth($col,2);
	grid-row-start: nth($col,3);
	.grid {
	@include gridAdvanced(
	(1, 8, 1, 3), //item 1
	(1, 8, 3, 5), //item 2
	(5, -1, 2, 4) //item 3
	);
	}
	@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) {
	.grid {
	@include gridLayout(
	(7, 2), //item 1
	(5, 1), //item 2
	(5, 1), //item 3
	(12, 1) //item 4
	);
	}