<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baselayer.css@latest/dist/baselayer.css">
or
$ npm i baselayer.cssBaselayer.css is a low-specificity stylesheet for native HTML elements. It requires no classes, and it gives you nothing beyond normalized, styled native HTML elements. There is no grid, there are no components, just the bare basics.
- Sensible defaults for native HTML elements (no classes necessary).
- Visual Consistency (CSS custom props FTW)
- Themeable (see above)
- Stardards-compliant browser support (press f for ie)
- Tiny size (~3KB gzipped)
Here is a demo that shows most of the elements you're likely to use in their typical context.
For most of my projects I don't want or need an entire CSS framework, but I found myself writing minor variations of the same resets and CSS custom props over and over. Baselayer.css is my attempt to codify this into something focussed, consistent and reusable.
Baselayer.css will make your HTML look nice without any extra effort, it will give you basic CSS custom-props for color and spacing, it's seriously small, and it won't get in the way of the rest of the stuff you want to build. If that sounds good to you, baselayer.css may be for you.
There are plenty of good reasons to choose another tool instead:
- "I just want a CSS reset." Use Josh Comeau's reset or Eric Meyer's reset.
- "I like what you're doing here, but it's a little too minimal, and I really wish borders were
box-shadowinstead ofborder." Use water.css. - "I want a small CSS framework, but I need a grid and some components." Use Miligram, Mustard, or Bulma.
- "I know what I'm about son, and what I'm about is blue buttons." Use Bootstrap or Foundation.
- "CSS SUCKS!!! Have you tried Tailwi..." *sigh. Go Tailwind it up.
Throw this in your website's <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baselayer.css@latest/dist/baselayer.css" />or
import '../node_modules/baselayer.css/dist/baselayer.css';<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baselayer.css@latest/dist/baselayer-dark.css" />or
import '../node_modules/baselayer.css/dist/baselayer-dark.css';<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baselayer.css@latest/dist/baselayer-light.css" />or
import '../node_modules/baselayer.css/dist/baselayer-light.css';Colors and sizing are done via CSS custom props so you can make whatever adjustments you need.
--color-light-muted
--color-light
--color-light-intense
--color-dark-muted
--color-dark
--color-dark-intense
--color-ui-muted
--color-ui
--color-ui-intense
--color-link-default
--color-link-hover
--color-link-visited
--color-primary-muted
--color-primary
--color-primary-intense
--color-accent-muted
--color-accent
--color-accent-intense
--border-radius
--border-width
--space-sm
--space-md
--space-lg
--space-xl
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
--font-monospace: 'SFMono-Regular', Andale Mono, Consolas, 'Liberation Mono', Menlo, monospace;
--font-serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;