Element Variables

The Startr Style framework offers a range of basic element styles that can be easily modified using CSS variables. To personalize these styles, you only need to change specific variables located in the src/variables.css file.

For instance, if you want to adjust the default primary and secondary colors or change the default border-radius, you can achieve this by incorporating the following code into your stylesheet. Just make sure to include these customizations in a stylesheet that is loaded after you've integrated Startr Style.

:root {
  --primary:   darkblue;
  --secondary: darkorange;
  --text-main: darkslategrey;;
  --border-radius: 3pt;
}

Scoping CSS Variables

One great thing about utilizing CSS variables is their ability to have a limited scope. When you set a CSS variable to apply to the whole document :root, it affects all parts. However, by using local scope, you can create a variable that only works within a particular element. You can do this either by adjusting your stylesheet or by directly adding it to the element...

Local scope in your style

The following example redefines the primary and secondary colors inside any myelement class. You can use any valid style definition including other varables.

.myelement {
  --primary: var(--blue);
  --secondary: var(--dark-grey);
}

Local scope inline

The following example redefines the primary and secondary colors inline on the element itself.

<div  style="--primary: var(--blue); --secondary: var(--dark-grey);">
  ...
</div>