Skip to content

Apply styles globally and selectors

Jump to bottom
Brandon Jordan edited this page Oct 13, 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.

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

// or router

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.

import { globalStyle } from 'javascript-ui';

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

Select element

Create a JavaScript UI Element instance using a custom selector.

import { select } from 'javascript-ui';

select('.selector#id')
    .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 {view} from 'javascript-ui';
import {CustomButton} from 'CustomButton.js'

window.onload = () => {
	view([
            CustomButton('Button Text')
            // ...
        ])
};
Clone this wiki locally