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;