The undisputed base CSS for all Lost My Name website projects

Usage no npm install needed!

<script type="module">
  import lostmynameCss from 'https://cdn.skypack.dev/@lostmyname/css';


Lost My Name CSS configuration

This repository contains typographic classes, colour palette classes, layout-specific spacing classes, generic utility classes, and some SCSS functions & config variables.

The only explicitly exported CSS classes are the type size classes, as well as the default resets. This is in keeping with Chameleon's ethos. All others are available through the @include placeholder() mixin.

Config variables

These variable declarations, located in scss/config to set breakpoints, and spacing sizes to be consumed by Chameleon, as well as font families, type sizes, and colours.


We have some unit functions, located in scss/functions to do things such as change a pixel value into a rem, remove a unit from a value, etc.


Chameleon mixins are imported, giving us access to things such as the @include on() and @include placeholders() mixins.

There are also config-specific mixins, for typography.


As well as importing Chameleon's box, positioning and visibility utility placeholders, we add a11y and type utility placeholders.

As with all placeholders, these aren't exported as classes by default.


npm install