Framework Independent Components
This component library is framework and style independent as much as possible. There are some added styles for necessity and demonstration purposes. It takes original components from Timothy Ricks' LUMOS and Caleb Raney's Modular Component Library (with Lumos)
It was created as a personal library solving for a problem I ran into as a webflow developer using components. Namely the inability to create components for one framework and transfer to another without copying variables from an entire framework upon library uninstallation.
Following the great example from the other two cloneables this library builds off the idea of having invidual component elements be able to be mixed and matched into larger components and yet have the larger components control the props. Rebuilding props especially with nested components is a time consuming process.
One thing noticeably absent is any layout components. The reason for this is most frameworks have a specific, or no layout system in place. Adding layout components will be framework specific and there is no current way to get around this.
This library is intended to be a starting point. Varying frameworks use a combination of custom attributes , variables, custom CSS. The props created in this library are created to take advantage of utility classes. To use this library simply clone the project and make it a workspace library. Then install that library into whichever existing site or framework you have. You can then transfer the components you want to use and uninstall the library.
Global / Button
Global / Button Icon example
Global / Heading
Heading Italic
Global / Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Global / List
Global / List Item
Heading Italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Global / List Example
This list item does not have a heading but has an icon slot with visibility turned on.
Heading 2 <h2 tag> class overridden
This is an example of a heading and paragraph size overwritten by add on class paragraph-sm. and heading class overwiting style with class h4 These class overrides can be for whichever framework you use.
Heading 3 Italic
This example does not override the heading. Or the base paragraph styles.
- note you can use lists
- these are all unstyled webflow defaults
- and create list and item styles
Global / Visual
Global / Divider
Global / Card
Global / Content
Heading Italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.