Legacy Notes
TERMINOLOGY & APPROACH CHANGES With the introduction of Code Components, our strategy is shifting in how we approach component development, and our terminology is shifting with it.
A central part of that is that we're repurposing the abbr. CC to indicate Code Components, rather than Sygnal's Core Component library naming conventions.
These notes are kept for alignment with any outdated docs.
Project Phases
The project has 3 Phases, refered to as CC1, CC2, and CC3.
CC1 - Reproduce the native elements as closely as possible.
CC2 - Reproduce the native element, plus add minor enhancements to basic functionality. Emphasis on usability, more effective access to HTML5 features, broader use case support, and developer friendliness.
CC3 - Reproduce the native element's functionality, but with a completely modern approach. Make it more capable, versatile, and robust.
Core Components 1 ( CC1 ) Reproduce the native element as closely as possible.
Drop in CC1's anywhere an existing native element is used.
Use in Build Mode slots.
Better CMS & Property data-binding
Basic design-time functional UX
Webflow;
Components
Custom elements
Classes
Variables
Use Webflow.js where possible
Use Webflow's built-in internal
w-*classes
Also;
JS only where needed to bridge gaps
Custom CSS only where needed to bridge gaps
Core Components 2 ( CC2 ) Reproduce the native element, plus add minor enhancements to basic functionality. Emphasis on usability, more effective access to HTML5 features, broader use case support, and developer friendliness.
More complex forms, with more exposed input attributes
Improved JS support for enable/disable/readonly, validation, etc.
Improved a11y
Easy integration with key libraries;
SA5
FS Attributes
Component variations
e.g. Icon buttons
e.g. Swatch radio buttons
Same as above.
Core Components 3 ( CC3 ) Reproduce the native element's functionality, but with a completely modern approach. Make it more capable, versatile, and robust.
Advanced components
Specific Designer mode mechanics.
Solution for instructions.
Solution for styling
Webflow;
Components
Custom elements
Classes
Variables
GSAP (likely no Webflow.js for UX)
Also;
JavaScript
3rd party libs, e.g. swiperJS, flatpickr, luxon, etc.
Isolated CSS?
Smart variable application?
Goals
CORE COMPONENTS - PHASE 1
General goals;
Versatility. Create several variants or versions of the component to suit specific cases
Easier customization, where needed. "Crack open" fundamental elements to allow more intesting arrangements to occur in a specific project.
Ease of use. Espose special functionality better in a more accessible way.
Deeper a11y control and flexibility
Easier customization, where needed. "Crack open" fundamental elements to allow more intesting arrangements to occur.
Use cases;
Multi-step forms
Customized forms
CMS-compatible sliders and tabs
At the same time, Webflow.js
CC2 COMPONENTS
General goals;
Combine components that are very similer
e.g. H Flex and V Flex
Split components that deserve distinction
Support common configurations as Variants
e.g. Grid 2-col and 3-col
Create new basic components for convenience
e.g. Inline SVG Icon
CC3 COMPONENTS
Levels of Components
All elements can be thought of as consisting of;
HTML, CSS, and possible JS
To these we are adding varying degres of;
Component slots assembly
Component properties
Custom JS
"Shivs" to close gaps in current component design
CSS variables
The conceptual evolution is;
Goal
Reproduce the native element as closely as possible.
Reproduce the native element, plus minor enhancements to basic functionality. Emphasis on usability.
Reproduce the native element's functionality, but with a completely modern approach. Make it more capable, versatile, and robust.
Value
Tech starting point
Proof of concept
Some data-binding advantages, e.g. checkbox binding to a collection list
Familiar element
Key enhancements ( see examples )
TECHNICAL APPROACH
HTML
Reproduce the native element as closely as possible.
Use custom elements primarily, for attribute freedom.
Use Slots where it makes sense in multi-element assemblies like forms.
CC1 plus-
Consider best use of Properties. Look for ways to utilize Link, Image, Video properties effectively.
CSS
Utilize the native element's CSS as closely as possible, with no changes.
JS
Utilize the native element's JS, with no changes.
COMPONENT FEATURES
Slots
Limited
More robust
Unlimited, when appropriate
Variables
No
Yes
Yes, extensively
Variants
No
Yes
Yes
Build / Lib mode attention
No
Some
100%
EXAMPLES
Button
Button
Image Icon variant
Disabled state
Use of CSS vars and variants for styling
Form Input
Form Input
with default value
Disabled state
Slider
Basic Slider
CMS-compatible slider
Possible switch to swiper.js as engine
Video
Basic Video Element
Add further properties
Create versions, like Embedly video, YouTube video, direct Video URL
Seek to create "super" components that handle a range of situations smoothly, so that a single component can be used in a collection list, linking to multiple video types.
YouTube
Basic YouTube Element
Enhanced handling of special URLs
YT shorts, and rotated orientation
Better responsiveness?
Advanced ops like suppressing the pause screen
Last updated