Skip to content

Apply styles globally and selectors

Jump to bottom
Brandon Jordan edited this page Sep 3, 2023 · 4 revisions

Apply to <body>

If you want to apply a style to the document <body> tag, simply add style methods to the view() or router() function.

jsUI.view([
    // ...
]).font('system')

// or router

jsUI.router([
    // ...
]).font('system')

Apply to elements

If you want to apply styles to every instance of a component like you would in CSS, but using the style methods, use the globalStyle() function.

jsUI.globalStyle('input, textarea')
	.rounded('5px')
	.border('#c7c7c7', '2px')
	.paddings(['8px', '5px'])
	.font('system');

Select element

jsUI.select('.selector')
	.rounded('5px')
	.border('#c7c7c7', '2px')
	.paddings(['8px', '5px'])
	.font('system');

Repurpose components

You can also create custom components that return a customized version of another component.

CustomButton.js:

import {Button} from 'javascript-ui';

export function CustomButton(label) {
    return Button(label)
    	       .rounded('5px')
	       .border('#c7c7c7', '2px')
	       .paddings(['8px', '5px'])
	       .font('system')
	       .onClick( () => {
	           // do something...
	       });
}

index.js:

import * as jsUI from 'javascript-ui';
import {CustomButton} from 'CustomButton.js'

window.onload = () => {
	jsUI.view([
            CustomButton('Button Text')
            // ...
        ])
};

Clone this wiki locally