Age Verification in Brekadance
Age Verification in Brekadance
Age Verification in Brekadance
We’ve release 3 components which you could user to verify users before showing sensitive content. While it is pretty easy to this in Breakdance and could be done in 20mins, some users may struggle with logic and making small code to check and set cookie.
Variation | Verfication type | Link to solution |
---|---|---|
1 | Year input | LINK TO COMPONENT |
2 | Date input (day, month and year inputs) | LINK TO COMPONENT |
3 | Button (Yes/No) | LINK TO COMPONENT |
Breakdance setup (VIDEO)
VIDEO_GOES HERE
Setup instructions
Breakdance popup template setup
Please navigate: WP Admin > Breakdance > Popups
In top left corner click add new popup.
Click on newly created popup settings. Now we need to set where it applies. In this demo we’ll apply it Everywhere to lock whole site access before visitor verifies age. Mostly this is what you want, but you may want exclude login pages, or apply to certain page. So this may depend on yours particular case.
After we have added location rule, we need to add condition. We’ll check is our special cookie is present, if cookie is present we won’t show. In order to do that we need to add new condition, set it as custom PHP, click open code editor and add this one line of PHP which will check is cookie set. If cookie is NOT present condition will be triggered and popup will be shown.
Type | Action | Value |
Custom PHP | Open PHP Editor | copy below |
return !isset($_COOKIE['age_verification_passed_hsx']);
PRO TIP: If you have logged users, you may add additional condition which won’t show this to logged in users.
After doing this, we need to make our popup design.
Breakdance age verification configuration
To recap, we’ve created popup, added Location rule, and added
Age Verification – Year config
Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.
// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;
Variable | Desc |
---|---|
COOKIE_DURATION_IN_DAYS | Sets how long should cookie last in days. |
REQUIRED_AGE | Sets how old user should be to pass verification in years. |
INVALID_AGE_MESSAGE | Message which appears when user tries invalid value inside input field which could not be translated to age. |
INSUFFICENT_AGE_MESSAGE | Message which appears when user is younger than required age settings |
Age Verification – Date config
Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.
// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;
Variable | Desc |
---|---|
COOKIE_DURATION_IN_DAYS | Sets how long should cookie last in days. |
REQUIRED_AGE | Sets how old user should be to pass verification in years. |
INVALID_AGE_MESSAGE | Message which appears when user tries invalid value inside input field which could not be translated to age. |
INSUFFICENT_AGE_MESSAGE | Message which appears when user is younger than required age settings |
DIY Component instructions
If you want to make own, we’re providing you our code solution. But you will need to recreate layout and and set selectors. You need to set add text element which will show feedback if users clicks on No button. Add text and add attribute data-verify=”message” to it.
We need also two buttons, one for Yes and one for No. Add two buttons and on Yes button please place attribute data-verify=”true” and on No button place data-verify=”false”.
And the last step is to add code block and place this code. You have 3 configuration options to customize like cookie duration, required age and feedback if user does not verify it has sufficient age to see content.
// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;
/*---------------------------------------*/
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = `${name}=${value}; ${expires}; path=/`;
}
document.querySelector('[data-verify="true"]').addEventListener("click", function(){
setCookie("age_verification_passed_hsx", "true", COOKIE_DURATION_IN_DAYS); // Set cookie for 30 days
location.reload();
})
document.querySelector('[data-verify="false"]').addEventListener("click", function(){
const textEl = document.querySelector('[data-verify="message"]');
if(textEl) textEl.textContent = INSUFFICENT_AGE_MESSAGE;
})
Legal disclaimer
This solution let’s you set age and cookie duration. It is pretty simple solution which is seen on many sites. But before implementing keep in mind to obey laws and rules of the countries where sites needs to operate. We provide this solution as it is. If you are not sure is this verification enough, we kindly advise you to check and consult around these compliance things with legal experts.
Lean. Clean. Machine.
Lean. Clean. Machine.
Lean. Clean. Machine.
This dropped on my mind when it comes to Copilot plugin. We could use it as slogan. Keep reading to find why.
Lean
Plugin produces lean code. We’ve strategic parts that we don’t give options to disable because some things need to work, if you ever drop some our design, you should not have ability to broke configuration. We’ve spent hours to make this bundle minimal, and if you are not happy we give dedicated panel to extend them, place custom values.
That strategic part is lean investment for the future, because any designer could make some designs based on this configuration and with over 600 our designs and every other made on using this default configuration could use them, everything could be globally controlled and only small strategic fraction of styles ensure this. That is why we call it Lean.
Clean
Code produced by our plugin is equal or better 99% of developers would write on their own. I’m doing personally silly things with CSS variables for years, and trust me it writes better code than I would. Sometimes I wish to spend some time and make plugin architecture that it could write own code.
Machine
We keep your back. As we have all data in the system we are try to find mistakes that you could make. We validate tons of data and give you feedback if we are pretty sure that you have made some mistake. When you are doing some misconfiguration we try to auto-heal and predict all mistakes that could be make. For example you want to override palette which has transparent shades with palette which does not have, this may result in broken interface, we do background check and heal configuration. We couldn’t catch all mistakes, but we’ve tried to predict every user mistake and place some sort of the strategy to help fix mistakes.
We care about doing fallback to improve browser compatibility.
We care that fonts should be defined in REM and respect user zoom settings. While pixel values kill that that we provide interface that let users to work in pixel as we know it is much more intuitive to many, and we do all the boring math behind so you don’t need to do that.
Making complex themes without checking contrast every time? Covered.
We try to care about boring stuff and put that on autopilot (better to say on Copilot) so you could do fun stuff. We’re lazy and we automate boring things.
We theme, like no other
Instead of explaining technical details. We’ll look real world scenario. We are building modern news site, and we want to theme it based categories. Let’s say we have news, sports, magazine, tech, and misc. Also we want to provide users dark and light mode so they could pick depending on the mood or their browser preference.
In order to do we could approach from two sides:
- Creating complex CSS rules
- Creating template for each
If we go with the first route, we’ll spend tons of resources to tweak all of that and keep up with accessibility as we have 10 color combinations to keep track.
Another approach would be to break that to 5 templates and each would support dark and light mode. By breaking this it will be initially easier to do, as it is much easier to think about styling in 2 dimensions than cover all 10 in one go. But this approach is mess in long run as we need to change 5 templates each time, and it works until it falls apart. If someone thinks that this second approach is stupid, we agree, but you would be astonished how many project are made on solutions like this and keep just making it as initially it was easier to develop and logic behind is crap. We all do that, probably this site that you are reading this article has some solutions like that also.
Or, or child could do it?
And final piece of the one more article that is up-selling you miracle. Of course we have made solution that could do it easily that is point. But see we have solution that we could explain this to child and let him create in 10 minutes.
Bonus
Imagine you want to give your client the option to add a page or pages to their site for a special occasion, such as a promotion, to enhance their site. Before taking any action, consider how you would approach this task and estimate how long it would take to complete.
Please watch this video and compare results. Lean. Clean. Machine
Headspin UI Copilot v1.3
Headspin UI Copilot v1.3
Headspin UI Copilot v1.3
We’re proud to announce new version of our Headspin UI Copilot plugin. Release video covers new Dynamic Theming feature with real world use-case demo.
Improved Fluid Workflow
We are stepping up the CSS fluid variables game by introducing Fluid Charts. With our initial version, we are exploring ways to illustrate fluid values so that users have a better understanding when tuning fluid settings. Our latest solution introduces Charts for data visualization. With this latest addition, you will see exactly how fluid values scale across various screen sizes.
And the best part is that Charts are integrated in every single fluid workflow inside plugin like:
- View-port settings
- Fluid Typography
- Fluid Spacing
- Fluid tokens
Improved Custom Palette Creation
We’ve done tons of tweaking to our custom color algorithm. Because of the our unique approach to colors we are unable to use equidistant color making as this would break our core color principles of the semantic color usage. In this round of polishing because of that we have created boundaries which will suggest you which starting colors are optimal for usage with our algorithm and will produce good results.
On other side we our algorithm logic is remade from ground up, we are doing three channel analysis in HSB color space and comparing that with all the colors inside Radix color system. After that we are generating color profile and blending custom palette based on profile and desired main color.
Inner working of algorithm is finding the closest color to Hue, the closest color based on Saturation and the closest Brightness. Once we have that we are calculation applying Hue rotation based rotation of the matching Hue color. And for Saturation and Brightness we use values from matching profiles.
Dynamic Theming (PRO)
We’re introducing unseen approach for site theming. Our unique approach to colors and architecture of the color system enabled us creating accessible color themes which could be swapped on the fly. This could be used to dynamic themes.
Imagine that you and your could style certain page based on custom field value, theme based on post category, tags and any CMS value. This could be used also from client side if you want provide them way to theme site, or you could define as static data attribute.
Best of all, it require zero coding. Works with dark and light mode. It takes one minute to setup.
Imagine scenario that you have five categories like news, sports, magazine, tech, misc and you want to theme posts based on dynamic category, and you want to support light and dark mode. You would need to be CSS mastermind to write that code, if you invent own system there is great chance that you would mess up contrast, and you would lose one day just to create this scenario. Compare that to 10 clicks one minute setup. This feature is aimed for advanced site theming, and it will pay for itself in one project.
Improve, Polish, Flourish
Aside from these main improvements and new features, we have been refining nearly every aspect that users have requested updates on. We fixed bugs related to copying custom color variables on double click and improved the custom typescale dropdown by transitioning it from an HTML select field to a custom dropdown component. In-app modals will now offer better focus as we have adjusted the backdrop with a subtle glass effect.
We made small organizational tweaks, placing viewport settings inside the Fluid folder under the Project panel. Additionally, we relocated the contrast algorithm settings to the Accessibility folder within the Project panel.
The appearance of the app should be more consistent now that we have unified the button group component within Advanced Typography and Advanced Spacing, replacing the older components.
We’ve noticed that often misstep when going from local to production happens resulting in leaving http as site URL and forcing https with server configuration. This results with broken looking website until this configuration is fixed. To solve this once for all, we’ve made special check which will compare URL from site configuration and URL from page that is loaded and catch this misconfiguration. If you make this mistake, you will get big error modal inside the plugin with detailed instructions where to go and fix issue.
Brandy template documentation
Brandy template documentation
Brandy template documentation
Requirements:
- Breakdance builder 2.1 and higher.
Go to Breakdance > Settings > Design library and add shareable URL that you got after downloading the file in your account
Now you have 2 options:
Import via Breakdance editor:
In Breakdance editor > Add > Library > Select Brandy template. Here you’ll find all the pages. But there aren’t templates so this method is INCOMPLETE.
Import via Full site import
Go to Breakdance > Design Library > Click on Brandy and import everything (pages, templates, posts..).
Important
Make sure to import Headspin copilot settings as well to everything is matching the demo.
How to get started real quick with Headspin
How to get started real quick with Headspin
How to get started real quick with Headspin
As Headspin offers CSS variables, you can use it in many ways. So far this is my favorite and fastest way how to get started.
- install and set colors I need in Copilot plugin
- sync colors so they will appear in Breakdance palette
- set font weights for text, headings via Global settings (BD)
- set font family via Global settings
-> start building website. In case I need some repetitive styles -> I will use presets and apply headspin css variables (e.g. –hfs-h3).
If I feel like the font sizes and spacings are too small -> I will go to Copilot plugin dashboard and change the ratio there.
Works in 95% cases, I am building mostly simple sites.
Slider Framework
Slider Framework
Slider Framework
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.
Getting Started
Slider framework architecture
It is important to understand following terms:
- Carousel
- Main Slider (master)
- Components
- Thumbnail slider (slave)
- Connected Sliders (slave)
1. Carousel
Special div which is uses as reference for all of the components. If you put components outside this div, they won’t work. Please check structure and locate element named 0. carousel this is where all magic happens.
2. Main Slider
Inside Carousel we could have multiple sliders in some configuration. Only one can act as master and other are slave sliders. This is important because master has bi-directional event connection to slave sliders, and slave sliders have uni-directional connection to Main slider. This slider has data-swiper=”main”custom attribute. If you have more than one slider with this attribute, the first slider in DOM will become master. All custom components needs to be inside Carousel and they will show progress data, and controls for the Main Slider.
If you add slave sliders, you should keep in mind that they should have same number of the slides as the Main or controls will correspond just to Main slider data and other slave sliders could show irrelevant content.
3. Components
Components are special block which are acting as custom controls for Main Slider. Some of them include functions like:
- Prev/Next navigation
- Play/Pause controls for autoplay
- Bullet navigation
- Fractional pagination
- Active teleport
- or could be combined in hybrid when placed in another div like fraction + bullet
4. Thumbnail slider
This slider functions as a slave slider. The content within this slider cannot be manually controlled; instead, it automatically extracts segments of content from the main slide. By setting data-swiper-thumbnail=”true” the content will be transferred into a thumbnail. The fallback option is a complete copy of the entire slide.
From a UX/A11Y perspective, this serves as a replacement for bullet or numbered navigation. Therefore, refrain from using those if you are already utilizing thumbnails.
5. Connected sliders
If you insert an additional slider within the Carousel div, it will function as a connected slider. Please ensure that it does not possess the data-swiper=”main” attribute, as there should only be one master slide. In the event of having two master sliders, the initial one will serve as the master, while the subsequent slider will act as the slave.
Components
We have different components which will work with Main slider based
Advanced slider setup
Setup docs for Advanced Slider
Post list setup
Coming soon: Setup docs for Dynamic Slider.
Components
Table – components overview
When you copy/paste Slider framework component, in structure panel you will see numbered elements. This table below explains each of them.
No | Name | Description |
---|---|---|
0 | Carousel | Carousel is a special div where magic happens. Everything here works when it is placed within the Carousel div. This is used to distinguish which controls should control which slider in case you are using more than one slider. |
0.1 | Skip link | This is link which is invisible until users enters Carousel by using keyboard. It will give users option to skip carousel and enhance accessibility. |
0.2 | Framework API | Main code which enables all the magic. Don’t remove it or move outside Carousel div [0]. |
0.3 | Main slider | All controls are connected to this slider |
0.4 | Thumb slider | Secondary slider which teleports all elements from Main Slider [0.3] or you could select manually content to teleport by using attribute data-swiper=”teleport” |
ELEMENTS | ||
1 | Controls | |
1.1 | Next/Prev controls | Buttons that are switching to next or previous slide |
1.2 | Pause/Play controls | Buttons that control slider autoplay. If you’re using autoplay, you should incorporate them in the design. |
2 | Pagination | |
2.1 2.2 | Numbered pagination | Gives an indicator of the active slide and also provides the option to switch slides. |
2.3 2.4 | Steps pagination | Gives indication about the current slide and where it is placed among all slides. |
3 | Indicators | |
3.1 3.2 | Fraction Indicator | Non-interactive element. Gives feedback about the current slide and the count of slides. |
3.3 | Progress indicator | Non-interactive element. Gives feedback about the % of slides from the total count of slides. |
4 | Autoplay elements | |
4.1 | Autoplay duration circular progress bar | Gives feedback on how much time is left until autoplay switches to new slide |
4.2 | Autoplay duration circular progress bar with textual feedback in seconds | Gives feedback on how much time is left until autoplay switches to new slide |
4.3 | Autoplay duration textual feedback in seconds | Gives feedback on how much time is left until autoplay switches to new slide |
4.4 | Next/Prev slide controls with autoplay progress bar | – Buttons that are switching to next or previous slide – Gives feedback on how much time is left until autoplay switches to new slide |
4.5 | Autoplay duration progress bar | Gives feedback on how much time is left until autoplay switches to new slide |
4.6 | Fraction indicator with autoplay duration progress bar | – Non-interactive element. Gives feedback about the current slide and the count of slides. – Gives feedback on how much time is left until autoplay switches to new slide |
4.7 | Steps navigation with autoplay duration circular progress bar | – Gives indication about the current slide and where it is placed among all slides. – Gives feedback on how much time is left until autoplay switches to new slide |
4.8 | Pause/Play controls with autoplay duration circular progress bar | – Buttons that control slider autoplay. If you’re using autoplay, you should incorporate them in the design. – Gives feedback on how much time is left until autoplay switches to new slide |
Style guide
When you copy/paste Slider framework component, in structure panel you will see numbered elements. This table below explains each of them.
Next/Prev controls [1.1]
Style them as you would normally style buttons in Breakdance.
Pause/Play controls [1.2]
Style them as you would normally style buttons in Breakdance.
Numbered pagination [2.1, 2.2, 2.3, 2.4]
This element is dynamically made so you need to style it under Advanced > Custom CSS. We have prepared.
There are 3 comments explaining which styles it affect:
- Active – styles related to active slider
- Focus – style related to focus state
- Default – style applied to all elements
Fractional indicator [3.1, 3.2]
Style them as you would normally style text elements in Breakdance.
Progress indicator [3.3]
There are 2 comments explaining which styles it affect:
- Progress bar styles
- Track under progress bar styles
Circular autoplay progress [4.1]
There are 2 comments explaining which styles it affect:
- Circular progress bar styles
- Size styles (max-width)
Circular autoplay progress with countdown [4.2]
Countdown element you should style as you would any text element
There are 2 comments explaining which styles it affect for circular progress:
- Circular progress bar styles
- Size styles (max-width)
Circular autoplay progress with countdown [4.3]
Countdown element you should style as you would any text element.
Next/Prev buttons with circular progress [4.4]
Style them as you would normally style buttons in Breakdance.
Circular progress element you style with Custom CSS, there is one comment which points where you could change color. Style stroke to adjust.
Autoplay progress line [4.5]
There are 2 comments explaining which styles it affect:
- Progress bar styles
- Track under progress bar styles
Fraction indicators with autoplay progress line [4.6]
Style fraction elements as you would style Breakdance text element
There are 2 comments explaining which styles it affect:
- Progress bar styles
- Track under progress bar styles
Dot navigation with circular autoplay progress [4.7]
There are 4 comments explaining which styles it affect:
- Active dot style
- Progress color
- Focus dot styles
- Default dot styles (applies to all dots, active and focus override it)
Pause/Play buttons with circular progress [4.8]
Style them as you would normally style buttons in Breakdance.
Circular progress element you style with Custom CSS, there is one comment which points where you could change color. Style stroke to adjust.
Magics
Magic attributes
Magic attributes
Magics within the Slider Framework are unique custom attributes that transform Breakdance elements into Slider functionalities. These include displaying the number of the current slide, the total count of all slides, an autoplay countdown, and features such as pausing and playing autoplay.
Attribute | Element | Description |
---|---|---|
data-swiper=”currentSlideNum” | Text | This magic attribute will convert any text element to show current slide number on any text element. |
data-swiper=”countSlideNum” | Text | This magic attribute will convert any text element to show total slide number. |
data-swiper-autoplay=”countdown” | Text | This magic attribute will convert any text element to show autoplay slide time left. It will count down each second. |
data-swiper=”stop” | Button | This magic attribute will convert any button element to act as autoplay pause button. |
data-swiper=”start” | Button | This magic attribute will convert any button element to act as autoplay play button. |
Events
Additional events
Accessibility
Overview – todo
dasd
UX Guidlines
0. Avoid sliders
Sliders are notoriously bad for UX and A11Y. If you could use alternative design, please consider this. If you really want or need to use them please take points below to make it less sucking UX for users.
1. Use bigger dots, or even thumbnails
Usually slider dots are small and hard to click. Clickable area should be at least 24×24 pixels.
2. Alternatives to dots navigation
As alternative approach you could use thumbnail component for navigation instead just dots. Dots don’t provide much information. Also you could use number page navigation instead of dots (bullets) which would at least give more clue about slide numbers.
3. Use only one pagination pattern
Within Slide Framework there are many pagination patterns (bullets-dots, numbers, fraction, and thumbnail). We recommend usage of only one pattern as using dots and thumbnails would make usage of two element with same purpose and lead to harder navigation. Fraction pagination is only exception because it does not offer navigation option, rather just visual indication.
4. Avoid autoplay
Autoplay/autorotation sliders are notoriously hard to use avoid them if you can. If you need autoplay please consider this list:
- Autoplay duration should be at least 5-7s to give users enough time
- Pause button is must, and should be placed above slider in HTML order, if you need it at another position use CSS. Before entering autorotation slider, user should have option to pause it for easier navigation.
- Place next/previous arrows below slider at mobile because this way user interacting with slider will not cover slides by hand in order to navigate. Tip: You could use two sets of elements, and display: none to hide desktop arrows on mobile, and show mobile ones below at smaller screens
- Pause on interaction – when user hovers or interacts with slider, you should pause autoplay as probably he wants to interact and autoplay could move desired content to interact off visible portion of the screen
Autoplay
Autoplay/autorotation sliders are notoriously hard to use avoid them if you can. If you need autoplay please consider this list:
Pause on interaction – when user hovers or interacts with slider, you should pause autoplay as probably he wants to interact and autoplay could move desired content to interact off visible portion of the screen
Autoplay duration should be at least 5-7s to give users enough time
Pause button is must, and should be placed above slider in HTML order, if you need it at another position use CSS. Before entering autorotation slider, user should have option to pause it for easier navigation.
Place next/previous arrows below slider at mobile because this way user interacting with slider will not cover slides by hand in order to navigate. Tip: You could use two sets of elements, and display: none to hide desktop arrows on mobile, and show mobile ones below at smaller screens
Bullet navigation – todo
dasd
Pause/Play Controls – todo
dasd
Previous/Next Controls – todo
dasd
Examples
Autoplay
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();
Dynamic Tabs
Dynamic Tabs
Dynamic Tabs
An a11y-friendly Dynamic Tabs component is designed to be accessible and responsive, providing 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, appropriate ARIA roles and attributes, and proper focus management, making navigation easy for all users, including those using assistive technologies.
Getting started
Post loop setup
In the video below, we are demonstrating setup of using dynamic tabs loop component with custom posts, and fields made in ACF.
Repeater setup
Video:
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
Style presets
Tabs style preset
You should see attribute data-tab-preset under element named Dynamic Tabs – config.
Attribute name | Value |
---|---|
data-tab-preset | tabs |
pills | |
bar | |
dot |
Accordion styles preset
You should see attribute data-accordion-preset under element named Dynamic Tabs – config.
Values:
Attribute name | Value |
---|---|
data-accordion-preset | classic |
pill | |
bordered |
Style modification
This is aimed to make direct code modification to our styles. Because this is hybrid component, you could not style it with native elements as HTML markup is made on the fly by using JavaScript so it could support Tabs, Dropdown and Accordion options. In the code you will se comments with enumeration and table below explains what is code responsible for. Use this table as guide to find desired styles that need modification.
Please check style preset section which shows no-code styling option, you may not need custom code or if you pick some preset which matches desired design, or you will need less modification.
No | Description of applied styles |
---|---|
1.1 | Tabs focus styles. Styles applied when tab navigation item is focused, and styles when content is focused. |
1.2 | Tabs navigation wrapper container styles. Div that holds tabs navigation items. |
1.3 | Tabs dot preset styles. Conditional styles when dot preset is chosen. |
1.4 | Tabs pills preset styles. Conditional styles when pills preset is chosen. |
1.5 | Tabs tabs preset styles. Conditional styles when tabs preset is chosen. |
1.6 | Tabs bar preset styles. Conditional styles when bar preset is chosen. |
2.1 | Accordion icons styles |
2.2 | Accordion button to expand styles |
2.3 | Accordion classic preset styles. Conditional styles when classic preset is chosen. |
2.4 | Accordion pill preset styles. Conditional styles when pill preset is chosen. |
2.5 | Accordion bordered preset styles. Conditional styles when bordered preset is chosen. |
3.1 | Dropdown (select) base styles |
3.2 | Dropdown (select) hover styles |
4.1 | Functionality rules, do not modify as it may lead to broken things |
Responsive options
Responsive type
You should see attribute data-responsive-type under element named Dynamic Tabs – config.
Values: Tabs, Accordion, Dropdown
Responsive screen size
You should see attribute data-responsive-px under element named Dynamic Tabs – config.
Values: Integer number (100, 360, 500 etc.)
This will tell when you want to switch from Tabs view to Accordion or Dropdown view.
Advanced styling
Tabs – custom CSS
In order to make advanced design modification of tabs you could you use following selectors:
Element | CSS target |
---|---|
Navigation wrapper | .hs-nav-container.hs-nav-container [role=”tablist”]{} |
Navigation item (default state) | .hs-nav-container .hs-tablink[aria-selected=”true”] [data-tab=”tabnav”]{} |
Navigation item (hover state) | .hs-nav-container .hs-tablink:hover, .hs-nav-container .hs-tablink [data-tab=”tabnav”]:focus-within{} |
Navigation item (active state) | .hs-nav-container .hs-tablink[aria-selected=”true”] [data-tab=”tabnav”]{} |
Navigation Underline (active & hover state) | .hs-nav-container .hs-tablink [data-tab=”tabnav”]:hover:after, .hs-nav-container .hs-tablink [aria-selected=”true”] [data-tab=”tabnav”]:after{} |
Accordion – custom CSS
Customizing Icons
You should see attribute data-accordion-icon under element named Dynamic Tabs – config.
Values: open-and-closed | openclosed
open-and-closed value will use two separate icons for open and closed accordion state like + and -.
openclosed value will use single icon for example chevron (>) which gets rotated.
In order to customize accordion you could use following selectors:
Element | CSS target |
---|---|
Accordion button trigger (default state) | .hs-accordion-button.hs-accordion-button{} |
Accordion button trigger (hover & focus state) | .hs-accordion-button.hs-accordion-button:hover,.hs-accordion-button.hs-accordion-button:focus-within{} |
Accordion button trigger (expanded state) | .hs-accordion-button.hs-accordion-button[aria-expanded=”true”]{} |
Dropdown – custom CSS
In order to customize dropdown you could use following selectors:
Element | CSS target |
---|---|
Select element | .hs-nav-select.hs-nav-select{} |
Custom view styles hooks
In order to target elements under certain view you could use data-hsview attribute as style hook:
View | CSS target |
---|---|
Tabs | [data-hsview=”tabs”] .my-custom-selector{} |
Accordion | [data-hsview=”accordion”] .my-custom-selector{} |
Dropdown | [data-hsview=”dropdown”] .my-custom-selector{} |
Accessibility
Tabs
Tab navigation markup
<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>
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
tablist | div | The tablist role identifies the element that serves as the container for a set of tabs. The tab content are referred to as tabpanel elements. | |
tab | button | The ARIA tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel. | |
aria-selected=”true” | button | Selected button will tell screen reader it is selected by using aria-selected=”true” | |
tabindex=”-1″ | button | Buttons that are not selected will have negative tabindex to exclude them from tabbing because tab should lead to first focus-able element inside tabpanel. And switching tabs will be done with JavaScript which will listen for ArrowLeft and ArrowRight. | |
aria-controls=”TCID” | button | The global aria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set. | |
id=”NID” | button | ||
tabpanel | div | The tabpanel role indicates the element is a container for the resources associated with a tab role, where each tab is contained in a tablist . | |
aria-labelledby=”NID” | div | The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to. | |
id=”TCID” |
Keyboard navigation
We are busting navigation with TAB key so user would not go through tab navigation, and would lead him to tab content. Switching tabs is done with keyboard arrow keys. There are two modes of activation:
- automatic
- manual
In automatic activation mode, after pressing arrow keys it will change tabs instantly without need to confirm choice to switch by pressing enter/tab key.
Tabbing through content
When user moves around content, and gets to last focus-able element in tab content, next TAB key press should lead to opening next tab, and vice versa with SHIFT + TAB.
Accordion
Code below is showing simplified markup of Accordion responsive view.
<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>
Keyboard navigation
Key | Function |
---|---|
Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Tab | Moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence. |
Shift + Tab | Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page Tab sequence. |
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
h3 * | *Heading level is automatically picked up by script which check surrounding content, fallback to script is h3. Element that serves as an accordion header. Each accordion header element contains a button that controls the visibility of its content panel. The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading. | ||
aria-expanded="true" | button | Set to true when the Accordion panel is expanded, otherwise set to false . | |
aria-controls="ID" | div | Points to the ID of the panel which the header controls. | |
region | div | Creates a landmark region that contains the currently expanded accordion panel. | |
aria-labelledby="IDREF" | div | Defines the accessible name for the region element.References the accordion header button that expands and collapses the region. region elements are required to have an accessible name to be identified as a landmark. |
Dropdown
Dropdown uses same structure as Tabs, just navigation is replaced with dropdown. Semantics are enhanced with aria-label to tell screen readers that dropdown is related to Content Tabs.
Keyboard Naviagation
Key | Function |
---|---|
Space | When focus is on the unopened dropdown (HTML select element) Space key will open dropdown. |
Enter | When dropdown is open, Enter key will select dropdown option item and close dropdown. |
ArrowUp and ArrowDown | When dropdown is open, ArrowUp and ArrowDown key will move selection to next/previous option item. |
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Whiskey template documentation
Whiskey template documentation
Whiskey template documentation
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:
- 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”.
- 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.
- 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.