Skip to content

Instantly share code, notes, and snippets.

@mistergraphx

mistergraphx/input.scss

Created March 1, 2023 13:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mistergraphx/d4caf1e25e6e47c69d619d0b742e1139 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mistergraphx/d4caf1e25e6e47c69d619d0b742e1139 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mistergraphx created this gist Mar 1, 2023.
    315 changes: 315 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,315 @@
    // SETTINGS
    $tiny-small: 360px !default;
    $tiny-medium: 480px !default;
    $tiny: 673px !default; // or 'em' if you prefer, of course
    $small: 768px !default;
    $medium: 1024px !default;
    $large: 1200px !default;
    $extra-large: 1350px !default;

    // Colors
    $grey3: grey;

    // Additionnal "utility" breakpoints aliases
    // ex. @include respond-to("medium-up") {...}
    $bp-aliases: (
    'tiny-small' : (max-width: #{$tiny-small - 1}),
    'tiny-medium' : (max-width: #{$tiny-medium - 1}),
    'tiny' : (max-width: #{$tiny - 1}),
    'small' : (max-width: #{$small - 1}),
    'medium' : (max-width: #{$medium - 1}),
    'large' : (max-width: #{$large - 1}),
    'extra-large' : (max-width: #{$extra-large - 1}),
    'tiny-small-up' : (min-width: #{$tiny-small}),
    'tiny-medium-up' : (min-width: #{$tiny-medium}),
    'tiny-up' : (min-width: #{$tiny}),
    'small-up' : (min-width: #{$small}),
    'medium-up' : (min-width: #{$medium}),
    'large-up' : (min-width: #{$large}),
    'extra-large-up' : (min-width: #{$extra-large}),
    'retina' : (min-resolution: 2dppx)
    );

    // MIXINS

    // Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
    @mixin respond-to($name) {
    // If the key exists in the map
    @if map-has-key($bp-aliases, $name) {
    // Prints a media query based on the value
    @media #{inspect(map-get($bp-aliases, $name))} {
    @content;
    }
    }

    // If the key doesn't exist in the map
    @else {
    @warn "Unfortunately, no value could be retrieved from `#{$name}`. "
    + "Please make sure it is defined in `$bp-aliases` map.";
    }
    }
    /// Compute the maximum depth of a map
    /// @param {Map} $map
    /// @return {Number} max depth of `$map`

    @function depth($map) {
    $level: 1;

    @each $key, $value in $map {
    @if type-of($value) == "map" {
    $level: max(depth($value) + 1, $level);
    }
    }

    @return $level;
    }

    @mixin debug-map($map) {
    @at-root {
    @debug-map {
    __toString__: inspect($map);
    __length__: length($map);
    __depth__: depth($map);
    __keys__: if(type-of($map) == 'map',map-keys($map), type-of($map));
    __properties__ {
    @each $key, $value in $map {
    #{'(' + type-of($value) + ') ' + $key}: inspect($value);
    }
    }
    }
    }
    }

    // Spacings
    $spacer-tiny: 0.5rem !default;
    $spacer-tiny-plus: 0.7rem !default;
    $spacer-small: 1rem !default;
    $spacer-small-plus: 1.5rem !default;
    $spacer-medium: 2rem !default;
    $spacer-medium-plus: 3rem !default;
    $spacer-large: 4rem !default;
    $spacer-large-plus: 6rem !default;
    $spacer-extra-large: 8rem !default;
    $spacer-extra-large-plus: 12rem !default;
    $spacer-ultra-large: 16rem !default;
    $spacer-ultra-large-plus: 20rem !default;

    $spacers:(
    0: 0,
    auto: auto,
    't': $spacer-tiny,
    'tp': $spacer-tiny-plus,
    's': $spacer-small,
    'sp': $spacer-small-plus,
    'm': $spacer-medium,
    'mp': $spacer-medium-plus,
    'l': $spacer-large,
    'lp': $spacer-large-plus,
    'el': $spacer-extra-large,
    'elp': $spacer-extra-large-plus
    );

    $utilities: (
    "flex-wrap": (
    class: flex,
    property: flex-wrap,
    values: wrap nowrap,
    important: true,
    responsive: true,
    ),
    "flex-direction": (
    class: flex,
    property: flex-direction,
    values: row column row-reverse column-reverse,
    important: true,
    responsive: true
    ),
    "marginx": (
    class: mx,
    property: margin-left margin-right,
    values: auto,
    important: true,
    responsive: true
    ),
    "marginy": (
    class: my,
    property: margin-top margin-bottom,
    values: auto,
    important: true,
    responsive: true
    ),
    "marginl": (
    class: ml,
    property: margin-left,
    values: $spacers,
    important: true,
    responsive: true
    )
    );

    @mixin generate-utilities($utility,$infix){
    $values: map-get($utility, values);
    // If the values are a list or string, convert it into a map
    @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
    $values: zip($values, $values);
    }
    //@include debug-map($values);
    @each $key,$value in $values{
    $properties: map-get($utility, property);

    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
    @if type-of($properties) == "string" {
    $properties: append((), $properties);
    }
    // Use custom class if present
    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
    $property-class: if($property-class == null, "", $property-class);

    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
    // Don't prefix if value key is null (eg. with shadow class)
    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");

    @if $value != null {
    .#{$property-class + $infix + $property-class-modifier} {
    @each $property in $properties {
    #{$property}: $value if(map-get($utility, important) == true, !important,null);
    }
    }
    }

    }
    }

    // OUTPUT

    // @each $key,$utility in $utilities{
    // $infix : "";
    // @include generate-utilities($utility,$infix);
    // }

    // @each $breakpoint in ['small','small-up']{
    // @include respond-to(#{$breakpoint}){
    // $infix : '-' + $breakpoint;
    // @each $key,$utility in $utilities{
    // // The utility can be disabled with `false`, thus check if the utility is a map first
    // // Only proceed if responsive media queries are enabled or if it's the base media query
    // @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
    // @include generate-utilities($utility, $infix);
    // }
    // }
    // }

    // }

    // $flex-utilities: (
    // 'wrap': ('wrap','nowrap'),
    // 'direction': ('row','row-reverse','column','column-reverse')
    // );

    // @each $bp in 'small','small-up'{
    // @include respond-to($bp){
    // @each $propertie,$values in $flex-utilities{
    // @each $value in $values{
    // .flex-#{$bp}-#{$value}{
    // flex-#{$propertie}: #{$value};
    // }
    // }
    // }
    // }
    // }


    /**
    * font-face mixin
    *
    */
    @mixin font-face($name,$path,$weight: null,$style: null,$exts: eot woff2 woff ttf,$local: null) {
    $src: null;

    $extmods: (
    eot: "?"
    );

    $formats: (
    otf: "opentype",
    ttf: "truetype"
    );

    @each $ext in $exts {
    $extmod: if(
    map-has-key($extmods, $ext),
    $ext + map-get($extmods, $ext),
    $ext
    );
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append(
    $src,
    url(quote($path + "." + $extmod)) format(quote($format)),
    comma
    );
    }

    @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    font-display: swap;
    $src
    @if $local{
    src: local($local);
    }
    @else{
    src: local($name), $src;
    }

    @content;
    }
    }

    @include font-face('ff NewsreaderDisplayBold',null,$weight: 700){
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
    };


    html{
    font-size: 62.5%;
    box-sizing: border-box;
    }

    .container{
    max-width: 96rem;
    margin: 0 auto;
    }

    .headline{
    font-size: 3rem;
    }

    $utilities: (
    "marginx": (
    class: mx,
    property: margin-left margin-right,
    values: auto,
    important: true
    ),
    "marginy": (
    class: my,
    property: margin-top margin-bottom,
    values: auto,
    important: true
    ),
    "marginl": (
    class: ml,
    property: margin-left,
    values: $spacers,
    important: true
    )
    );

    @each $key,$utility in $utilities{
    $infix : "";
    @include generate-utilities($utility,$infix);
    }

    33 changes: 33 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    /**
    * font-face mixin
    *
    */
    @font-face {
    font-family: "NewsreaderDisplayBold";
    font-weight: 700;
    src: local("NewsreaderDisplayBold"), url("path/to/newsreaderFont.eot?") format("eot"), url("path/to/newsreaderFont.woff2") format("woff2"), url("path/to/newsreaderFont.woff") format("woff"), url("path/to/newsreaderFont.ttf") format("truetype");
    font-display: swap;
    }
    @font-face {
    font-family: "ff NewsreaderDisplayBold";
    font-weight: 700;
    src: local("Georgia");
    /* Overides */
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
    }
    html {
    font-size: 62.5%;
    box-sizing: border-box;
    font-family: NewsreaderDisplayBold, "ff NewsreaderDisplayBold";
    }

    .container {
    max-width: 96rem;
    margin: 0 auto;
    }

    .headline {
    font-size: 3rem;
    }
    9 changes: 9 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }