Getting Started

Seed Style is a comprehensive styling, layout and theming solution for Seed apps.

It is influenced by, and has almost all of the features of, popular libraries such as Styled Components, Styled-System, XStyled, Theme-UI and atomic-layout. Phew! Thats a lot!

The idea is that as a developer you can use the library in a way that suits your workflow and use as much or as little of the features as you need.

Want to create web apps with responsive, themeable styling? let's dive right in!

Setting up the app environment

Visit https://rustup.rs/ and install rust, ensure you select the nightly toolchain.

Then in the terminal type

> git clone https://github.com/rebo/seed-style-quickstart-basic
> cd seed-styling-quickstart-basic
> cargo make serve
> Open a second terminal tab and run: cargo make watch

This will auto recompile and re-serve your app when you save changes to your app.

Visit http://localhost:8000 and you will see the basic quickstart home page.

Styling a html element

Clear out the contents of the themed_view() function and replace as below:

pub fn themed_view(_model: &Model) -> Node<Msg> {
    p![
        s().font_size(px(24)), 
        "Hello World from Seed!"
    ]
}

Restarting the app with cargo make start and refreshing the page will show the hello world text at font size 24px.

How it works

The s() function creates a Style object which is then modified by adding rules using methods such as font_size(). This Style object is responsible for updating the DOM and ensuring all styles are available to specific elements.

The argument to font_size() is px(24) which is a helper method that creates an ExactLength which the font_size() method accepts. However we can use many different arguments to our property methods, including:

a) A typed Css value such as a CssColor enum. e.g s().color(CssColor::Rgba(255., 0., 0., 1.)) b) A typed measurement, ExactLength, for properties that expect a measure. e.g s().margin(ExactLength{unit: Unit::Px, value: NotNan::new(2.0).unwrap()}) c) A helper function that creates one of the above, e.g. rgb(),hsl()orpx()etc. e.g.s().margin(px(2))ors().color(rgb(255,0,0))d) A theme alias, such asColor::DarkPrimary. e.g. s().color(Color::DarkPrimary)e) An array that can set breakpoint dependent values. e.g.s().font_size(&[px(12),px(14),px(18)])f) An array that can set breakpoint dependent values at defined scales. s().font_size(&[1,3,5])g) An integer that chooses a value from a theme scale. s().font_size(2)h) A plain'static &str. s().font_size("12px")`

Basic themes

Seed Style includes comprehensive theming capabilities, which enables common values to be set and re-used throughout your application. Our themes conform to the "Theme Specification" which means we use a Theme object to store styles and values. Add the following style to the above code:

pub fn themed_view(_model: &Model) -> Node<Msg> {
    p![
        s().font_size(px(24))
            .color(Color::Primary)
            .border_bottom_width(px(3))
            .border_style_solid()
            .border_color(seed_colors::Red::No4),
        "Hello World from Seed!"
    ]
}

This will set the text color to the primary color set in themes.rs. It will also set the border color to the color described by seed_colors::Red::No4 this color is a preset color that can be made available if the default_colors_theme() theme is used.

Global Styles

If you inspect the text it will also have a font Lato already applied. What is going on here? We certainly did not specify it in the Style object.

Seed Style includes a very useful feature, global styles, which enable styles to be set globally for all elements of a specific type. Think of this as a replacement for a global .css file. The advantage of doing this within Seed is that global styles can make use of theme specific values.

Edit global_styles.rs and replace the word Lato with Arial and restart. The main app font is now Arial.

Summary

In this short getting started tutorial we have seen how to download and run a Seed quickstart, implement basic styles on a paragraph, use themes to set specific re-used values and seen how to use global styles to apply make site wide changes.