@svelkit/scoped-baseline

A scoped baseline component to progressively 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
• Usage
• License

Installation

npm install @svelkit/scoped-baseline

And then import it:

// using es modules
import ScopedBaseline from '@svelkit/scoped-baseline'

// common.js
const ScopedBaseline = require('@svelkit/scoped-baseline')

Alternatively use UNPKG or jsDelivr packages.

Hotlinking from unpkg: (no build tool needed!)

import ScopedBaseline from 'https://unpkg.com/@svelkit/scoped-baseline?module'

Usage

Progressively migrate 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.