Skip to content

Instantly share code, notes, and snippets.

@Kcko
Last active February 14, 2019 16:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kcko/50c7a8b5bdfb2970822102535def81c1 to your computer and use it in GitHub Desktop.
Save Kcko/50c7a8b5bdfb2970822102535def81c1 to your computer and use it in GitHub Desktop.
//--- demand methods --- //
@function to-string($value) {
@return inspect($value);
}
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/* HELPER */
$fontSizeStart: 0.1;
$fontSizeEnd : 6;
$fontUnit: 'rem';
@each $breakpoint in map-keys($grid-breakpoints)
{
@include media-breakpoint-up($breakpoint)
{
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$i: $fontSizeStart;
@while $i <= $fontSizeEnd
{
$iSafe: str-replace(to-string($i), '.', '_');
.fs#{$infix}-#{$iSafe}
{
font-size: #{$i}#{$fontUnit};
}
$i: $i + 0.1;
}
}
}
<div class="fs-2 fs-sm-3 fs-md-4 fs-lg-5 fs-xl-6" style="padding: 1rem; margin: 1rem;">
<div style="color: red;" class="d-block d-sm-none">xs</div>
<div style="color: blue;" class="d-none d-sm-block d-md-none">sm</div>
<div style="color: green;" class="d-none d-md-block d-lg-none">md</div>
<div style="color: purple;" class="d-none d-lg-block d-xl-none">lg</div>
<div style="color: gold;" class="d-none d-xl-block">xl</div>
<div>
Test velikosti fontu
</div>:)
</div>
.fs-0_1 {
font-size: .1rem
}
.fs-0_2 {
font-size: .2rem
}
.fs-0_3 {
font-size: .3rem
}
.fs-0_4 {
font-size: .4rem
}
.fs-0_5 {
font-size: .5rem
}
.fs-0_6 {
font-size: .6rem
}
.fs-0_7 {
font-size: .7rem
}
.fs-0_8 {
font-size: .8rem
}
.fs-0_9 {
font-size: .9rem
}
.fs-1 {
font-size: 1rem
}
.fs-1_1 {
font-size: 1.1rem
}
.fs-1_2 {
font-size: 1.2rem
}
.fs-1_3 {
font-size: 1.3rem
}
.fs-1_4 {
font-size: 1.4rem
}
.fs-1_5 {
font-size: 1.5rem
}
.fs-1_6 {
font-size: 1.6rem
}
.fs-1_7 {
font-size: 1.7rem
}
.fs-1_8 {
font-size: 1.8rem
}
.fs-1_9 {
font-size: 1.9rem
}
.fs-2 {
font-size: 2rem
}
.fs-2_1 {
font-size: 2.1rem
}
.fs-2_2 {
font-size: 2.2rem
}
.fs-2_3 {
font-size: 2.3rem
}
.fs-2_4 {
font-size: 2.4rem
}
.fs-2_5 {
font-size: 2.5rem
}
.fs-2_6 {
font-size: 2.6rem
}
.fs-2_7 {
font-size: 2.7rem
}
.fs-2_8 {
font-size: 2.8rem
}
.fs-2_9 {
font-size: 2.9rem
}
.fs-3 {
font-size: 3rem
}
.fs-3_1 {
font-size: 3.1rem
}
.fs-3_2 {
font-size: 3.2rem
}
.fs-3_3 {
font-size: 3.3rem
}
.fs-3_4 {
font-size: 3.4rem
}
.fs-3_5 {
font-size: 3.5rem
}
.fs-3_6 {
font-size: 3.6rem
}
.fs-3_7 {
font-size: 3.7rem
}
.fs-3_8 {
font-size: 3.8rem
}
.fs-3_9 {
font-size: 3.9rem
}
.fs-4 {
font-size: 4rem
}
.fs-4_1 {
font-size: 4.1rem
}
.fs-4_2 {
font-size: 4.2rem
}
.fs-4_3 {
font-size: 4.3rem
}
.fs-4_4 {
font-size: 4.4rem
}
.fs-4_5 {
font-size: 4.5rem
}
.fs-4_6 {
font-size: 4.6rem
}
.fs-4_7 {
font-size: 4.7rem
}
.fs-4_8 {
font-size: 4.8rem
}
.fs-4_9 {
font-size: 4.9rem
}
.fs-5 {
font-size: 5rem
}
.fs-5_1 {
font-size: 5.1rem
}
.fs-5_2 {
font-size: 5.2rem
}
.fs-5_3 {
font-size: 5.3rem
}
.fs-5_4 {
font-size: 5.4rem
}
.fs-5_5 {
font-size: 5.5rem
}
.fs-5_6 {
font-size: 5.6rem
}
.fs-5_7 {
font-size: 5.7rem
}
.fs-5_8 {
font-size: 5.8rem
}
.fs-5_9 {
font-size: 5.9rem
}
.fs-6 {
font-size: 6rem
}
@media (min-width: 576px) {
.fs-sm-0_1 {
font-size: .1rem
}
.fs-sm-0_2 {
font-size: .2rem
}
.fs-sm-0_3 {
font-size: .3rem
}
.fs-sm-0_4 {
font-size: .4rem
}
.fs-sm-0_5 {
font-size: .5rem
}
.fs-sm-0_6 {
font-size: .6rem
}
.fs-sm-0_7 {
font-size: .7rem
}
.fs-sm-0_8 {
font-size: .8rem
}
.fs-sm-0_9 {
font-size: .9rem
}
.fs-sm-1 {
font-size: 1rem
}
.fs-sm-1_1 {
font-size: 1.1rem
}
.fs-sm-1_2 {
font-size: 1.2rem
}
.fs-sm-1_3 {
font-size: 1.3rem
}
.fs-sm-1_4 {
font-size: 1.4rem
}
.fs-sm-1_5 {
font-size: 1.5rem
}
.fs-sm-1_6 {
font-size: 1.6rem
}
.fs-sm-1_7 {
font-size: 1.7rem
}
.fs-sm-1_8 {
font-size: 1.8rem
}
.fs-sm-1_9 {
font-size: 1.9rem
}
.fs-sm-2 {
font-size: 2rem
}
.fs-sm-2_1 {
font-size: 2.1rem
}
.fs-sm-2_2 {
font-size: 2.2rem
}
.fs-sm-2_3 {
font-size: 2.3rem
}
.fs-sm-2_4 {
font-size: 2.4rem
}
.fs-sm-2_5 {
font-size: 2.5rem
}
.fs-sm-2_6 {
font-size: 2.6rem
}
.fs-sm-2_7 {
font-size: 2.7rem
}
.fs-sm-2_8 {
font-size: 2.8rem
}
.fs-sm-2_9 {
font-size: 2.9rem
}
.fs-sm-3 {
font-size: 3rem
}
.fs-sm-3_1 {
font-size: 3.1rem
}
.fs-sm-3_2 {
font-size: 3.2rem
}
.fs-sm-3_3 {
font-size: 3.3rem
}
.fs-sm-3_4 {
font-size: 3.4rem
}
.fs-sm-3_5 {
font-size: 3.5rem
}
.fs-sm-3_6 {
font-size: 3.6rem
}
.fs-sm-3_7 {
font-size: 3.7rem
}
.fs-sm-3_8 {
font-size: 3.8rem
}
.fs-sm-3_9 {
font-size: 3.9rem
}
.fs-sm-4 {
font-size: 4rem
}
.fs-sm-4_1 {
font-size: 4.1rem
}
.fs-sm-4_2 {
font-size: 4.2rem
}
.fs-sm-4_3 {
font-size: 4.3rem
}
.fs-sm-4_4 {
font-size: 4.4rem
}
.fs-sm-4_5 {
font-size: 4.5rem
}
.fs-sm-4_6 {
font-size: 4.6rem
}
.fs-sm-4_7 {
font-size: 4.7rem
}
.fs-sm-4_8 {
font-size: 4.8rem
}
.fs-sm-4_9 {
font-size: 4.9rem
}
.fs-sm-5 {
font-size: 5rem
}
.fs-sm-5_1 {
font-size: 5.1rem
}
.fs-sm-5_2 {
font-size: 5.2rem
}
.fs-sm-5_3 {
font-size: 5.3rem
}
.fs-sm-5_4 {
font-size: 5.4rem
}
.fs-sm-5_5 {
font-size: 5.5rem
}
.fs-sm-5_6 {
font-size: 5.6rem
}
.fs-sm-5_7 {
font-size: 5.7rem
}
.fs-sm-5_8 {
font-size: 5.8rem
}
.fs-sm-5_9 {
font-size: 5.9rem
}
.fs-sm-6 {
font-size: 6rem
}
}
@media (min-width: 768px) {
.fs-md-0_1 {
font-size: .1rem
}
.fs-md-0_2 {
font-size: .2rem
}
.fs-md-0_3 {
font-size: .3rem
}
.fs-md-0_4 {
font-size: .4rem
}
.fs-md-0_5 {
font-size: .5rem
}
.fs-md-0_6 {
font-size: .6rem
}
.fs-md-0_7 {
font-size: .7rem
}
.fs-md-0_8 {
font-size: .8rem
}
.fs-md-0_9 {
font-size: .9rem
}
.fs-md-1 {
font-size: 1rem
}
.fs-md-1_1 {
font-size: 1.1rem
}
.fs-md-1_2 {
font-size: 1.2rem
}
.fs-md-1_3 {
font-size: 1.3rem
}
.fs-md-1_4 {
font-size: 1.4rem
}
.fs-md-1_5 {
font-size: 1.5rem
}
.fs-md-1_6 {
font-size: 1.6rem
}
.fs-md-1_7 {
font-size: 1.7rem
}
.fs-md-1_8 {
font-size: 1.8rem
}
.fs-md-1_9 {
font-size: 1.9rem
}
.fs-md-2 {
font-size: 2rem
}
.fs-md-2_1 {
font-size: 2.1rem
}
.fs-md-2_2 {
font-size: 2.2rem
}
.fs-md-2_3 {
font-size: 2.3rem
}
.fs-md-2_4 {
font-size: 2.4rem
}
.fs-md-2_5 {
font-size: 2.5rem
}
.fs-md-2_6 {
font-size: 2.6rem
}
.fs-md-2_7 {
font-size: 2.7rem
}
.fs-md-2_8 {
font-size: 2.8rem
}
.fs-md-2_9 {
font-size: 2.9rem
}
.fs-md-3 {
font-size: 3rem
}
.fs-md-3_1 {
font-size: 3.1rem
}
.fs-md-3_2 {
font-size: 3.2rem
}
.fs-md-3_3 {
font-size: 3.3rem
}
.fs-md-3_4 {
font-size: 3.4rem
}
.fs-md-3_5 {
font-size: 3.5rem
}
.fs-md-3_6 {
font-size: 3.6rem
}
.fs-md-3_7 {
font-size: 3.7rem
}
.fs-md-3_8 {
font-size: 3.8rem
}
.fs-md-3_9 {
font-size: 3.9rem
}
.fs-md-4 {
font-size: 4rem
}
.fs-md-4_1 {
font-size: 4.1rem
}
.fs-md-4_2 {
font-size: 4.2rem
}
.fs-md-4_3 {
font-size: 4.3rem
}
.fs-md-4_4 {
font-size: 4.4rem
}
.fs-md-4_5 {
font-size: 4.5rem
}
.fs-md-4_6 {
font-size: 4.6rem
}
.fs-md-4_7 {
font-size: 4.7rem
}
.fs-md-4_8 {
font-size: 4.8rem
}
.fs-md-4_9 {
font-size: 4.9rem
}
.fs-md-5 {
font-size: 5rem
}
.fs-md-5_1 {
font-size: 5.1rem
}
.fs-md-5_2 {
font-size: 5.2rem
}
.fs-md-5_3 {
font-size: 5.3rem
}
.fs-md-5_4 {
font-size: 5.4rem
}
.fs-md-5_5 {
font-size: 5.5rem
}
.fs-md-5_6 {
font-size: 5.6rem
}
.fs-md-5_7 {
font-size: 5.7rem
}
.fs-md-5_8 {
font-size: 5.8rem
}
.fs-md-5_9 {
font-size: 5.9rem
}
.fs-md-6 {
font-size: 6rem
}
}
@media (min-width: 992px) {
.fs-lg-0_1 {
font-size: .1rem
}
.fs-lg-0_2 {
font-size: .2rem
}
.fs-lg-0_3 {
font-size: .3rem
}
.fs-lg-0_4 {
font-size: .4rem
}
.fs-lg-0_5 {
font-size: .5rem
}
.fs-lg-0_6 {
font-size: .6rem
}
.fs-lg-0_7 {
font-size: .7rem
}
.fs-lg-0_8 {
font-size: .8rem
}
.fs-lg-0_9 {
font-size: .9rem
}
.fs-lg-1 {
font-size: 1rem
}
.fs-lg-1_1 {
font-size: 1.1rem
}
.fs-lg-1_2 {
font-size: 1.2rem
}
.fs-lg-1_3 {
font-size: 1.3rem
}
.fs-lg-1_4 {
font-size: 1.4rem
}
.fs-lg-1_5 {
font-size: 1.5rem
}
.fs-lg-1_6 {
font-size: 1.6rem
}
.fs-lg-1_7 {
font-size: 1.7rem
}
.fs-lg-1_8 {
font-size: 1.8rem
}
.fs-lg-1_9 {
font-size: 1.9rem
}
.fs-lg-2 {
font-size: 2rem
}
.fs-lg-2_1 {
font-size: 2.1rem
}
.fs-lg-2_2 {
font-size: 2.2rem
}
.fs-lg-2_3 {
font-size: 2.3rem
}
.fs-lg-2_4 {
font-size: 2.4rem
}
.fs-lg-2_5 {
font-size: 2.5rem
}
.fs-lg-2_6 {
font-size: 2.6rem
}
.fs-lg-2_7 {
font-size: 2.7rem
}
.fs-lg-2_8 {
font-size: 2.8rem
}
.fs-lg-2_9 {
font-size: 2.9rem
}
.fs-lg-3 {
font-size: 3rem
}
.fs-lg-3_1 {
font-size: 3.1rem
}
.fs-lg-3_2 {
font-size: 3.2rem
}
.fs-lg-3_3 {
font-size: 3.3rem
}
.fs-lg-3_4 {
font-size: 3.4rem
}
.fs-lg-3_5 {
font-size: 3.5rem
}
.fs-lg-3_6 {
font-size: 3.6rem
}
.fs-lg-3_7 {
font-size: 3.7rem
}
.fs-lg-3_8 {
font-size: 3.8rem
}
.fs-lg-3_9 {
font-size: 3.9rem
}
.fs-lg-4 {
font-size: 4rem
}
.fs-lg-4_1 {
font-size: 4.1rem
}
.fs-lg-4_2 {
font-size: 4.2rem
}
.fs-lg-4_3 {
font-size: 4.3rem
}
.fs-lg-4_4 {
font-size: 4.4rem
}
.fs-lg-4_5 {
font-size: 4.5rem
}
.fs-lg-4_6 {
font-size: 4.6rem
}
.fs-lg-4_7 {
font-size: 4.7rem
}
.fs-lg-4_8 {
font-size: 4.8rem
}
.fs-lg-4_9 {
font-size: 4.9rem
}
.fs-lg-5 {
font-size: 5rem
}
.fs-lg-5_1 {
font-size: 5.1rem
}
.fs-lg-5_2 {
font-size: 5.2rem
}
.fs-lg-5_3 {
font-size: 5.3rem
}
.fs-lg-5_4 {
font-size: 5.4rem
}
.fs-lg-5_5 {
font-size: 5.5rem
}
.fs-lg-5_6 {
font-size: 5.6rem
}
.fs-lg-5_7 {
font-size: 5.7rem
}
.fs-lg-5_8 {
font-size: 5.8rem
}
.fs-lg-5_9 {
font-size: 5.9rem
}
.fs-lg-6 {
font-size: 6rem
}
}
@media (min-width: 1200px) {
.fs-xl-0_1 {
font-size: .1rem
}
.fs-xl-0_2 {
font-size: .2rem
}
.fs-xl-0_3 {
font-size: .3rem
}
.fs-xl-0_4 {
font-size: .4rem
}
.fs-xl-0_5 {
font-size: .5rem
}
.fs-xl-0_6 {
font-size: .6rem
}
.fs-xl-0_7 {
font-size: .7rem
}
.fs-xl-0_8 {
font-size: .8rem
}
.fs-xl-0_9 {
font-size: .9rem
}
.fs-xl-1 {
font-size: 1rem
}
.fs-xl-1_1 {
font-size: 1.1rem
}
.fs-xl-1_2 {
font-size: 1.2rem
}
.fs-xl-1_3 {
font-size: 1.3rem
}
.fs-xl-1_4 {
font-size: 1.4rem
}
.fs-xl-1_5 {
font-size: 1.5rem
}
.fs-xl-1_6 {
font-size: 1.6rem
}
.fs-xl-1_7 {
font-size: 1.7rem
}
.fs-xl-1_8 {
font-size: 1.8rem
}
.fs-xl-1_9 {
font-size: 1.9rem
}
.fs-xl-2 {
font-size: 2rem
}
.fs-xl-2_1 {
font-size: 2.1rem
}
.fs-xl-2_2 {
font-size: 2.2rem
}
.fs-xl-2_3 {
font-size: 2.3rem
}
.fs-xl-2_4 {
font-size: 2.4rem
}
.fs-xl-2_5 {
font-size: 2.5rem
}
.fs-xl-2_6 {
font-size: 2.6rem
}
.fs-xl-2_7 {
font-size: 2.7rem
}
.fs-xl-2_8 {
font-size: 2.8rem
}
.fs-xl-2_9 {
font-size: 2.9rem
}
.fs-xl-3 {
font-size: 3rem
}
.fs-xl-3_1 {
font-size: 3.1rem
}
.fs-xl-3_2 {
font-size: 3.2rem
}
.fs-xl-3_3 {
font-size: 3.3rem
}
.fs-xl-3_4 {
font-size: 3.4rem
}
.fs-xl-3_5 {
font-size: 3.5rem
}
.fs-xl-3_6 {
font-size: 3.6rem
}
.fs-xl-3_7 {
font-size: 3.7rem
}
.fs-xl-3_8 {
font-size: 3.8rem
}
.fs-xl-3_9 {
font-size: 3.9rem
}
.fs-xl-4 {
font-size: 4rem
}
.fs-xl-4_1 {
font-size: 4.1rem
}
.fs-xl-4_2 {
font-size: 4.2rem
}
.fs-xl-4_3 {
font-size: 4.3rem
}
.fs-xl-4_4 {
font-size: 4.4rem
}
.fs-xl-4_5 {
font-size: 4.5rem
}
.fs-xl-4_6 {
font-size: 4.6rem
}
.fs-xl-4_7 {
font-size: 4.7rem
}
.fs-xl-4_8 {
font-size: 4.8rem
}
.fs-xl-4_9 {
font-size: 4.9rem
}
.fs-xl-5 {
font-size: 5rem
}
.fs-xl-5_1 {
font-size: 5.1rem
}
.fs-xl-5_2 {
font-size: 5.2rem
}
.fs-xl-5_3 {
font-size: 5.3rem
}
.fs-xl-5_4 {
font-size: 5.4rem
}
.fs-xl-5_5 {
font-size: 5.5rem
}
.fs-xl-5_6 {
font-size: 5.6rem
}
.fs-xl-5_7 {
font-size: 5.7rem
}
.fs-xl-5_8 {
font-size: 5.8rem
}
.fs-xl-5_9 {
font-size: 5.9rem
}
.fs-xl-6 {
font-size: 6rem
}
}
http://bit.ly/2X0laAJ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment