dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mixant de font-size responsive

Browse source
This commit is contained in:
Raphael Goetter 2017-10-30 15:42:32 +01:00
parent 7426519638
commit 2862bbff9c
6 changed files with 99 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

29
sass/_config/_mixins.scss
View file

@ -1,3 +1,32 @@
// font-size Mixin
// compiles to font-size-s + font-size-base on small-plus devices
// ex. h2 { @include font-size(h2);}
$font-sizes: (
base-size : $font-size-base,
base-size-s: $font-size-s,
h1-size : $h1-size,
h1-size-s : $h1-size-s,
h2-size : $h2-size,
h2-size-s : $h2-size-s,
h3-size : $h3-size,
h3-size-s : $h3-size-s,
h4-size : $h4-size,
h4-size-s : $h4-size-s,
h5-size : $h5-size,
h5-size-s : $h5-size-s,
h6-size : $h6-size,
h6-size-s : $h6-size-s
) !default;
@mixin font-size($elem) {
$base-size: #{$elem}-size;
$small-size: #{$elem}-size-s;
font-size: map-get($font-sizes, $small-size);
@include respond-to("small-up") {
font-size: map-get($font-sizes, $base-size);
}
}
// Grid Mixin
// arguments are : columns number, gutter, min-breakpoint
// ex. .ingrid { @include grid(4, 1rem, 640px); }

10
sass/_config/_variables.scss
View file

@ -14,8 +14,8 @@ $font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, O
$font-family-headings : sans-serif; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace; // font for code and samples
// font sizes
$font-size-base : 1.6rem !default; // 1.6rem value is "16px" equivalent
// font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem !default;
$h1-size : 3.2rem !default;
$h2-size : 2.8rem !default;
$h3-size : 2.4rem !default;
@ -50,7 +50,11 @@ $weight-medium : 500 !default;
$weight-bold : 700 !default;
// grid gutters (for .has-gutter-* classes)
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !default;
$grid-gutters: (
'': 1rem,
'-l': 2rem,
'-xl': 4rem )
!default;
// global border-radius
$border-radius: 0 !default;