Get started

Fundamentals

Fractures does not try to replace your current systems. Instead it provides a solid, immutable base to build on top of. The point is not to stop writing CSS, but to keep your custom CSS maintainable. It aims to be the baseline of a system to enable fast moving teams to build better UIs.

Setup

For NextJS, you have to have a custom _app.tsx, with a single import at the top: import "@fractures/css".
Fractures works with empty :root {} or with a fully customized one. This page sets only a few:

:root {  --font-family-sans: "Inter", Arial, sans-serif;  --font-family-serif: "Georgia";  --font-family-mono: "IBM Plex Mono", monospace;  --font-weight-bold: 500;  --font-weight-bolder: 700;}

Usage

100
100
100
100

Fractures is below 10 KB gzipped, but for production you'll have to purge the unused CSS.

Variables

Font size and Line height

Defaults are based on a 8px scale.

--font-size-h1: 36px;--font-size-h2: 32px;--font-size-h3: 28px;--font-size-h4: 24px;--font-size-h5: 20px;--font-size-h6: 18px;--font-size-p: 16px;--font-size-small: 14px;--font-size-tiny: 12px;--line-height-h1: 44px;--line-height-h2: 40px;--line-height-h3: 36px;--line-height-h4: 32px;--line-height-h5: 26px;--line-height-h6: 24px;--line-height-p: 22px;--line-height-small: 18px;--line-height-tiny: 14px;

Font families

--font-family-sans: "Helvetica";--font-family-serif: "Georgia";--font-family-mono: "Monospace";

Font weights

--font-weight-lighter: lighter;--font-weight-light: light;--font-weight-normal: normal;--font-weight-bold: bold;--font-weight-bolder: bolder;

Colors

Colors are defined as HSL values, see details.

--hsl-aqua: 187,87%;--hsl-blue: 230,87%;--hsl-gray: 225,10%;--hsl-green: 120,75%;--hsl-orange: 23,94%;--hsl-pink: 324,76%;--hsl-purple: 266,80%;--hsl-red: 356,84%;--hsl-yellow: 39,93%;

Boxes

Initial fracture scale goes from 1px to 96px.

--box-px: 1px;--box-1: 2px;--box-2: 4px;--box-3: 6px;--box-4: 8px;--box-5: 10px;--box-6: 12px;--box-7: 14px;--box-8: 16px;--box-9: 18px;--box-10: 20px;--box-11: 22px;--box-12: 24px;--box-13: 26px;--box-14: 28px;--box-15: 30px;--box-16: 32px;--box-24: 48px;--box-32: 64px;--box-40: 80px;--box-48: 96px;

Z indices

--z-index-0: 0;--z-index-10: 100;--z-index-20: 200;--z-index-30: 300;--z-index-40: 400;--z-index-50: 500;--z-index-60: 600;--z-index-70: 700;--z-index-80: 800;--z-index-90: 900;--z-index-100: 1000;