UI

The ska-theme’s “Loading” preset can be applied to produce an overlay with a loading spinner. Loading preset is globally loaded on the front end and applied to the following CSS selectors by default: Additional custom selectors can be added using the following filter: The loading spinner appearance can be customized with Tailwind classes by editing…

Dividers can be used to visually segment content into groups. In the WordPress Block Editor you can use the Separator block to create dividers with different styles or with ska-blocks and Tailwind you can create custom <hr> elements or use the divide-* classes to create divisions. WordPress dividers Default separator Wide line separator Three dots…

Every website needs a button. This documentation gives an overview of the “Button” presets that come with ska-theme, provides copy-pastable examples of basic and advanced buttons and details about their usage in various contexts.

Examples of using WordPress core List block or ska-blocks’ Element & Text blocks as <ul>/<ol> and <li> elements to create lists with various appearances. List appearance Default list appearance (<ul> -> <li>) Default list appearance (core/list block) Default ordered list appearance (core/list block) Default list appearance in Prose (blog posts) Default ordered list appearance in…

Messages are blocks of text that stand out among other content. The custom Theme palette option in Tailwind configuration contains values for positive, negative, info and warning colors which can be used to create various messages with appropriate appearances.

Examples of styling the <ul> -> <li> elements produced by the Menu block with Tailwind classes. Usage – copy the code for the desired appearance, paste it into your block editor, swap out the Menu block’s placeholder menu with one from your own WordPress nav menus. You can then edit the Tailwind classes to tailor…