Skip to content

Instantly share code, notes, and snippets.

@mistergraphx

mistergraphx/input.scss

Last active December 15, 2022 17:31
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. mistergraphx revised this gist Dec 15, 2022. No changes.
  2. mistergraphx created this gist Dec 15, 2022.
    212 changes: 212 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,212 @@
    // 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.";
    }
    }


    // OUTPUT

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

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

    //border: 1px solid red;
    }

    .headline{
    font-size: 3rem;
    }


    $lined-border-default: 1px solid black !default;
    .lined{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    &:after,
    &:before{
    content:'';
    display: block;
    height: 1px;
    width: auto;
    border-bottom: $lined-border-default;
    }
    }
    .lined.lined--right:after,
    .lined.lined--left:before{
    flex-grow: 1;
    }
    .lined[class$=--right]{
    &:after{
    margin-left: 2rem;
    }
    }
    .lined[class$=--left]{
    &:before{
    margin-right: 2rem;
    }
    }

    /* RESPONSIVE LINED */
    @each $bp in 'small-up','medium-up'{
    @include respond-to($bp){
    .lined.lined-#{$bp}--right::after,
    .lined.lined-#{$bp}--left::before{
    flex-grow: 1;
    }
    }
    }




    /**
    * Borders
    *
    * .border - border all
    * .border-top -
    * .border-bottom
    * .border-[small-up|medium-up]-[top|bottom]
    *
    */
    $border-color-default: $grey3 !default;
    $border-width-default: 1px !default;

    $border-color-default: #E5E5E5;
    .border{
    border: $border-width-default solid $border-color-default;
    &-bottom{
    border-bottom: $border-width-default solid $border-color-default;
    }
    &-top{
    border-top: $border-width-default solid $border-color-default;
    }
    }
    @each $bp in 'small-up','medium-up'{
    @include respond-to($bp){
    .border-#{$bp}{
    border: $border-width-default solid $border-color-default;
    }
    @each $direction in 'top','bottom'{
    .border-#{$bp}-#{$direction}{
    border-#{$direction}: $border-width-default solid $border-color-default;
    }
    }
    }
    }

    /* flex responsive utilities */

    $utilities: (
    'flex-wrap': (
    'prefix': 'flex',
    'propertie': 'flex-wrap',
    'values': wrap nowrap,
    'important': true,
    'responsive': true
    ),
    'flex-direction': (
    'prefix': 'flex',
    'propertie': 'flex-direction',
    'values': row column,
    'important': true,
    'responsive': true
    ),
    'justify-content': (
    'prefix': 'justify-content',
    'propertie': 'justify-content',
    'values': (
    'between':'space-between',
    'around': 'space-around'
    ),
    'important': true,
    'responsive': true
    ),
    );

    @each $utility,$options in $utilities{
    $prefix: if(map-get($options,'prefix'),map-get($options,'prefix')+'-','');
    $propertie: map-get($options,'propertie');
    $important: if(map-get($options,'important'),'!important',null);

    @if type-of(map-get($options,'values')) == 'map'{
    @each $shorthand, $value in map-get($options,'values') {
    .#{$prefix}#{$shorthand}{
    #{$propertie}: #{$value} #{$important};
    }
    }
    }@else{
    @each $values in map-get($options,'values'){
    @each $value in $values{
    .#{$prefix}#{$value}{
    #{$propertie}: #{$value} #{$important};
    }
    }
    }
    }


    @if map-get($options,'responsive') == true{
    @each $bp in 'small','small-up'{
    @include respond-to($bp){
    @each $value in map-get($options,'values'){
    .#{$prefix}#{$bp}-#{$value}{
    #{$propertie}: #{$value} #{$important};
    }
    }
    }
    }
    }
    }
    178 changes: 178 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,178 @@
    html {
    font-size: 62.5%;
    box-sizing: border-box;
    }

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

    .headline {
    font-size: 3rem;
    }

    .lined {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    }
    .lined:after, .lined:before {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    border-bottom: 1px solid black;
    }

    .lined.lined--right:after,
    .lined.lined--left:before {
    flex-grow: 1;
    }

    .lined[class$="--right"]:after {
    margin-left: 2rem;
    }

    .lined[class$="--left"]:before {
    margin-right: 2rem;
    }

    /* RESPONSIVE LINED */
    @media (min-width: 768px) {
    .lined.lined-small-up--right::after,
    .lined.lined-small-up--left::before {
    flex-grow: 1;
    }
    }
    @media (min-width: 1024px) {
    .lined.lined-medium-up--right::after,
    .lined.lined-medium-up--left::before {
    flex-grow: 1;
    }
    }
    /**
    * Borders
    *
    * .border - border all
    * .border-top -
    * .border-bottom
    * .border-[small-up|medium-up]-[top|bottom]
    *
    */
    .border {
    border: 1px solid #E5E5E5;
    }
    .border-bottom {
    border-bottom: 1px solid #E5E5E5;
    }
    .border-top {
    border-top: 1px solid #E5E5E5;
    }

    @media (min-width: 768px) {
    .border-small-up {
    border: 1px solid #E5E5E5;
    }

    .border-small-up-top {
    border-top: 1px solid #E5E5E5;
    }

    .border-small-up-bottom {
    border-bottom: 1px solid #E5E5E5;
    }
    }
    @media (min-width: 1024px) {
    .border-medium-up {
    border: 1px solid #E5E5E5;
    }

    .border-medium-up-top {
    border-top: 1px solid #E5E5E5;
    }

    .border-medium-up-bottom {
    border-bottom: 1px solid #E5E5E5;
    }
    }
    /* flex responsive utilities */
    .flex-wrap {
    flex-wrap: wrap !important;
    }

    .flex-nowrap {
    flex-wrap: nowrap !important;
    }

    @media (max-width: 767px) {
    .flex-small-wrap {
    flex-wrap: wrap !important;
    }

    .flex-small-nowrap {
    flex-wrap: nowrap !important;
    }
    }
    @media (min-width: 768px) {
    .flex-small-up-wrap {
    flex-wrap: wrap !important;
    }

    .flex-small-up-nowrap {
    flex-wrap: nowrap !important;
    }
    }
    .flex-row {
    flex-direction: row !important;
    }

    .flex-column {
    flex-direction: column !important;
    }

    @media (max-width: 767px) {
    .flex-small-row {
    flex-direction: row !important;
    }

    .flex-small-column {
    flex-direction: column !important;
    }
    }
    @media (min-width: 768px) {
    .flex-small-up-row {
    flex-direction: row !important;
    }

    .flex-small-up-column {
    flex-direction: column !important;
    }
    }
    .justify-content-between {
    justify-content: space-between !important;
    }

    .justify-content-around {
    justify-content: space-around !important;
    }

    @media (max-width: 767px) {
    .justify-content-small-between space-between {
    justify-content: between space-between !important;
    }

    .justify-content-small-around space-around {
    justify-content: around space-around !important;
    }
    }
    @media (min-width: 768px) {
    .justify-content-small-up-between space-between {
    justify-content: between space-between !important;
    }

    .justify-content-small-up-around space-around {
    justify-content: around space-around !important;
    }
    }
    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
    }