Dynamic Lightbox Classic

We’re excited to introduce completely re-invented concept of the Context Menu or better to say Context Menu v2. Initial version served us and our users really well, but with recent new features in the Copilot, initial version was limited and could not support all things were present in Copilot like custom tokens.

Features overview

• Organize in Collections, Groups and Tokens
• Support for colors (solid and transparent)
• Light/dark mode switcher
• Support for Custom CSS
• Context aware color representation
• Real-time updates
• Smart suggestions

Following Collection, Group, Token standard as organizational units.

Just like in the main application, we have incorporated the same organizational units here, called Collections (icons on the left). Groups are represented in an accordion fashion, and tokens are presented in button form.

Smart suggestions

In order to provide the best experience, we have implemented suggestion filtering. So instead showing everything we’ll try to find exactly values which you may want to use for example if you do right click on color input, we’re going to suggest colors, if you want to edit gap, margin, padding we’ll suggest spacing variables. So while we have added bunch more data in one-click fashion via context menu, it will be even more intuitive to use than previous v1 because it won’t just show everything.

Full support for colors

Every color that is handled via Headspin will be available via context menu. This includes color palettes, but also color tokens.

Supporting custom CSS

Many users, including ourselves, like to use custom CSS from time to time. Writing out all of our variables can sometimes be frustrating, as you also need to remember naming conventions and other details like that. With the new version of the context menu, you will have the option to simply right-click and change any text there as well.

Support for transparent variants

Color palettes that support transparent variants will have shift key symbol indicating that by pressing shift it will show transparent shades.

Furthermore, we have taken an additional step by incorporating a context-aware transparent shading technique. The challenge with transparent colors is that they rely on the background and how they blend with it. To address this issue, we have integrated a dynamic site background calculation technique to blend them accurately, providing you with the best possible preview when selecting your shades.

Real-time updates

As you work in the Copilot app all changes will be reflected to every opened fronted tab and editor tab. So any changes done in main application will be instantly reflected:

• Frontend
• Page Builder
• Context Menu data

The devil is in the detail

While all of these alone take effort to make, we strongly believe in pushing boundaries how tools could be made. For example CSS variables are dynamic by nature and their value could be redefined (examples of this are dark/light mode, theming, local scoping). We’ve implemented mechanism to find their value at the moment when you apply them so they are fully context aware and will give 100% accurate preview of the values.

We took it a step further by incorporating a context-aware transparent shading technique. The issue with transparent colors is that they depend on the background and how they blend with it. We have implemented a dynamic site background calculation technique to blend them accurately, ensuring you have the best possible preview when choosing your shades.

What is Component Madness? Component Madness is once in a year event from HeadspinUI team. It features 7-day in row releasing various solutions in form of the Components.

2024 Lineup

Day #7: Sub-navigation

Take your navigation game to the next level with the Sub-navigation Component! This powerful tool brings animated secondary navigation to your Breakdance Builder projects, highlighting the active section in view for a smooth and engaging user experience.

Variant 1: Magnetic Sub-navigation

Variant 2: Island Sub-navigation

Day #6: Animated Stacking Cards

Discover the power of the Animated Stacking Cards component in Breakdance Builder! Create visually stunning card layouts with smooth stacking and scaling animations that bring your designs to life. Perfect for showcasing portfolios, testimonials, and feature proposition.

Day #5: Morphing Tabs

Explore the innovative Morphing Tabs component in Breakdance Builder! This feature-rich component transforms traditional tabs into dynamic, interactive elements with smooth morphing animations. Perfect for showcasing content in a sleek and organized manner, Morphing Tabs enhance user experience and visual appeal.

Day #4: Grid Switcher

Discover the powerful Grid Switcher component in Breakdance Builder! This dynamic button group allows users to effortlessly toggle between grid view and list view, making it perfect for showcasing products, portfolios, blog posts, or any content that benefits from multiple layout options.

In this video, we’ll guide you through setting up and customizing the Grid Switcher component to fit your design needs, ensuring seamless functionality and a polished user experience.

Day #3: Hotspot

Add interactive, customizable hotspots to your web designs with the Hotspot component in Breakdance Builder! Perfect for creating engaging product showcases.

Whether you’re highlighting product features, guiding users through a visual journey, or adding a creative touch to your designs, the Hotspot component gives you endless possibilities!

Day #2: Skip Link

Skip links are hidden navigation links that allow users, especially those using keyboards or assistive technologies, to bypass repetitive content (like headers or menus) and jump directly to the main content of a webpage. They improve accessibility and streamline navigation for better user experiences. You could use this component to implement skip to main content, and skip to footer links.

Day #1: Age Verification

Opening Component for this year is Age Verification. Solution seen on many adult, alcohol and tobacco sites which requires user to verify their age before seeing site content. It comes in three variants which are common to see, it uses native Breakdance elements, and Popup template to achieve goals.

Before release we had beta testing with some members, and we have found that cache could make problems with popups and server side cookie check. Because of that we’ve iterated to perform checking logic client side so it could be fully cached.

Variant 1: Year input

Component you could find here, and video below explains setup in Breakdance Builder.

Variant 2: Date inputs

Component you could find here, and video below explains setup in Breakdance Builder.

Variant 3: Yes/No buttons

Component you could find here, and video below explains setup in Breakdance Builder.

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.

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 doing this, we need to make our popup design.

Breakdance age verification configuration

To recap, we’ve created popup, added Location rule. Now we need to open created popup, and style it. We need to style it to cover whole screen, and disable closing options because only if user verified age popup should close.

// 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}`;

// 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}`;

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Testing tips

While you are playing with this you should know how to remove cookie. Because you may want multiple times to test, and because your login also relies on cookie so if you remove all of them you will be logged out each time.

Method 1: Please just use browser dev tools it is easy. You could open them with right click + inspect. When they open find Storage tab and click on it. There you will see Cookie section, click on it and find “age_verification_passed_hsx” cookie. Right click on that cookie and it will delete just that cookie.

After doing this reload browser tab to see changes.

Method 2: Another way is to open browser console and drop this small code:

document.cookie = "age_verification_passed_hsx=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
window.location.reload();

Client vs Server side protection

These examples demonstrates client side popup implementation. As these are not the some big security measures and easiest way to cheat this is entering just wrong age. Because this alone is not some rocket science protection so keep in mind that technical user could just go to inspector tools and remove this lock. But we think it is easier for 99% visitor to enter wrong age and bypass this than going to developer tools.

Slightly stronger protection would be setting up this as templates, but you may need also hide header and footer templates. Also we advise you to turn off caching fully if you are using server side approach as caching will break template logic because verified user could cache page which will bypass PHP conditions completely.

Do it on your own (server side setup)

If you opt for this below we are giving below setup instructions how you could do it like described below (NOTE: we don’t provide support for this as it will be tons of tickets related to cache problems as user would still want to cache, and page caching should be fully off)

Custom PHP condition code (1)

return !isset($_COOKIE['age_verification_passed_hsx']);

Make new custom template, set location to Everywhere. For condition we’re going to check cookie by custom PHP so add that condition and click Open PHP Editor.

In PHP Editor paste code that we’ve provided.

For priority there isn’t some magical number, it should be greater than any other templates so we’ve used 2000. Only important note here it should be higher than any other template. In Template paste just component code which will set cookie.

For Header/Footer we may also want to hide them as they could have some data which should not be shown to user so create just Header, Footer with no content and do the same settings for them. This will just load empty Header/Footer for non-verified users.

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.

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

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.

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.

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.

1. install and set colors I need in Copilot plugin
2. sync colors so they will appear in Breakdance palette
3. set font weights for text, headings via Global settings (BD)
4. 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.

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.

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();