Last active
July 3, 2023 12:23
-
-
Save ChristianOellers/ef74f66bb225a6591dd66c5c7ebf0dce to your computer and use it in GitHub Desktop.
SCSS + Bootstrap snippets. Utilities and custom font scaling mechanism. Variables in separate file.
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
// Custom font scaling mechanism. | |
// | |
// This allows keeping a standardized base font size (e.g. 16px ~ 1rem), | |
// but applying custom scales for anything that is not regular text flow. | |
// Font scale factors (here large Desktop set as base scale). | |
$font-breakpoints: ( | |
xs: 0.65, | |
sm: 0.7, | |
md: 0.75, | |
lg: 0.8, | |
xl: 0.85, | |
xxl: 0.9, | |
xxxl: 1, | |
); | |
@each $size, $scale in $font-breakpoints { | |
@include media-breakpoint-up(#{$size}) { | |
:root { | |
--font-scale-factor: #{$scale}; | |
} | |
} | |
} | |
.example { | |
font-size: calc(1.5 * var(--body-font-size) * var(--font-scale-factor)); | |
} | |
// DETAILS + EXPLANATIONS | |
// | |
// Useful for | |
// - Graphic-heavy design, decorative large typography, that needs a certain accuracy | |
// of where things go and how they scale. Layout might not be designed to exceed the intended scales. | |
// - Decorative large font sizes that go well beyond typical h1-h6 definitions. | |
// - Text that cannot use hyphens or wrapping, as it might break them. | |
// - Text parts that might break the layout in certain situations. | |
// - Translations that might considerably affect text length. | |
// | |
// Not so useful for | |
// - Text that is dynamic or changes more often | |
// - Translations in many different languages | |
// | |
// --- | |
// | |
// Note on text and fluid design | |
// - Varying browser implementations on how text might break or apply hyphens, it's hard to control if words will fit in a given layout range or wrap unwanted. | |
// With a graphic heavy design and very large typography, this can become a concern as an elements' height might change considerably, affecting other elements around it. | |
// - In fluid design that goes beyond the target breakpoints, sometimes an intermediate scale might need adjustment. |
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 map example: Merge Bootstrap container size with own. | |
// | |
// Find variables in separate file nearby. | |
@use "sass:map"; | |
@include media-breakpoint-up(sm) { | |
.example { | |
max-width: (map.get($container-max-widths, md) + 1rem); | |
} | |
} | |
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
// Standalone and with other demonstrated files. | |
/* | |
* Botstrap extension: Added breakpoint and spacer ability. | |
* - Add size 'XXXL' | |
*/ | |
$grid-breakpoints: ( | |
xs: 0, | |
sm: 576px, | |
md: 768px, | |
lg: 992px, | |
xl: 1200px, | |
xxl: 1400px, | |
xxxl: 2048px, | |
); | |
$container-max-widths: ( | |
sm: 540px, | |
md: 720px, | |
lg: 960px, | |
xl: 1140px, | |
xxl: 1320px, | |
xxxl: 1920px, | |
); | |
// For m|p-* utility classes | |
// Linear progression except largest step | |
$spacer: 1rem; | |
$spacers: ( | |
0: 0, | |
1: $spacer * 0.25, | |
2: $spacer * 0.5, | |
3: $spacer * 1, | |
4: $spacer * 1.5, | |
5: $spacer * 2, | |
6: $spacer * 2.5, | |
7: $spacer * 3, | |
8: $spacer * 3.5, | |
9: $spacer * 4, | |
10: $spacer * 4.5, | |
20: $spacer * 10, | |
); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment