UST | StepOne - UI framework

CSS Variables

StepOne makes use of CSS variables to provide customization options and allow you to override default styles easily. CSS variables, also known as custom properties, enable you to define reusable values and apply them throughout your stylesheets. Let's explore how you can leverage CSS variables in StepOne to customize your website's appearance.

Default Variables

StepOne comes with a set of default CSS variables that control various aspects of the library's styles. These variables are defined at the root level and serve as the foundation for StepOne's styling. To override these variables, you need to redefine them with your desired values.

Here are some of the commonly used default variables in StepOne:

$desktop-big: 1800px;
$desktop: 1280px;
$laptop: 1024px;
$tablet: 960px;
$mobile: 640px;
:root {
    --grid-unit: 10px;
    /*margins and paddings*/
    --global-padding: var(--grid-unit);
    --global-margin: var(--grid-unit);
    /*colors*/
    --primary-color: #304e89; 
    --accent-color: #2d79c1;
    --link-color: var(--accent-color);
    --light-grey: #f1f1f1;
    --grey: #eeeeee;
    --dark-grey: #747474;
    --warning-color: var(--yellow);
    --success-color: var(--green);
    --default-color: var(--dark-grey);
    --error-color: var(--red);
    --info-color: var(--blue);
    /*inputs and buttons*/
    --input-background: #fafafa;
    --input-height: calc(var(--global-line-height) + 30px);
    --textarea-height: calc(var(--input-height) * 2);
    --button-padding: calc(var(--global-padding)/2) calc(var(--global-padding)*2);
    /*border*/
    --global-border: 1px solid #ddd;
    --light-border: 1px solid var(--light-grey);
    --border-radius: 5px;
    /*fonts*/
    --font-color: var(--black);
    --global-font-size: 14px;
    --global-line-height: 22px;
    --small-font-size: 12px;
    --global-font-family: "Open Sans", Arial;
    /*transitions*/
    --transition: 0.3s;
}

Overriding Variables

To override the default variables in StepOne, you can define new values for the variables either in a separate CSS file or inline within your HTML.

External CSS File

Create a new CSS file and include it after the StepOne CSS file in your HTML.

html
<link rel="stylesheet" href="stepone.css">
<link rel="stylesheet" href="custom-styles.css">

In your custom-styles.css file, redefine the desired variables with your custom values.

:root {
  --primary-color: #ff0000;
  --font-family: 'Open Sans', sans-serif;
  /* Add more custom variable overrides here */
}

Inline within HTML

Within the <head> section of your HTML file, add a <style> tag.

html
<link rel="stylesheet" href="stepone.css">
<style>
  :root {
    --primary-color: #ff0000;
    --font-family: 'Open Sans', sans-serif;
    /* Add more custom variable overrides here */
  }
</style>

Using Custom Variables

Once you have overridden the default variables with your custom values, StepOne will automatically apply the new styles throughout your website.

For example, if you redefine --primary-color to #ff0000, any component or element that uses the primary color will now reflect your custom value.

html
<button class="btn">Click Me</button>

:root {
  --primary-color: #ff0000;
}

In the example above, the button will now have the custom primary color of #ff0000.

Exploring Available Variables

To explore all the available default variables in StepOne and their purpose, refer to the StepOne documentation or inspect the CSS source files. This will give you a comprehensive list of variables that you can override to customize StepOne's styles to match your desired design.

By leveraging CSS variables in StepOne, you can easily customize the library's appearance to suit your project's needs, ensuring a cohesive and personalized web experience.