Styles

Beautify your apps

Styling is very imporant for any app that has some sort of user interface, and same applies for Bolt. Till now, we learnt how we can add properties and events to a component, so using that principle, we can add styles to our component as well.

Inline styles

In HTML, we can add inline styling using the style attribute. Since we can add attributes in our BoltUI as well, we can just as well add them inline like this:

attribute(
    p("This text is red"),
    {
        style: "color: red"
    }
)

But this is just a hectic way of styling, which also does not provides you with a lot of options

Styles from css files

You can directly import stylesheets from your source directory and use them in your UI by selecting ids and classes in your css file. Let's see the above example

main.js

import "./style.css"
id(p("I am in red color"), "red")

style.css

#red {
    color: red;
}

Styling using SCSS

Since bolt usess vite for development, we will need to look at the guidebook of vite to add SCSS support directly into vite, then we can just import the scss file as we did for our css file.