ska-theme
WooCommerce
WooCommerce remains as one of the easiest and most customizable solutions for running an e-commerce store. ska-theme includes support for the WooCommerce plugin. Once you’ve installed and activated the plugin, take a look at the theme options’ WooCommerce section, which allows to configure how many products to display per page, how to render the product…
Contact Form 7
ska-theme includes compatibility with the popular Contact Form 7 plugin. The default contact form will have styles out of the box: The styles utilize the Button, Primary button, Form inputs, Label and Loading presets, as well as Tailwind configuration “warning”, “positive”, “negative” and “info” Theme palettes for styling notices. To place a contact form on…
Sticky
ska-theme includes an Alpine.js component for creating a sticky header. For creating a sticky header, add the x-data=”skaSticky” attribute to the element that should stick. That element will receive the .is-sticky class when it is sticky. Arguments can be specified like this: x-data=”skaSticky({offset: 128})”. When making a sticky header, it’s a good idea to give…
Patterns
ska-theme comes with built-in block patterns. The patterns typically include use of theme variations such as Section and Container, theme presets for buttons, image block for placeholder images, your configured primary/secondary colors, selectors for repeating content etc. Patterns can be inserted from the top left corner block inserter -> Patterns. Most patterns are designed to…
List
When using a regular list inside a Tailwind prose it looks like this: How ever, when not in prose it is completely unstyled: Here are some alternative styles for lists: List style type and spacing added manually List with icons Divided list with images List items with header & description List items with header, description…
Dropdown
ska-theme includes an Alpine.js component for creating dropdowns. For creating a dropdown, add the x-data=”skaDropdown” attribute to the root element that contains one or many elements that trigger a dropdown as well as the dropdown elements.The button or another element that triggers a dropdown should have a wrapper with the x-bind=”item(‘dropdownId’)” attribute. The element that…
Tabs
ska-theme includes an Alpine.js component for creating tabs. For creating tabs, add the x-data=”skaTabs” attribute to the root element.The element that contains the buttons that change tabs should have the x-bind=”tablist” attribute and individual buttons that allow to select a tab should have the x-bind=”tabItem(‘tabId’)” attribute with a unique ID that matches the content.Content elements…