v2.0 beta

Unbreakable Framework

A custom-built 'Brand Framework' by FCD.

Styles

Components

Layouts

Introduction

Unbreakable started in 2020 due to FCDs growing need of a consistent, always up-to-date, always improving library of re-usable website assets.

Unbreakable 1.0 (formerly known as START:Sites) launched with a series of basic website templates created between 2020-2022 with the offical 1.0 release being production ready in November 2022.

With a further 4 years of continued development thanks to clients willing to take on bigger projects, Webflow's new Component rework in 2024 and Webflow adding better a Build mode in 2026 - Unbreakable 2.0 BETA launched in August 2026.

This latest v2.0 release features a complete design translation re-work between Figma and Webflow, browser colour theme support (dark / light / system), automatic HEX colours swatches (*aka 'Brand System') powered by a Figma variable mode export, scalable UI, and a component-first approach.

Unbreakable 2.0 is the future

Credits

Reece Chan

Developer responsible for the behind-the-scenes, logic-based code (e.g. data posted, sliders, and more).

MAST Framework

Ideas were borrowed from MAST but heavily adapted. Mainly the simplicity of the frameworks layout were borrowed.

Lumos

FCD used Lumos's approach to accessibility and referenced how component variants were setup. Accessibility remains a big ongoing improvement.

AI-transparency

Gemini AI was used to create scripts like 'Brand System', 'GSAP Hide Navigation' and 'Theme Switcher'. Full code understanding before a commit to GitHub was required with extensive testing before production.

Past Projects

Thanks to FCDs committed clients, Unbreakable wouldn't be where it is today. Without them, we would have never had the opportunity to build a robust framework and Brand System.

We will never publish Unbreakable for anyone to use. It remains part of the service we provide to clients. Book a call to discuss your next project.

Class Naming

Use cc- for style changes.
Use u- for format changes and utility classes.
Containers are named like container_XXrem with width-XXrem combo classes.
Spacers are named like spacer_XXem and used sparingly.
Utility margin and padding classes should be used (e.g. u-mb-medium) wherever possible.
Sizes should be rem values except for icons / SVG elements which should be em values. This is to support breakpoint size adjustments using the font-size.

Change-log

To track ongoing improvements or known issues, please refer to Notion. There will be bugs and component related issues due to the ongoing v2.0 work (hence 'beta').

v2.0.0 beta

Due to how much has change in v2.0 of Unbreakable, tracking every change will make this list massive. Only important changes have been noted down. When v2.0 is released, the change-log will be accurate.

New design style and 'Unbreakable' branding.
Updated Wizardry Hybrid System is v2.5.x with comments to help translation. Requires rem values.
Added variable support within .section_global and .container_global (formerly known as .global-div)
Relaced 'Fixel' font with 'system-ui' font.
Added font-family variables with Global CSS loaded from Bunny Fonts. These replace Webflow variables:
- --font-family--base-font
- --font-family--secondary-font
- --font-family--ui-font:
- --font-family--code-font
Added margin and padding utility CSS.
Added 'FCD Brand System' with these features:
- Automatic colour swatch library (uses two JSON files exported from Figma) (mode switcher pending).
- Copy / Download SVG / PNG logo context menu (right click logo in top left).
Added quick-links to the top of the Style Guide page designed for client use.
Added full site-wide dark mode support (powered by FCD Theme Switcher 1.x.x).
Added smart link CSS to control button arrows.
Added .layout_flex and various layout class.
Added Button component (3 variants + class override to sizing).
Added Badge component.
Added Image component.
Rebuilt Hero component (added button slot and media slot).
Rebuilt the Card component for added flexibility (button slot and media slot).
Converted .site_notice into Copy URL - Error and Copy URL - Success components.
Converted the page sharing options to a component: Social Share.
Cleaned up layout and headings / para styles within the Style Guide.
Updated social icons in all components.
Revised how notices work - you now have .notice with combo classes of .cc-warning and .cc-success

pre v2.0 release notes

v1.8.5

Added 'Maintenance' page to support WordPress maintenance.php added to /wp-content directory.
Revised some styling.
Fixed .modal CSS incorrect use of the display property.
Fixed tiny-mighty-button CSS from leaking and conflicting (hidden HTML embed).
Changed default upload font to 'Fixel' by macpaw.
Added Primary, Secondary and Tertiary font variable.
- Integrated Bunny Fonts (self-hosted fonts remain unchanged).
Revised the <ul> and <ol> CSS to support Finsweet Attributes TOC.

v1.8.4

Ported <body> modal CSS from StackGuardian.
Ported Wizardry 2.4 from StackGuardian.
Hotfix removal of <select> dropdown icon CSS designed to remove the default browser icon in favour of your own (custom icon missing).

v1.8.3

Added Vimeo / YouTube video Component Block.
Added dialog-polyfill JS and CSS for backward compatible <modal> <dialog> behaviour.
- Added CSS override property to allow <dialog> to be fixed in position,
Improved open-modal.js by allowing a secondary button to close the dialogue. Class required: .modal_close-secondary

v1.8.2

Added Animista animations in CSS Animations.
Added instance of ChartJS into Style Guide.
Added instance of Bokeh (Experimental) into Style Guide.
Added new script on Style Guide that gets the value of the background-color in the colour swatch blocks and displays them. Displayed hex code can now be copied.
- Currently works for colour swatches above neutrals (does not work for neutrals and support muted – possibly due to tints and muted colours).

v1.8.1

Added CSS Animations.
Added Animate.css classes.
- Added example animations from Animate.css
Created .u-post-date-ago — displays how long a post was created, published or updated in hours; days; weeks; months; or years ago.
Added TippyJS tooltip in Style Guide.
Added CSS Accordion footer links in Footer Extended (V2) component for mobile.
Added Tiny Mighty Buttons examples into Style Guide (Experimental).
Added Basic Swiper Instance and Basic Swiper [Slide Only] components.

v1.8

Added custom CSS for .page_rt and its combo classes.
- Added custom bulletpoints for combo class of .cc-custom-list.
- Added SVG arrow in text links with attribute of target="_blank".
Added copy hex code to all colour swatches.
Updated nav menu button styles and interaction tweaks.
- Set .menu__icon-top and .menu__icon-bottom to match sizes on rollover effect (75% width).
- Nav menu recolour and dropdown spacing adjustments.
Added HTML embed for SVG loader behind image in .hero_img-height-hold (sourced from LDRS).
Added Toastify button in Style Guide with ID #toastify-btn. Script located in page settings.
Added 'Return to START' link in all footers to 'Get Started' page. (Can return to style guide from sample pages in live/preview).
Added Finsweet Attributes to social share links in page.php and Brand pages.
Added General Sections in Components.

v1.7.7

Added CSS accordion component using <details> and <summary>.
Added .master-button and .master-button .cc-secondary-button as components within Style Guide.
Added a copy hex code button to the primary swatch (pending all swatches).
Create central hero component.
Fixed CSS for the noise overlay effect.
Fixed CSS for <ol> sizing.

v1.7.6b

Changed modal close button to float: right; and positioned first within the modal for better accessibility.

v1.7.6

Native support for color-mix(in srgb, var(--_themes---colours--neutral-1) 10%, transparent); within variables thanks to Webflow adding custom support.

v1.7.5a

Changed noise overlay so it's half the size background-size: 50% auto;

v1.7.4

Removed button-holder and button-holder_OLD in favour of btn-hold.
Updated padding modifier classes with "u-" prefix (global-section no-pad-top updated to u-no-pad-top).
Removed other master button classes (master-button-3 and master-button-4).
Fixed FCD credit hover animation.

v1.7.3

Added HTML comments to custom scripts to make identifying them easier.

v1.7.2

Updated structural CSS to WIZARDRY 2.3 Hybrid Design System. This aims to improve scaling on laptop devices.
Fixed GH link for copy url script.

v1.7.1

Added Bluesky social icon to the footer components.
Added 2 alternative blog layouts based on page.php template and ESPROFILER.
Tweaked blog page CSS.

v1.7 (release)

Introduced auto-tints for neutrals. This reduces the neutral variables to only 2 with custom CSS to create tints.
Added card component to the blog, replacing previous version.
Button clean-ups.
Fixed duplicate IDs on 'Style Guide' page.
Fixed CSS issues within Global Code introduced when variables were changed.
Added 2 card designs to 'Components' page.
Added <dialog> HTML modal support (requires fcd-open-modal.js v1.0.7 from GH).
Added class helpers to some elements on 'Style Guide' page.
Added u-medium for buttons.
Added Utility Classes on 'Style Guide' to prevent style clean-up from deleting and for easier reference.
New quick links above.
Cleaned up styles on 'Style Guide'.
Button clean-ups.
Added u-medium for buttons.
Added .style_container and .style_container.u-with-border to show elements clearer.
Added 'Components' page and moved WF components to there.
Added accordions to 'Components' page.
Added a secondary sample form (thanks, Mast Framework).
Renamed 'HTML Components' to 'UI/UX'.

v1.6.1

Added conditional visibility to footer-extended-op2 for menu links, policy links and social media icons.
- Added a footer to this page.
Re-structured colours on Style Guide to Brand, Neutrals, Muted Neutrals Support, Muted Support.

v1.6

Added alternative ::selection CSS.
Variable support v0.1 (by Reece Chan). Expect bugs.
Added secondary font-family of 'Staatliches'.
Re-jigged the layout on Style Guide so typography is first.
Integrated the version number within the logo.
Removed the sidebar from this page.
Removed 'Looking for the Style Guide?' CTA on this page.
Version number now a component for universal changing.

v1.5.4c

Changed ::selection background colour.
Replaced close icon in dismissible-notice-bar to <svg>.

‍

v1.5.4b

Fixed missing field names for the hidden UTM inputs.

‍

v1.5.4

Added Cloudflare Turnstile integration. DNS must be with Cloudflare and published on the domain to work.
Split the form section of Style Guide into sections: Sample, Tracking, Cloudflare Turnstile.

v1.5.3

Moved the changelog to the home page (Welcome page).
Changed the content of the hero on the home page (Welcome page), including the anchor button.
Added fcd-utm-hidden-fields.js
Added fcd-capture-page-url.js

v1.5.2

Added .swiper-button-lock CSS with default property of display: none;
Added 4 loader SVGs within the media, pure black and pure white in 2 styles.
Created .nav_top-banner as a component.
Created better documentation for the custom CSS cursor to highlight that it is CSS only + bugs.
Fixed an issue with CSS styling on this page where .css-selector.cc-code was being used incorrectly.
Split cursor CSS into it's own wf-cursor-css embed.
Split global-code wf-css embed into sections: Structural CSS, Setup CSS and Global Styles.
Cleaned up a bunch of CSS on the sample pages.
CSS change for the accordion on page.php.
Removed images and replaced with placeholder on the sample pages (except for team profiles).
Removed icons for embedded SVGs instead of of <img>

v1.5.1

Reverted the 'made with love by FCD' link parameter back to /?ref=
Updated GSAP navbar so it is ID based instead of class based:
- #navbar-default-trigger will remove .u-nav-filled from .navbar
- #navbar-trigger will add .u-nav-filled to .navbar

v1.5

Changed radius of .global-section.style__global-section to match .style_container
Added a custom cursor powered by GSAP. CSS added to global-code component. JS added to site settings. Required cursor HTML added to global-code component.
CSS tweaks.

‍

v1.4.5c

Various CSS refinements as MyBYC was built.
Added YouTube social icon in the footer.

‍

v1.4.5b

Replaced copy-url.js with v1.0.2 that uses classes instead of IDs. This prevents the IDs dropping when copying and prevents conflicting / bugs when the querySelector fails to find the elements. Code can be previewed on GH.

‍

v1.4.5

Added <meta> to <head> to prevent iOS zoom on input fields.
Added var(--sizes--base-value); used for <p> and <ul> items (anywhere the standard value is needed).
Added .w-richtext > ul {font-size: var(--sizes--base-value);} to support nested lists.
- Removed ul font-size to favour this method.
- Added padding-top and reduced margin-bottom.
  - this nesting feature
    - goes on
      - and on
        surprised to see Webflow add this
        when WordPress has had it for YEARS.
        anyway...

v1.4.4

Removed Webflow IX for fs-cc-prefs_component in favour o GSAP code. Verified as working 14/10/2024.
Fixed z-index positioning for cookie consent preference box.
Removed duplicate "accept all" button on cookie consent preference box.
Removed some duplicate CSS styles (ongoing improvement).
Added a new site-wide navigation banner that can be hidden by the user (Webflow IX based).

v1.4.3

Renamed project from 'START: Styleguide' to 'START: Template Base'.
Allowed system notices to be visible on Styleguide (used for copy url).
Fixed WF variables for white: var(--colours--white).

v1.4.2

Add .notice_warning to the collection of notices.
Restyle .notice_general to be a general notice instead of a warning.
Removed StackGuardian URL ref for the privacy links (within footer).
Renamed menu__li 2 to menu__li-small

v1.4.1

Renamed 'Default Page' to 'page.php and changed the slug from 'default-page' to 'page'

v1.4

Removed the year from the version numbering. The use of the year can be used to mark milestones.
Grouped variables - Colours and Colours/Support.
Rebranded to START:Sites (formerly gridhost).
New 'Get Started' page (formerly the 'Welcome' page).

v1.3 (2024)

Version naming change from 'WIZ' to 'YEAR' - e.g. v1.3 (2024).
Added the latest default page layout from Medicann. Cleaner and more streamlined.
Added alternative footer-extended component.
Added ?utm_source= parameter to FCD credit link (?ref= is incorrect).
Added read timer JS (https://cdn.jsdelivr.net/gh/First-Class-Design/public-scripts/scripts/read-timer.js).
Added accordion options to FS-CC to explain categories, thanks to Saddle Framework.
Added FS-CC to it's own component and placed it within the navbar component.
Updated the global CSS wizardry base value to v2.2.
Updated the footer policy link layout, copyright date and FCD credit.
Updated the FS-CC with inline CSS and JS embeds for cleaner copying.
Updated FS-CC popup with GSAP powered version.
Updated social links with the newest logos (Facebook / X / TikTok).
Updated OWL JS to SwiperJS (Testimonials on Sample: Home and Other Articles on CMS Blog Template).
Fixed a CSS issue where the :before pseudo element on <body> caused overflow to not work on FS-CC
Misc: Re-branded some components to gridhost as we migrate away from CleanME.

‍

v1.2WIZ

Pre-changelog