Seed Style
Seed Hooks
Seed Style
Easy, powerful, styling for Seed

Use the full power of typed CSS directly within any Seed component. Theme, context and media query aware mean your styles are effortlessly reactive and in harmony with your design system.

button![
    s().background_color(seed_colors::Blue::No6)
        .color(seed_colors::Base::White)
        .padding_x(&[px(24), px(32)])
        .padding_y(&[px(8), px(12)])
        .margin(px(8))
        .font_size(&[px(18), px(24)])
        .border_radius(px(3))
        .outline_none(),
    s().hover()
        .background_color(seed_colors::Blue::No5)
        .cursor_pointer(),
    s().active()
        .background_color(seed_colors::Blue::No7)
        .cursor_pointer(),
    "Seed Rocks!"
]

Getting Started

The best way to get started is to download the Seed Style quickstart, this targets current Seed master and includes seed_style_preview

git clone https://github.com/rebo/seed-style-quickstart-basic
cd seed-styling-quickstart
cargo make start

Features

Use styles scoped to individual components.
Optional typing, lets you use traditional CSS or fully typed properties and values.
Fully integrated themes let you swap styles at the press of a button.
Responsive styles mean precise control over styles at set breakpoints
Customizable scales for a perfectly consistent design system
Atomic in nature, styles can be freely composed in sophisticated ways
Integrated full grid layout system, layouts and compositions are first class citizens

Examples

Getting Started

Let's explore some basics of Seed Style by using the quickstart app

Button Styling Examples

See how to setup styles for buttons in a variety of contexts and use cases.

Theming Support

Seed Style provides first class theme support that is consistent with The Theme Specification. Find out how to define, create and use themes

Responsive Styling

Use the power of Seed Style to effortlessly style elements and components that need to be responsive to the device they are rendered on. Mobile first development is straightforward and comprehensive.

Simple Layout Primitives

Seed Style includes Row and Column layout primitives to make simple layout a breeze

Extending Seed

Create expressive UI DSLs by extending seed with styles and hooks.

Fully Integrated Layout

Seed Style includes full layout capabilities, this example demonstrates setting up a typical header-sidebar-content-footer layout. Rendered with inbuilt mock content.

Load Test

Whilst extensive performance optimization is yet to be done Seed Style is reasonably performant. This page renders 1000 random new styles in sub 16ms in release mode.