chisel.css v0.8.1

A minimalist CSS framework.

Full Documentation

chisel.css is still very new, a full documentation site is still in the works. Star this repo and keep an eye out for updates!

...Another CSS framework?

Yes, but hopefully not for long! The goal of chisel.css is to provide the out of the box experience that HTML elements should have been given. Our measure of success with chisel is to become whittled down to nothing as browser vendors throw some extra attention behind elements' default styles.

What it is

• an (opinionated) browser reset, similar to sanitize.css
• a cross-browser visual reset, because most browsers ignore default styling
• concerned exclusively with HTML elements, not JS libraries or custom elements
• built on the latest browser features like CSS variables
• built with autoprefixer and Browserlist to support most browsers (using default browserlist settings)

What it isn't

• a full component library...sorry, no card components or toggle switches here
• a layout engine...flexbox and grid are your friends these days

Download

Install with NPM (or yarn, or pnpm)

npm i -S chisel.css

or from CDN

<link href="https://unpkg.com/chisel.css" rel="stylesheet" />

CSS Variables

chisel.css uses CSS variables for all our colors making it dead simple to change themes, add your own dark mode, etc.

:root {
  --chisel-primary: #325476;
  --chisel-secondary: #0b70ba;
  --chisel-neutral-50: #f9fafb;
  --chisel-neutral-100: #f3f4f6;
  --chisel-neutral-200: #e5e7eb;
  --chisel-neutral-300: #d1d5db;
  --chisel-neutral-400: #9ca3af;
  --chisel-neutral-500: #6b7280;
  --chisel-neutral-600: #4b5563;
  --chisel-neutral-700: #374151;
  --chisel-neutral-800: #1f2937;
  --chisel-neutral-900: #111827;
}

--chisel-primary is the primary brand color used, by default it is the same blue color as chisel.css's logo. --chisel-secondary is used as an accent color for things like links. The --chisel-neutral colors are shades of gray used out of the box for backgrounds, text color, borders, etc.

Because these are native CSS variables, you can override them globally on your page or scope color changes for particular sections of your site.

Typography

Proper type scaling can make all the difference in a design. chisel.css defaults headers to scale based on on the Major Third type scale, see type-scale.com for more details.

:rotating_light: Before the Github issues start piling up...yes we purposely chose to go with h1, h2, h3, h4, h5, h6 for naming both the CSS variables and helper classes for type scaling. If that rubs you the wrong way, first consider how much easier to understand class="h1" is compared to class="text-4xl".

Typography CSS Variables

Type scaling is also exposed with CSS Variables. Do you prefer the larger range of header sizes with the Perfect Fourth scale? No problem, override these variables in your CSS and you're all set.

:root {
  --chisel-h1: 3.052rem;
  --chisel-h2: 2.441rem;
  --chisel-h3: 1.953rem;
  --chisel-h4: 1.563rem;
  --chisel-h5: 1.25rem;
  --chisel-h6: 0.8rem;
}

Typography font-size Classes

DOM heirarchy is important for both SEO and accessibility. Sometimes you just need a visually smaller header before a visually larger one - chisel.css has you covered.

.h1 {
  font-size: var(--chisel-h1);
}
.h2 {
  font-size: var(--chisel-h2);
}
.h3 {
  font-size: var(--chisel-h3);
}
.h4 {
  font-size: var(--chisel-h4);
}
.h5 {
  font-size: var(--chisel-h5);
}
.h6 {
  font-size: var(--chisel-h6);
}

Add the h4 class to your <h1> for the best of both worlds. Symantically your <h1> comes before the subheaders while visually the other headers are emphasized.

Prism Support

Do you use Prism for syntax highlighting? We've got you covered!

Installed from NPM

If you installed from NPM, just include chisel.css/chisel-prism.css (or chisel-prism.min.css). Depending on your build setup you may need to include the stylesheet directly from chisel.css/dist/chisel-prism.min.css.

Including from CDN

Including chisel's Prism theme can also be handled from the CDN.

<link
  href="https://unpkg.com/chisel.css/chisel-prism.min.css"
  rel="stylesheet"
/>