Skip to main content

6. Baseline Assets

Unlike traditional css frameworks, Toucaan does not use a normalize.css or reset css file to override browser defaults. Toucaan baselines on a very small set of pre-opted rules to ensure a starting point for cross-browser consistency.

For a start, only the following two blocks of code are added by default, like so:

baseline.css = * + <html> + <body> elements

    html {
        /* Always set the background color */
        background-color: var(--background); 

        /* Configure type rendering */
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        
        /* Scroll or panning control */
        overflow-x: hidden;
        overflow-y: scroll;
        text-size-adjust: 100%;
    }

    body {

        /* Font family lives inside the Typography folder. */
        font-family: 'Font Family', var(--system);  

        font-smooth: always;
        font-weight: 300;
        font-style: normal;
        font-synthesis: none;
        font-stretch: ultra-condensed;
        font-variant: no-common-ligatures proportional-nums slashed-zero;
        font-kerning: normal;
        text-rendering: geometricPrecision; /* Why not: text-rendering: optimizeSpeed;?… in light of PWA. */
        font-display: swap;
        font-display: optional;

        -webkit-tap-highlight-color: var(--black);
        -webkit-backface-visibility: hidden;

        line-height: calc(1.5 * 4 * var(--vmin));  /* Or 1.5 */

        /* Colors  (These go into the color palette.) */
        color: var(--lightmode-primary-text-color:);
        background-color: var(--lightmode-primary-background-color);

        /* Dimensions */
        border: none;
        min-height: 100vh;

        /* Behavior */
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        touch-action: auto;
        
    }


Toucaan relies on the fact that the modern web browsers have evolved to a point where a heavy-handed reset or generic normalization is no longer required.

Environment Variables​

Vendor normalization is considered a part of initial framework configuration or setting up of the environment variables. The author is expected to set baseline rules for only the tags they formally use in their application.