Smolcss
Sun Mar 05 2023 00:07:20 GMT+0000 (Coordinated Universal Time)
Saved by @wander031180 #scss
$columns: 12!default; $min: 10ch; $gap: 1rem; $maxwidth: 1200px!default; $breakpoints: ( small: 40em, medium: 65em ); $colors: ( primary: ( // blue 300: 216 87% 60%, 400: 216 87% 40%, 500: 216 87% 20%, ), secondary: ( // purple 300: 277 50% 60%, 400: 277 50% 40%, 500: 277 50% 20%, ), accent: ( // red 300: 358 72% 70%, 400: 358 72% 53%, 500: 358 72% 30%, ), neutral: ( 100: 0 0% 100%, 200: 0 0% 87%, 300: 0 0% 80%, 400: 0 0% 70%, 500: 0 0% 60%, 600: 0 0% 50%, 700: 0 0% 40%, 800: 0 0% 30%, 900: 0 0% 15%, ) ); $type-scale: ( small:( // Minor third 300: 1rem, 400: 1.125rem, 500: 1.563rem, 600: 1.953rem, 700: 2.441rem, 800: 3.052rem ), big:( // Augmented fourth 300: 1rem, 400: 1.25rem, 500: 2rem, 600: 2.827rem, 700: 4rem, 800: 5.653rem ) ); @mixin mq($key) { $size: map-get($breakpoints, $key); @media only screen and (min-width: $size) { @content; } } @each $color, $shade in $colors { @each $prop, $value in $shade { .text-#{$color}-#{$prop} { color: var(--clr-#{$color}-#{$prop}) !important; } .bg-#{$color}-#{$prop} { background-color: var(--clr-#{$color}-#{$prop}) !important; } } } :root { --section-spacing: 3.5rem; @include mq(medium) { --section-spacing: 7rem; } @each $color, $shade in $colors { @each $prop, $value in $shade { --clr-#{$color}-#{$prop}: #{$value}; } } @each $screen-size, $property in $type-scale { @if $screen-size == small { @each $prop, $value in $property { --fs-#{$prop}: #{$value}; } } @else { @include mq(small) { @each $prop, $value in $property { --fs-#{$prop}: #{$value}; } } } } --min: #{$min}; --gap: #{$gap}; } @mixin border($width, $style, $color) { border: { width: $width; style: $style; color: $color; } } @mixin shadow($h, $v, $b, $s, $color) { box-shadow: $h, $v, $b, $s, $color; } .border{ @include border(1px, solid, gray); @include shadow(0px, 0px, 16px, 0px, rgba(0, 0, 0, 0.5)); } $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } @function sizes($i){ @return ($i * 100% / $columns); } .sidebar { width: sizes(3); } ///////// GRID ///////// .container{ width: min(100% - 2rem, 1200px); margin-inline: auto; } .row{ display: flex; flex-wrap: wrap; gap: var(--gap); list-style: none; padding: 0; & > * { flex: 1 1 var(--min); @media screen and (max-width: 40em) { & {flex: 0 1 100%; max-width: 100%; } } } } [class*="col-"] { flex: 1 1 #{$min}; display: inline-flex; } @for $i from 1 through $columns { .col-#{$i} { flex: 0 0 ($i * 100% / $columns); max-width: ($i * 100% / $columns); } } // Inicio del sistema de columnas con breakpoint @each $size, $screen-size in $breakpoints { @media all and (min-width: $screen-size) { @for $i from 1 through $columns { .col-#{$size}-#{$i*1} { flex: 0 0 ($i * 100% / $columns); max-width: ($i * 100% / $columns); } } } }
Comments