Created
February 6, 2016 20:14
-
-
Save maddesigns/a7b8b95190ebf580343c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.21) | |
// Compass (v1.0.3) | |
// ---- | |
// global breakpoints | |
$tiny: 320px !default; | |
$small: 480px !default; | |
$medium: 600px !default; | |
$large: 768px !default; | |
$xlarge: 1024px,'no-query' true !default; // fallback for IE8 | |
$xxlarge: 1280px !default; | |
$huge: 1600px !default; | |
// config/_breakpoints.scss | |
$breakpoints: ( | |
'tiny': 320px, | |
'small': 480px, | |
'medium': 600px, | |
'large': 768px, | |
'xlarge': 1024px, | |
'xxlarge': 1280px, | |
'huge': 1600px | |
); | |
// config/_typography.scss | |
$text-sizing: ( | |
'centi': ( | |
'small': ( | |
'font-size': 12px, | |
'line-height': 16px | |
) | |
), | |
'deci': ( | |
'small': ( | |
'font-size': 14px, | |
'line-height': 20px | |
) | |
), | |
'base': ( | |
'small': ( | |
'font-size': 16px, | |
'line-height': 26px | |
) | |
), | |
'deca': ( | |
'small': ( | |
'font-size': 18px, | |
'line-height': 26px | |
), | |
'large': ( | |
'font-size': 20px, | |
'line-height': 30px | |
) | |
), | |
'h3': ( | |
'small': ( | |
'font-size': 22px, | |
'line-height': 28px | |
), | |
'large': ( | |
'font-size': 24px, | |
'line-height': 32px | |
) | |
), | |
'h2': ( | |
'small': ( | |
'font-size': 24px, | |
'line-height': 32px | |
), | |
'large': ( | |
'font-size': 28px, | |
'line-height': 36px | |
) | |
), | |
'h1': ( | |
'small': ( | |
'font-size': 24px, | |
'line-height': 32px | |
), | |
'xlarge': ( | |
'font-size': 58px, | |
'line-height': 85px | |
) | |
) | |
); | |
// lib/functions/_responsive.scss | |
@function breakpoint($breakpoint-name) { | |
$breakpoint-value: map-get($breakpoints, $breakpoint-name); | |
@if $breakpoint-value { | |
@return $breakpoint-value; | |
} | |
@warn "Breakpoint '#{$breakpoint-name}' not found in $breakpoints"; | |
} | |
// lib/functions/_typography.scss | |
@function text-breakpoints-for($text-size) { | |
$text-breakpoints: map-get($text-sizing, $text-size); | |
@if $text-breakpoints { | |
@return $text-breakpoints; | |
} | |
@warn "Text size '#{$text-size}' not found in $text-sizing"; | |
} | |
@function text-properties-for($text-size, $breakpoint-name) { | |
$text-breakpoints: text-breakpoints-for($text-size); | |
$text-properties: map-get($text-breakpoints, $breakpoint-name); | |
@if $text-properties { | |
@return $text-properties; | |
} | |
@warn "Breakpoint '#{$breakpoint-name}' for text size '#{$text-size}' was not found"; | |
} | |
// lib/mixins/_responsive.scss | |
@mixin respond-above($breakpoint-name) { | |
$breakpoint-value: breakpoint($breakpoint-name); | |
@if $breakpoint-value { | |
@media screen and (min-width: $breakpoint-value) { | |
@content; | |
} | |
} | |
} | |
// lib/mixins/_typography.scss | |
@mixin text-size($text-size, $breakpoint-name: 'small') { | |
$text-size-properties: text-properties-for($text-size, $breakpoint-name); | |
@if $text-size-properties { | |
font-size: map-get($text-size-properties, 'font-size'); | |
line-height: map-get($text-size-properties, 'line-height'); | |
} | |
} | |
@mixin responsive-text-size($text-size, $default-breakpoint: 'small') { | |
@include text-size($text-size, $default-breakpoint); | |
$text-breakpoints-map: text-breakpoints-for($text-size); | |
$text-breakpoints-keys: map-keys($text-breakpoints-map); | |
@each $breakpoint-name in $text-breakpoints-keys { | |
@if $breakpoint-name != $default-breakpoint { | |
@include respond-above($breakpoint-name) { | |
@include text-size($text-size, $breakpoint-name); | |
} | |
} | |
} | |
} | |
// _typography.scss | |
h1, | |
.text--mega { | |
@include responsive-text-size('mega'); | |
} | |
h2, | |
.text--kilo { | |
@include responsive-text-size('kilo'); | |
} | |
h3, | |
.text--hecto { | |
@include responsive-text-size('hecto'); | |
} | |
h4, | |
.text--deca { | |
@include responsive-text-size('deca'); | |
} | |
h5, | |
h6, | |
body, | |
.text--base { | |
@include responsive-text-size('base'); | |
} | |
.text--deci { | |
@include responsive-text-size('deci'); | |
} | |
small, | |
.text--centi { | |
@include responsive-text-size('centi'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Function text-breakpoints-for finished without @return |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment