> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/sygnal-components/legacy-notes.md).

# Legacy Notes

{% hint style="warning" %}
**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.* 
{% endhint %}

## Project Phases 

The project has 3 Phases, refered to as CC1, CC2, and CC3. 

1. CC1 - [Reproduce the native elements](/sygnal-webflow-components/nc/native-components-ncs/nc-design-approach.md) as closely as possible. 
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. 
3. CC3 - Reproduce the native element's functionality, but with a completely modern approach.  Make it more capable, versatile, and robust. 

{% hint style="info" %}
CC1 - Recreating native elements
{% endhint %}

<table><thead><tr><th width="244.99993896484375">Phase </th><th width="261.6666259765625">Functionality </th><th>Tech</th></tr></thead><tbody><tr><td><strong>Core Components 1</strong> <br><strong>( CC1 )</strong><br><br>Reproduce the native element as closely as possible. </td><td><ul><li>Drop in CC1's anywhere an existing native element is used. </li><li>Use in Build Mode slots. </li><li>Better CMS &#x26; Property data-binding </li><li>Basic design-time functional UX</li></ul></td><td><p>Webflow;</p><ul><li>Components </li><li>Custom elements</li><li>Classes </li><li>Variables</li><li>Use Webflow.js where possible </li><li>Use Webflow's built-in internal <code>w-*</code> classes </li></ul><p>Also; </p><ul><li>JS only where needed to bridge gaps</li><li>Custom CSS only where needed to bridge gaps </li></ul></td></tr><tr><td><strong>Core Components 2</strong> <br><strong>( CC2 )</strong><br><br>Reproduce the native element, plus add minor enhancements to basic functionality. <br><br>Emphasis on usability, more effective access to HTML5 features, broader use case support, and developer friendliness. </td><td><ul><li>More complex forms, with more exposed input attributes</li><li>Improved JS support for enable/disable/readonly, validation, etc. </li><li>Improved a11y </li><li><p>Easy integration with key libraries; </p><ul><li>SA5 </li><li>FS Attributes </li></ul></li><li><p>Component variations </p><ul><li>e.g. Icon buttons</li><li>e.g. Swatch radio buttons</li></ul></li></ul></td><td><em>Same as above.</em> </td></tr><tr><td><strong>Core Components 3</strong><br><strong>( CC3 )</strong><br><br>Reproduce the native element's functionality, but with a completely modern approach.  Make it more capable, versatile, and robust.</td><td><ul><li>Advanced components </li><li>Specific Designer mode mechanics. </li><li>Solution for instructions.  </li><li>Solution for styling  </li></ul></td><td><p>Webflow;</p><ul><li>Components</li><li>Custom elements</li><li>Classes</li><li>Variables</li><li>GSAP (likely no Webflow.js for UX)</li></ul><p>Also; </p><ul><li>JavaScript</li><li>3rd party libs, e.g. swiperJS, flatpickr, luxon, etc. </li><li>Isolated CSS?</li><li>Smart variable application?</li></ul></td></tr></tbody></table>

## Goals

### CORE COMPONENTS - PHASE 1

General goals;&#x20;

* Versatility.  Create several variants or versions of the component to suit specific cases&#x20;
* Easier customization, where needed.  "Crack open" fundamental elements to allow more intesting arrangements to occur in a specific project. &#x20;
* Ease of use. Espose special functionality better in a more accessible way.&#x20;
* Deeper a11y control and flexibility&#x20;
* Easier customization, where needed.  "Crack open" fundamental elements to allow more intesting arrangements to occur.&#x20;

Use cases;&#x20;

* Multi-step forms&#x20;
* Customized forms&#x20;
* CMS-compatible sliders and tabs&#x20;

At the same time, Webflow\.js  &#x20;

### CC2 COMPONENTS

General goals;&#x20;

* Combine components that are very similer
  * e.g. H Flex and V Flex&#x20;
* Split components that deserve distinction&#x20;
* Support common configurations as Variants&#x20;
  * e.g. Grid 2-col and 3-col&#x20;
* Create new basic components for convenience&#x20;
  * e.g. Inline SVG Icon&#x20;

### CC3 COMPONENTS

## Levels of Components&#x20;

All elements can be thought of as consisting of;&#x20;

* HTML, CSS, and possible JS&#x20;

To these we are adding varying degres of;&#x20;

1. Component slots assembly&#x20;
2. Component properties
3. Custom JS&#x20;
   1. "Shivs" to close gaps in current component design&#x20;
4. CSS variables &#x20;

The conceptual evolution is;&#x20;

<table><thead><tr><th width="99.66668701171875"></th><th>CC1</th><th>CC2</th><th>CC3</th></tr></thead><tbody><tr><td>Goal</td><td>Reproduce the native element as closely as possible. </td><td>Reproduce the native element, plus minor enhancements to basic functionality. <br><br>Emphasis on usability.</td><td>Reproduce the native element's functionality, but with a completely modern approach.  Make it more capable, versatile, and robust. </td></tr><tr><td>Value</td><td><ul><li>Tech starting point </li><li>Proof of concept</li><li>Some data-binding advantages, e.g. checkbox binding to a collection list </li></ul></td><td><ul><li>Familiar element</li><li>Key enhancements <br>( see examples ) </li></ul></td><td></td></tr><tr><td></td><td><strong>TECHNICAL APPROACH</strong></td><td></td><td></td></tr><tr><td>HTML</td><td><ul><li>Reproduce the native element as closely as possible. </li><li>Use custom elements primarily, for attribute freedom. </li><li>Use Slots where it makes sense in multi-element assemblies like forms. </li></ul></td><td><p>CC1 plus-<br></p><ul><li>Consider best use of Properties.  Look for ways to utilize Link, Image, Video properties effectively. </li></ul></td><td></td></tr><tr><td>CSS</td><td><ul><li>Utilize the native element's CSS as closely as possible, with no changes. </li></ul></td><td></td><td></td></tr><tr><td>JS</td><td><ul><li>Utilize the native element's JS, with no changes. </li></ul></td><td></td><td></td></tr><tr><td></td><td><strong>COMPONENT FEATURES</strong></td><td></td><td></td></tr><tr><td>Slots</td><td>Limited</td><td>More robust</td><td>Unlimited, when appropriate </td></tr><tr><td>Variables</td><td>No</td><td>Yes</td><td>Yes, extensively </td></tr><tr><td>Variants</td><td>No</td><td>Yes</td><td>Yes</td></tr><tr><td>Build / Lib mode attention</td><td>No</td><td>Some</td><td>100% </td></tr><tr><td></td><td><strong>EXAMPLES</strong> </td><td></td><td></td></tr><tr><td>Button</td><td>Button</td><td><ul><li>Image Icon variant</li><li>Disabled state </li><li>Use of CSS vars and variants for styling </li></ul></td><td></td></tr><tr><td>Form Input</td><td>Form Input</td><td><p></p><ul><li>with default value</li><li>Disabled state </li></ul></td><td></td></tr><tr><td>Slider</td><td>Basic Slider</td><td>CMS-compatible slider</td><td>Possible switch to swiper.js as engine </td></tr><tr><td>Video </td><td>Basic Video Element</td><td><ul><li>Add further properties</li><li>Create versions, like Embedly video, YouTube video, direct Video URL </li></ul></td><td>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. </td></tr><tr><td>YouTube</td><td>Basic YouTube Element</td><td><ul><li><p>Enhanced handling of special URLs </p><ul><li>YT shorts, and rotated orientation</li></ul></li><li>Better responsiveness? </li></ul></td><td><ul><li>Advanced ops like suppressing the pause screen </li></ul></td></tr></tbody></table>