Dynamic Lightbox Classic

The Slider Framework is a wrapper code for the Breakdance Builder that allows users to easily create and customize responsive sliders using the Swiper.js library. It integrates seamlessly, offering extensive options for layout, navigation, and effects, event for making highly customizable slider creation simple and flexible even for non-developers.

For developers we are providing code examples how you could use full Swiper.js API and connect it to Slider element.

Basic

Events

A11Y

Examples

const scope = document.querySelector('.breakdance .bde-text-6793-113-7197-6793-1').previousElementSibling;
const swiper = scope.querySelector('.swiper').swiper;
swiper.params.autoplay.delay = 1000;
swiper.params.autoplay.reverseDirection = true;
swiper.autoplay.start();

An a11y-friendly Dynamic Tabs component is designed to be accessible and responsive, offering a seamless user experience across devices. It adapts to different screen sizes by transforming traditional tabs into a dropdown menu or accordion on smaller screens. This component ensures keyboard accessibility, proper ARIA roles and attributes, and focus management, making it easy to navigate for all users, including those using assistive technologies.

Getting started

Basic configuration

In order to configure you’ll need locate element called Dynamic Tabs – config and click on Advanced option like shown in the image below:

Attribute	Values	Description
data-responsive-type	tabs, accordion, dropdown	Should tabs be shown as tabs on the smaller devices? With this you could switch to accordion and dropdown. When to switch is decided by next attribute “data-responsive-px”
data-responsive-px	Integer	When to switch to alternative responsive view like accordion or dropdown.
data-tab-preset	tabs, pills, bar, dot	Quick tab styling presets
data-accordion-preset	classic, pill, bordered	Quick accordion styling presets
data-accordion-icon	openclosed, open-and-closed	openclosed – Uses only one icon for both open and closed accordion state. Modify OpenClosed icon if you pick this option. open-and-closed – Uses separate open and closed icons. Modify both Open and Closed icon if you use this option.
data-tab-activation	automatic, manual	According to W3C guidelines there are two types of tabs. With automatic automation keyboard arrows will shift immediately tabs, while with manual you will need to confirm choice by Enter or Space key. Recommended value: automatic

Option configuration

Advanced styling

Accessibility

<div role="tablist">  
  <button id="tab-1" tabindex="0" role="tab" aria-controls="tabcontent1" aria-selected="true"></button>
  <button id="tab-1" tabindex="-1" role="tab" aria-controls="tabcontent2" aria-selected="false"></button>
  <button id="tab-1" tabindex="-1" role="tab" aria-controls="tabcontent3" aria-selected="false"></button>
</div>
<div id="tabcontent1" role="tabpanel"  aria-labelledby="tab-1" class="is-active"></div>
<div id="tabcontent2" role="tabpanel"  aria-labelledby="tab-2"></div>
<div id="tabcontent3" role="tabpanel"  aria-labelledby="tab-3"></div>

<div class="accordion-content">
  <h3>
    <button id="accordion-button-1" aria-expanded="true" aria-controls="tabcontent1">Tab1</button>
  </h3>
  <div id="tabcontent2" aria-labelledby="accordion-button-1" role="region" class="tab-content" hidden></div>
</div>
<div class="accordion-content">
  <h3>
    <button id="accordion-button-2" aria-controls="tabcontent2">Tab1</button>
  </h3>
  <div id="tabcontent2" aria-labelledby="accordion-button-2" role="region" class="tab-content" hidden></div>
</div>

Whiskey template is being shipped as a whole “site” via Updraft plugin.

Getting Started

You always need to start with a fresh install of WordPress. As a first step, install plugin UpdraftPlus: WP Backup & Migration Plugin and activate it.

Then go and download files from Whiskey template – you should be able to see them here after the purchase (or if you are Pro or LTD license holder). Unzip the file and you should be able to see 5 archive files starting “backup” in their names.

After that, go back to your fresh install, go to Settings > UpdraftPlus Backups and click on Upload backup files:

Drag and drop or select or the 5 “backup” files there. After all the files are loaded, click on Restore button:

Check all checkboxes and proceed to next step and wait for plugin to finish restoring:

When the restoring is finished you will be asked to login again – now – this is IMPORTANT. This template has a different login, so you need to use this to login:

username: default & password: HeadspinIsAwesome!

After login, you should, no you must create a new account for yourself and remove immediately all other accounts for security reason!

Then go and install Breakdance plugin as it is not part of delivered package.

As a last step, just to make sure that everything is in its place – Go to Settings > Permalinks and hit Save button. Similarly, go to Headspin plugin dashboard and hit Save button.

Blog

When setting up a blog, follow these steps:

1. Choose an “archive” page where all the posts are displayed. You can find them under Pages, their names start with “Blog page…”. Remove the rest or change their status to “Draft”.
2. Choose an “archive” template for all post taxonomies (categories & tags). That means, if you have e.g. a category “Tech” and user visit it, they will see all the posts of this category in selected template. Right now you can choose from 3 post taxonomy templates. Make sure that only one template is active at a time.
3. Similarly, you can choose a Single template for all the posts too, activate the one you want to use (currently, there is only 1 single post template in v 1.0).

Blog – Search templates

By default, there are 2 templates that apply to Blog search. A normal one that shows the results and the one that shows when there is no result. You can edit their layout with Breakdance builder:

Woocommerce

Woocommerce store consists of Shop, Cart, Checkout, Thank you and My account pages. There there are Single product and Product search templates.

Based on the feedback that we gathered in communication with our users, we are introducing few new things which should improve quality of life for our users.

Improved color palette views

1) List view – default

The list view is new view introduced palette view option in list format with use case hints. This view should make much easier for the new users to understand our color system because it will act as cheat sheet where each shade will have recommended use case.

2) Row view – old

We have kept old row view which was used before v1.2.2 because many users are used to that, and also that view far more compact so when users are on-board with our color system they could use this compact view.

Also this view is improved also with dark/light labels for theme mods so user understands which variation belong to light or dark mode. Besides that, when user hovers on shade he will also get use case tooltip for that particular shade.

Typography size overview

While adjusting advanced settings, user will have table preview with fluid sizes, or text preview where he could see actual size of the particular step.

Also there is indication if token is unlinked, so you will have feedback indication that settings won’t affect that token which is manually controlled via Tokens panel.

Spacing preview

Same as for typography is done for spacing, you will have option to preview regular and section spacing.

Also there is indication if token is unlinked, so you will have feedback indication that settings won’t affect that token which is manually controlled via Tokens panel.

In this article, we are going to cover how we could modify the styling and functionality of theme switches.

Styling options

As shown in the image image below, we have 6 options to style:

1. Size – controls size of the whole element
2. Moon icon color – color of the Moon icon, we use a CSS variable that could be a hex value also
3. Sun icon color – color of the Sun icon, we use a CSS variable that could be a hex value also
4. Background color – switch background color
5. Border color – switch border-color
6. Knob color – controls the color the switch knob

Functionality options

data-matchmedia

Value: true or false
Before the user interacts with the component we need to show a dark or light theme. The default theme is the theme from the app settings. If we set this to true, the theme setter will check the user preference in the browser and system to see if does user prefers a dark or light theme and set the theme according to this.

data-buttonstate

Value: current or next

As there isn’t a defacto standard related to toggles should they represent the current or next state? With this option, you could reverse the UX of a component and force the component to show a reversed state.

Styling options

 For basic styles like size and color we need to navigate to the code block called “Theme toggle Code” (1) and under the design tab we should have the option to set the color for toggle (2).

To make toggle size we need to adjust the font-size (3)

Functionality options

Match media

If we want to use settings from browser preference until the first user interaction as the default theme we should set data-match media to true

Desired UX

There is an option to data-buttonstate which could be current or next. The default UX is to show the current state (for example, the sun icon in dark mode which represents after clicking it will get to light mode). If the desired option is that the icon shows the next state you need to set this value to next.

Styling per dark/light mode

To set separate colors per dark/light mode you could do the following Theme Toggle code > Advanced > Custom CSS, and drop the following custom CSS. instead of named colors in this example, you could use your own custom hex colors.

{
--toggle-color-dark-mode: gold;
--toggle-color-light-mode: dodgerblue;
}

In this post, we will introduce Headspin UI Dark Theme API. Dark Theme API is a convenient set of functions that allow users to switch between dark and light modes.

Theme mode hierarchy

Before diving into all the options that we could use, we should understand how dark/light mode logic operates. The hierarchy shown below is in cascade fashion, so each step later will take priority and override the step before.

• App settings
• Match browser/system preference (OPTIONAL)
• User preference

Logic is following:

1. First, we retrieve settings from the Headspin app (dark/light), and that will make the initial theme assumption but has the lowest priority.
2. After we that if API has an option called match media, if data-matchmedia is true this option will be enabled and this will check user browser preference and pull theme from there
3. User preference – This will check the user’s local storage to find if the user set up a theme after the interaction. This step has the highest priority and the first two are like fallback logic until the user interacts with the theme settings UI element.

To recap two steps are logic to set the theme if the user didn’t set up the theme by clicking on toggle/dropdown. The third step will check if the user has some data stored in local storage and set the theme according to that data.

Event API

In the table below we have examples of events that we could use to make more modifications. Init event hooks run only once (initial theme setup after the page is loaded), while Update event hooks are client-side hooks to run before/after each change.

Some usage examples are given below to use as boilerplate for custom logic:

window.addEventListener("theme:hook:beforeInit", function(e){
  e = e || window.event;
  console.log(e.datil);
})

window.addEventListener("theme:hook:afterInit", function(e){
  e = e || window.event;
  console.log(e.datil);
})

window.addEventListener("theme:hook:beforeUpdate", function(e){
  e = e || window.event;
  console.log(e.datil);
})

window.addEventListener("theme:hook:afterUpdate", function(e){
  e = e || window.event;
  console.log(e.datil);
})

Realtime cross tabs events

There is also a real-time sync mechanism for multiple opened tabs in the same browser via Broadcast Channel API. In the example below you could use code to hook after the theme was changed, this method we are using for theme change across multiple tabs, if you need to extend further use the sample code below as a boilerplate.

const realtime = new BroadcastChannel("headspin_theme_channel");

realtime.onmessage = (event) => {
  console.log(event.data);
};