@svelkit/baseline

A baseline component to kickstart an elegant, consistent, and simple baseline to build upon.

Why?

It fixes some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

• Installation
• Global reset
• Scoping on children
• License

Installation

npm install @svelkit/baseline

And then import it:

// using es modules
import Baseline from '@svelkit/baseline'

// common.js
const Baseline = require('@svelkit/baseline')

Alternatively use UNPKG or jsDelivr packages.

Hotlinking from unpkg: (no build tool needed!)

import Baseline from 'https://unpkg.com/@svelkit/baseline?module'

Global reset

You might be familiar with normalize.css, a collection of HTML element and attribute style-normalizations.

<Baseline />
<!-- The rest of your application -->

Scoping on children

However, you might be progressively migrating a website to svelkit, using a global reset might not be an option. It's possible to apply the baseline only to the children by using the ScopedBaseline component.

<script>
  import ScopedBaseline from '@svelkit/scoped-baseline'
  import MyApp from './MyApp'
</script>

<ScopedBaseline>
  <!-- The rest of your application -->
  <MyApp />
</ScopedBaseline>

Make sure you import ScopedBaseline first to avoid box-sizing conflicts as in the above example.

License

svelkit is open source software licensed as MIT.