Skip to content

Instantly share code, notes, and snippets.

@GiselaMD
Last active March 2, 2022 17:30
Show Gist options
  • Save GiselaMD/4a32ae9c2cfc6094a0eacf43b6c5261b to your computer and use it in GitHub Desktop.
Save GiselaMD/4a32ae9c2cfc6094a0eacf43b6c5261b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;
$base-font-family: 'din-2014', Arial, sans-serif;
$fallback-font-family: Arial, sans-serif;
// --- Colors ---
$colors: (
primary: (
enterpriseGreen: #169a5a,
black: #181918,
white: #ffffff
),
secondary: (
orange: #ce810d,
darkGreen: #006639,
midGreen: #127f4a,
calendarGreen: #6fc099,
backgroundGray: #f3f3f3,
lightGray: #c3c3c3,
midGray: #656565,
darkGray: #393a3b
),
tertiary: (
yellow: #f7d727,
red: #e10300,
blue: #a4ceff
),
tiers: (
gold-tier: #cfb67f,
platinum-tier: #272727,
silver-tier: #757575
)
);
/**
* @returns hex color value from colors defined in '_settings.colors.scss'
*/
@function color($color-group: primary, $color-name: enterpriseGreen) {
$colors: map-get($colors, $color-group);
@return map-get($colors, $color-name);
}
/**
There are 4 ways the designed styles are generated, and can be used.
1. Element level styles are automatically generated.
2. Class based. But I prefer to not use these everywhere, they dirty up the structure.
.heading-01 through .heading-06 are automatically generated based on the maps above and change based on breakpoint.
3. Placeholder extensions. These combine all the places used and generate one rule.
%heading-01 through %heading-06 are automatically generated and used with @extend. This includes all breakpoints.
.test {
@extend %heading-02;
}
4. A utility mixin can be used to specify styles more exactly but still use the mapping.
.test-2 {
@include get-style(heading, 06);
or if you just want the mobile or desktop version of these styles:
@include get-style(heading, 06, mobile);
@include get-style(heading, 06, desktop);
}
.eyebrow {
@include get-style(eyebrow, 01);
}
*/
$heading: (
// name element font-size weight line-height letter-spacing text-transform
mobile:
(
heading-01 h1 26px 800 1.23 0.15px capitalize color(primary, black),
heading-02 h2 21px 800 1.19 -0.25px capitalize color(primary, black),
heading-03 h3 18px 700 1.33 -0.25px capitalize color(primary, black),
heading-04 h4 21px 400 1.19 -0.25px capitalize color(primary, black),
heading-05 h5 14px 700 1.29 0px capitalize color(primary, black),
heading-06 h6 14px 700 1.29 0px uppercase color(primary, black)
),
desktop: (
heading-01 h1 36px 800 1.11 0.5px capitalize color(primary, black),
heading-02 h2 26px 800 1.23 0.15px capitalize color(primary, black),
heading-03 h3 21px 700 1.19 -0.25px capitalize color(primary, black),
heading-04 h4 21px 400 1.19 -0.25px capitalize color(primary, black),
heading-05 h5 14px 700 1.29 0px capitalize color(primary, black),
heading-06 h6 14px 700 1.29 0px uppercase color(primary, black)
)
);
$body: (
// name element font-size weight line-height letter-spacing text-transform color
default:
(
body-01 null 18px 400 1.33 -0.25px none color(primary, black),
// paragraph
body-02 null 15px 400 1.33 -0.25px none color(primary, black),
// smaller paragraph
body-03 null 14px 500 1.29 -0.25px none color(primary, black),
// descriptor
body-04 null 12px 600 1.5 -0.25px none color(primary, black),
// tooltip
// body-05 null 28px 500 1.14 -0.25px none color(secondary, midGray), // quote
// body-06 null 14px 700 1.29 2px uppercase color(primary, black) // eyebrow
)
);
// TODO: larger header
$quote: (
// name element font-size weight line-height letter-spacing text-transform color
default: (quote-01 null 28px 500 1.14 -0.25px capitalize color(secondary, midGray), null)
);
$eyebrow: (
// name element font-size weight line-height letter-spacing text-transform color
default: (eyebrow-01 null 14px 700 1.29 2px uppercase color(primary, black), null)
);
$style-list: (
heading: $heading,
body: $body,
quote: $quote,
eyebrow: $eyebrow
);
$breakpoints: (
'mobile': 576px,
'tablet': 768px,
'desktop': 1024px,
'wide': 1440px
) !default;
// min-width breakpoints
@mixin breakpoint($breakpoint) {
// If the key exists in the map
@if map-has-key($breakpoints, $breakpoint) {
// Prints a media query based on the value
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}
@mixin list-gen($font, $size, $weight, $line-height, $letter-spacing, $text-transform, $color) {
font-family: $font;
font-size: $size;
font-weight: $weight;
line-height: $line-height;
letter-spacing: $letter-spacing;
text-transform: $text-transform;
color: $color;
}
@mixin get-style($list, $style: 01, $breakpoint: null) {
$type: map-get($style-list, $list);
@if ($type == null) {
@error 'There is no $variable in $style-list with the name #{$list}';
}
$bp: map-get($type, $breakpoint);
/* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
@if ($bp == null) {
$data: nth(map-get($type, mobile), $style);
@include list-gen(
$base-font-family,
nth($data, 3),
nth($data, 4),
nth($data, 5),
nth($data, 6),
nth($data, 7),
nth($data, 8)
);
@include breakpoint(tablet) {
$data: nth(map-get($type, desktop), $style);
@include list-gen(
$base-font-family,
nth($data, 3),
nth($data, 4),
nth($data, 5),
nth($data, 6),
nth($data, 7),
nth($data, 8)
);
}
}
/* a specific breakpoint has been specified, so only render that breakpoint. */
@else {
$data: nth(map-get($type, $breakpoint), $style);
@include list-gen(
$base-font-family,
nth($data, 3),
nth($data, 4),
nth($data, 5),
nth($data, 6),
nth($data, 7),
nth($data, 8)
);
}
}
/**
This generates the h1-h6 styling based on the $heading variable in '_settings.typography.scss'.
*/
@each $list, $breakpoint in $heading {
@each $style in $breakpoint {
@if (nth($list, 1) != 'desktop') {
#{nth($style, 2)},
.#{nth($style, 1)},
#{'%' + nth($style, 1)} {
@include list-gen(
$base-font-family,
nth($style, 3),
nth($style, 4),
nth($style, 5),
nth($style, 6),
nth($style, 7),
nth($style, 8)
);
}
} @else {
@include breakpoint(tablet) {
#{nth($style, 2)},
.#{nth($style, 1)},
#{'%' + nth($style, 1)} {
@include list-gen(
$base-font-family,
nth($style, 3),
nth($style, 4),
nth($style, 5),
nth($style, 6),
nth($style, 7),
nth($style, 8)
);
}
}
}
}
}
/**
This generates the body styling based on the $body variable in '_settings.typography.scss'.
*/
@each $list, $breakpoint in $body {
@each $style in $breakpoint {
.#{nth($style, 1)},
#{'%' + nth($style, 1)} {
@include list-gen(
$base-font-family,
nth($style, 3),
nth($style, 4),
nth($style, 5),
nth($style, 6),
nth($style, 7),
nth($style, 8)
);
}
}
}
/**
This generates the eyebrow styling.
.test {
@extend %eyebrow;
}
*/
%eyebrow {
@include get-style(eyebrow, 01, default);
}
.eyebrow {
@extend %eyebrow;
}
/*
This generates the quote styling.
.test {
@extend %quote;
}
*/
%quote {
@include get-style(quote, 01, default);
font-style: italic;
}
.quote {
@extend %quote;
}
p {
@include get-style(body, 01, default);
}
/**
* @returns hex color value from colors defined in '_settings.colors.scss'
*/
/**
This generates the h1-h6 styling based on the $heading variable in '_settings.typography.scss'.
*/
h1,
.heading-01 {
font-family: "din-2014", Arial, sans-serif;
font-size: 26px;
font-weight: 800;
line-height: 1.23;
letter-spacing: 0.15px;
text-transform: capitalize;
color: #181918;
}
h2,
.heading-02 {
font-family: "din-2014", Arial, sans-serif;
font-size: 21px;
font-weight: 800;
line-height: 1.19;
letter-spacing: -0.25px;
text-transform: capitalize;
color: #181918;
}
h3,
.heading-03 {
font-family: "din-2014", Arial, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.33;
letter-spacing: -0.25px;
text-transform: capitalize;
color: #181918;
}
h4,
.heading-04 {
font-family: "din-2014", Arial, sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.19;
letter-spacing: -0.25px;
text-transform: capitalize;
color: #181918;
}
h5,
.heading-05 {
font-family: "din-2014", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.29;
letter-spacing: 0px;
text-transform: capitalize;
color: #181918;
}
h6,
.heading-06 {
font-family: "din-2014", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.29;
letter-spacing: 0px;
text-transform: uppercase;
color: #181918;
}
@media (min-width: 768px) {
h1,
.heading-01 {
font-family: "din-2014", Arial, sans-serif;
font-size: 36px;
font-weight: 800;
line-height: 1.11;
letter-spacing: 0.5px;
text-transform: capitalize;
color: #181918;
}
}
@media (min-width: 768px) {
h2,
.heading-02 {
font-family: "din-2014", Arial, sans-serif;
font-size: 26px;
font-weight: 800;
line-height: 1.23;
letter-spacing: 0.15px;
text-transform: capitalize;
color: #181918;
}
}
@media (min-width: 768px) {
h3,
.heading-03 {
font-family: "din-2014", Arial, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 1.19;
letter-spacing: -0.25px;
text-transform: capitalize;
color: #181918;
}
}
@media (min-width: 768px) {
h4,
.heading-04 {
font-family: "din-2014", Arial, sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.19;
letter-spacing: -0.25px;
text-transform: capitalize;
color: #181918;
}
}
@media (min-width: 768px) {
h5,
.heading-05 {
font-family: "din-2014", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.29;
letter-spacing: 0px;
text-transform: capitalize;
color: #181918;
}
}
@media (min-width: 768px) {
h6,
.heading-06 {
font-family: "din-2014", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.29;
letter-spacing: 0px;
text-transform: uppercase;
color: #181918;
}
}
/**
This generates the body styling based on the $body variable in '_settings.typography.scss'.
*/
.body-01 {
font-family: "din-2014", Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.33;
letter-spacing: -0.25px;
text-transform: none;
color: #181918;
}
.body-02 {
font-family: "din-2014", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.33;
letter-spacing: -0.25px;
text-transform: none;
color: #181918;
}
.body-03 {
font-family: "din-2014", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.29;
letter-spacing: -0.25px;
text-transform: none;
color: #181918;
}
.body-04 {
font-family: "din-2014", Arial, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.25px;
text-transform: none;
color: #181918;
}
/**
This generates the eyebrow styling.
.test {
@extend %eyebrow;
}
*/
.eyebrow {
/* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
font-family: "din-2014", Arial, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.29;
letter-spacing: 2px;
text-transform: uppercase;
color: #181918;
}
/*
This generates the quote styling.
.test {
@extend %quote;
}
*/
.quote {
/* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
font-family: "din-2014", Arial, sans-serif;
font-size: 28px;
font-weight: 500;
line-height: 1.14;
letter-spacing: -0.25px;
text-transform: capitalize;
color: #656565;
font-style: italic;
}
p {
/* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
font-family: "din-2014", Arial, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.33;
letter-spacing: -0.25px;
text-transform: none;
color: #181918;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment