ska-theme
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, such as Tailwind versions of the patterns from WordPress Twenty Twentyfour theme, as well as patterns from various sites that provide awesome Tailwind HTML: preline.co, flowrift.com, tailblocks.cc, kitwind.io and more. The patterns typically include changes to use the theme variations such as Section and Container, theme presets for buttons,…
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…
Accordion
ska-theme includes an Alpine.js component for creating an accordion. For creating an accordion, add the x-data=”skaAccordion” attribute to the root element.All direct children of that element should have the attribute x-bind=”item”.The item elements should have 2 child elements, one with x-bind=”toggle” and another with x-bind=”content”. There is 1 argument available for the skaAccordion component: exclusive.…