Seed Catalog

Website

Seed-catalog is an open-source web-components library. It contains CSS-styles and standards-based web templates such as buttons, modals, dropdowns and other interface components.

Dependencies

• LitElement Web Components
• Storybook WC Interface (dev)
• ESLint Coding style (dev)
• Open-wc Testing recommendations (Karma, Mocha, Chai)

Quick start

Install via npm

npm i @seed-catalog/modal

Catalog

• Carousel
• Dropdown
• Modal
• Progress ring
• Stepper

Styles

• Button
• Button Group
• Button Icon
• Button Input

Style classes

Buttons

You can play with different combinations of colors, types and sizes according with the requirements of your application or website.

• Material Icons Crafted symbols

Material icons is integrated as dependency of this class, so you can create more complex and dynamic buttons, easy and fast just importing seedStyle class.

import { LitElement, css } from 'lit-element';
import { seedStyle } from '@seed-catalog/styles';
import '@seed-catalog/dropdown';

class MyComponent extends LitElement {
    static get styles() {
        return [
            seedStyle,
            css`
                ...
            `
        ];
    }

    render() {
        return html`
            <seed-dropdown maxWidth="300" clickout>
                <button slot="button" class="sd-btn red">Dropdown</button>
                <p slot="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Cras ut viverra leo, vel dapibus quam. Proin a sollicitudin quam,
                    eget viverra diam. Donec euismod mattis dignissim.
                </p>
            </seed-dropdown>
        `;
    }
}

Color classes:

• .red
• .green
• .blue
• .yellow
• .purple
• .black
• .orange
• .red-mate
• .green-mate
• .blue-mate
• default

Button classes

• .sd-btn
• .sd-btn-mix
• .sd-btn-mixr
• .sd-btn-group
• .sd-icon
• .clear
• .circle
• .sm
• .lg

Input classes

• .sd-input-submit
• .sd-input-icon
• .sd-input-icon left
• .sd-input-label

Fonts

• Material icons
• Ubuntu, sans-serif

How to use

We recommend to see the website documentation to learn more about seed-components catalog and how to use them.