Last active
January 7, 2022 15:48
-
-
Save soluml/8ed2fd50ee8f53dcc1ca6a6b5853c9c6 to your computer and use it in GitHub Desktop.
Default Styles for most new projects
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
$background-color: ( | |
body: #fff, | |
selection: #d3ffbf | |
); | |
$color: ( | |
body: #000014, | |
selection: #000014, | |
); | |
// https://codepen.io/soluml/pen/mdBjeMW?editors=1100 | |
$font-size-multiplier: 62.5%; | |
@function fs-multiplier($value) { | |
@return $value / ($font-size-multiplier / 100%); | |
} | |
$font-size: ( | |
h6: clamp(#{fs-multiplier(0.7rem)}, 0.32vw + #{fs-multiplier(0.64rem)}, #{fs-multiplier(0.89rem)}), | |
base: clamp(#{fs-multiplier(0.88rem)}, 0.52vw + #{fs-multiplier(0.77rem)}, #{fs-multiplier(1.19rem)}), | |
h5: clamp(#{fs-multiplier(1.09rem)}, 0.82vw + #{fs-multiplier(0.93rem)}, #{fs-multiplier(1.58rem)}), | |
h4: clamp(#{fs-multiplier(1.37rem)}, 1.24vw + #{fs-multiplier(1.12rem)}, #{fs-multiplier(2.11rem)}), | |
h3: clamp(#{fs-multiplier(1.71rem)}, 1.84vw + #{fs-multiplier(1.34rem)}, #{fs-multiplier(2.81rem)}), | |
h2: clamp(#{fs-multiplier(2.14rem)}, 2.69vw + #{fs-multiplier(1.6rem)}, #{fs-multiplier(3.75rem)}), | |
h1: clamp(#{fs-multiplier(2.67rem)}, 3.88vw + #{fs-multiplier(1.89rem)}, #{fs-multiplier(5rem)}), | |
); | |
$font-family: ( | |
sans-serif: "IBM Plex Sans", "system-ui", Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, | |
) | |
*, *::before, *::after { | |
box-sizing: inherit; // Use a more-intuitive box-sizing model. | |
color-scheme: light dark; // Support both light and dark themes. | |
margin: 0; // Remove default margin | |
padding: 0; // Remove default padding */ | |
@media (prefers-color-scheme: dark) { | |
filter: invert(1) hue-rotate(180deg); // Automatic dark-mode | |
} | |
@media (prefers-reduced-motion: reduce) { | |
// Turn off motion for those who request it | |
/* stylelint-disable declaration-no-important */ | |
animation-delay: -1ms !important; | |
animation-duration: 1ms !important; | |
animation-iteration-count: 1 !important; | |
scroll-behavior: auto !important; | |
transition-delay: 0s !important; | |
transition-duration: 0s !important; | |
/* stylelint-enable */ | |
} | |
} | |
html { | |
box-sizing: border-box; // Use a more-intuitive box-sizing model. | |
font-size: $font-size-multiplier; // Set multiplier (usually 62.5% -> 10px ~= 1rem | |
height: 100%; // Allow percentage-based heights in the application | |
scroll-behavior: smooth; // Smooth scrolling | |
text-rendering: optimizeLegibility; // Improve text-rendering legibility | |
text-size-adjust: none; // Prevent apple devices from adjusting the text size | |
} | |
body { | |
background: map-get($background-color, body); | |
color: map-get($color, body); | |
font-family: map-get($font-family, sans-serif); | |
font-size: map-get($font-size, base); | |
height: 100%; // Allow percentage-based heights in the application | |
line-height: calc(2ex + 5px); // Relative line height based on the X-height of the font | |
overflow-x: hidden; // Prevent scrolling on the x-axis | |
overflow-y: auto; // Enable it for the y-axis | |
scroll-behavior: inherit; | |
width: 100%; // Stretch the body the full width of the screen | |
} | |
::selection { | |
background: map-get($background-color, selection); | |
color: map-get($color, selection); | |
text-shadow: none; // Improve's legibility within a selection whenever there is a text-shadow present | |
} | |
img, picture, video, canvas, svg, iframe, object { | |
display: block; // Prevent line-height gaps | |
max-width: 100%; // Prevent media from overflowing container | |
} | |
audio, canvas, iframe, img, svg, video { | |
vertical-align: middle; // Change the alignment on media elements in all browsers | |
} | |
img, iframe { | |
border: 0; // Kill default borders | |
} | |
input, button, textarea, select { | |
font: inherit; // Remove built-in form typography styles | |
font-size: max(16px, 100%); // Prevent zooming on mobile | |
} | |
textarea { | |
resize: vertical; // Change the resize direction in all browsers | |
} | |
svg { | |
min-width: 1em; // set default size for svg sprite icons | |
&:not([fill]) { | |
fill: currentColor; // set default fill for svg sprite icons | |
} | |
} | |
ol, ul { | |
list-style: none; // Remove default list styles | |
} | |
table { | |
border-collapse: collapse; // Collapse border spacing in all browsers | |
border-color: currentColor; // Correct table border color in Chrome, Edge, and Safari. | |
text-indent: 0; // Remove text indentation from table contents in Chrome, Edge, and Safari. | |
} | |
p, h1, h2, h3, h4, h5, h6 { | |
overflow-wrap: break-word; // Remove built-in form typography styles | |
} | |
p { | |
margin: 1em 0; // Restore default margin for paragraphs | |
} | |
b, strong { | |
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari. | |
} | |
// Typography | |
h1, h2, h3, h4, h5, h6 { | |
margin: 3rem 0 1.38rem; | |
font-weight: 400; | |
} | |
h1 { margin-top: 0.38em; } | |
h1, .h1 { font-size: $map-get($font-size, h1); } | |
h2, .h2 { font-size: $map-get($font-size, h2); } | |
h3, .h3 { font-size: $map-get($font-size, h3); } | |
h4, .h4 { font-size: $map-get($font-size, h4); } | |
h5, .h5 { font-size: $map-get($font-size, h5); } | |
h6, .h6 { font-size: $map-get($font-size, h6); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment