LogoJaspr

๐ŸŽจ Styling

Jaspr gives you a strongly-typed styles system that wraps the most common css properties. You can access these various properties through the Styles class that is exported by the core package.

To pass style attributes to a html component, construct a Styles object and pass it as the styles attribute like this:

div(styles: const Styles.background(color: Colors.red), []);

This will render as:

<div style="background: red"></div>

Generally it is recommended to make styles constant wherever you can. This can improve performance and reduce the bundle-size of your application.

Style Groups#

Css properties are grouped semantically into style groups that can be accessed through the Styles class as shown above. For example, the background group gives you the set of css properties related to the background style, like color, position or size.

Currently, the following groups exist:


Raw Styles#

If you want to work with raw CSS properties or need to use a property that is not supported by the current style groups, use the Styles.raw() method and provide a map of properties and values:

const myStyle = Styles.raw({
  'color': 'blue',
  'some_advanced_css_property': 'special_value',
});

Combining Styles#

When you want to combine styles from multiple groups, use the Styles.combine() method:

const myStyle = Styles.combine([
  Styles.text(color: Colors.red),
  Styles.background(color: Colors.blue),
]);

You can also store styles in variables and mix'n'match:

const redText = Styles.text(color: Colors.red);

const redBlueTest = Styles.combine([
  redText,
  Styles.background(color: Colors.blue),
]);

const redGreenTest = Styles.combine([
  redText,
  Styles.background(color: Colors.green),
]);

Style Component#

The Styles class is great for defining a single set of css properties e.g. to be used as inline styles for a single html element.

To define a stylesheet with a set of style rules use the Style (without s) component.

Style(styles: [
    StyleRule(
        selector: const Selector.id('content'),
        styles: Styles.box(
            width: 100.percent,
            height: 100.percent,
        ),
    ),
    StyleRule(
        selector: const Selector.dot('red-text'),
        styles: Styles.text(
            color: Colors.red,
        ),
    ),
]);

will render as:

<style>
  #content {
    width: 100%;
    height: 100%;
  }
    
  .red-text {
    color: red;
  }
</style>

A normal style rule takes a Selector and a Styles property.

There are also additional StyleRule variants that support other css features:

  • StyleRule.import(String url) renders a @import url(...) statement.
  • StyleRule.media({MediaRuleQuery query, List<StyleRule> styles}) renders a @media ... { ... } statement.