Alter CSS Vars to customize the look and feel.
The examples here are interactive — type within the edit this areas, so they will update the browser window for immediate feedback. Don’t fortget to check out the usage guides.
The main UI colors are exposed as CSS variables.
All shades are set in HSL in the original scss files, but unfortunately converted by SASS to HEX values.
.bg-{state}-{level}
Teutonic uses modular scale for sizing things. Sizes grow exponential not linear: smaller sizes have smaller steps and larger sizes have larger steps in between. The beauty is that you basically only need two values to control everyting: The starting point (base) and the multiplier (ratio). See the “Modular scale calculation” below to understand how it works. You can also skip the calculation part completly or in parts by aligning your own values to the vars directly.
See this A-List-Apart article to dive deeper into modular scale and some historical background. Teutonic has two modular scale spaces: One for spacing, which defines all the margins and paddings (this here) and one for typography (below). They basically work in the same way. In the original SCSS file you will find a switch to define how the calculation is done: $css-calc:true. Wuth the default set, the browser will do the calculations (which is some heavy lifting but works well). Also by default way, you can control the modular scale output by modifying the values directly. With css-calc set to false, SCSS will do the calc for you, less lifting in the browser, but harder to adjust later on.
_vars-space-scale.scss
↑ This is the smallest starting point from where it grows bigger. Something between .1rem and .4rem looks good.
↑ This is the multiplier defining how fast the space base should grow. Something between 1.5 and 3 looks good.
↑ This is how the space sizes are getting calculated in the browser using the --space-base and --space-ratio. It starts with the smallest value and get's bigger, from small step to larger steps. Using the modular scale is optional, you can also assign your own values to the variables from --space-xs to --space-xxl directly.
_scale-vars.scss
↑ This is the base font size for the --text-m variable. It's used for all standard elements like div or p without size applied. Please stick to the em unit here. 1em should match 16px on desktop size. Edit this value only slightly as it has a big impact, something between .8em and 1.2em is good.
↑ This defines the propotion by which the modular scale is calculated. Please edit this only slighty: Use a value higher than 1 and — for aesthetic reasons — lower than 1.7.
↑ This is how the font-sizes are getting calculated using the --text-base and --text-ratio. The base is in the lower part, from there it grows and shrinks.
There are three typeface CSS variables: --font-standard (div), --font-body (p) and --font-headline (h1). The standard Teutonic theme here uses a serif typeface for paragraphs and the sans-serif font of your Operating System for anything else. You can assign all to use the same font, or three different ones by changing the CSS Vars.
Various standard web safe font-stacks are included in the orignal SCSS files. You can also load web fonts from Google fonts or alike and assign theme here. The example here shows how override font-face with CSS vars.
_typeface-vars.scss
Paragraphs and lists.
Paragraphs and lists.
<div class="flex gap_l text-all_l">
<div>
<h3 class="bo-b_xs pa-b_xs">Default</h3>
<div class="ma-t_s">
<h5>Headlines</h5>
<p>Paragraphs and lists.</p>
<div>Anything else.</div>
</div>
</div>
<div>
<h3 class="bo-b_xs pa-b_xs">Modified</h3>
<div class="docs-font-face-example ma-t_s">
<h5>Headlines</h5>
<p>Paragraphs and lists.</p>
<div>Anything else.</div>
</div>
</div>
</div>