Styles

Beautify your apps

Styling is very important for any app that has some sort of user interface, and same applies for Weblabs. Till now, we learnt how we can add properties and events to a component. Let's now see how 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 Weblabs as well, we can just as well add them inline like this:

import { p } from '@weblabsjs/core/components'

p("This is red").prop("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 { p } from '@weblabsjs/core/components'
import "./style.css"

p("I am in red color").id("red")

style.css

#red {
    color: red;
}

Styling using SCSS

Since weblabs uses 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.

Styles in HTML

If you are using weblabs as a CDN, you can just link your stylesheets to the html as you'd do to your default HTML files. It is as easy as that