NC Design Approach
Basic Recreation
Take a basic Webflow element
Add it to a page and publish it
Disable JavaScript in the browser
Inspect the un-modified HTML
Recreate that as a Component
Use Custom Elements primarily, except where certain property-binding requires special property types;
Use Links when Link properties are important
Use Images when Image properties are important
Consider Videos when Image properties are important
Basic Initialization
A few elements have specialized initialization that occurs at design-time. For example- adding special classes to the initially selected tab.
These are recreated using component-internal JS.
In this setup, the code is encapsulated as an IIFE and self-targets the component so each instance can run fully independently.
Extend the Component
Basic Extensions ( CC1 )
Basic extensions of the component involve exposing key HTML5 element properties that are useful.
Deeper Extensions ( CC2 )
Add common Finsweet Attributes
e.g. FS Filter attributes on form inputs
Add common SA5 Attributes
Create specialized component variations for specific use cases
e.g. Color-swatch radio button.
e.g. Button with SVG icon
e.g. Pseudo-disabled input, which appears and behaves as a disabled input element, but participates in form validation.
Design-Time UX
Some components have a design-time interface for specialized controls and component-specific settings. Tabs, Sliders, and Lightboxes are good examples of this.
Each is unique, and components do not currently offer a comparable feature, so we'll be doing some R&D around the mechanics of this type of functionality.
Last updated