@svelkit/spectre

spectre components as svelte actions and css modules (part of svelkit)

• Installation
• Usage
• License

Installation

npm install @svelkit/spectre

And then import it:

// using es modules
import { spectre } from '@svelkit/spectre'

// common.js
const { spectre } = require('@svelkit/spectre')

Alternatively use UNPKG or jsDelivr packages.

Hotlinking from unpkg: (no build tool needed!)

import { spectre } from 'https://unpkg.com/@svelkit/spectre?module'

Usage

As svelte actions

<script>
  import { btn, card, chip, heading, text, img } from '@svelkit/spectre'

  let active = false
</script>

<div use:chip="{{ active }}">may be active</div>

<div use:chip>not active</div>
<div use:chip.active>active</div>

<div use:spectre.shadow>
  <div use:spectre.image>
    <img src="img/osx-el-capitan.jpg" use:img.responsive />
  </div>
  <div use:spectre.header>
    <div use:heading="{5}">...</div>
    <div use:text.gray>...</div>
  </div>
  <div use:spectre.body>...</div>
  <div use:spectre.footer>
    <button use:btn.primary>...</button>
  </div>
</div>

As css modules

<script>
  import { btn, chip, heading, text, img } from '@svelkit/spectre'

  let active = false
</script>

<div class="{chip.clsx({ active })}">may be active</div>

<div class="{chip.class}">not active</div>
<div class="{chip.active.class}">active</div>

<div class="{spectre.shadow.class}">
  <div class="{spectre.image.class}">
    <img src="img/osx-el-capitan.jpg" class="{img.responsive.class}" />
  </div>
  <div class="{spectre.header.class}">
    <div class="{heading.clsx(5)}">...</div>
    <div class="{text.gray.class}">...</div>
  </div>
  <div class="{spectre.body.class}">...</div>
  <div class="{spectre.footer.class}">
    <button class="{btn.primary.class}">...</button>
  </div>
</div>

License

svelkit is open source software licensed as MIT.