Styled Components for Everyone - Welcome Cinnamon Wrap 1.0 🌯

Norbert — Wed, 18 Nov 2020 16:26:38 +0000

Styled-components are quite common in the web development sphere, helping developers create components with dynamic styles and properties. We, as developers, always find ways to improve performance, efficiency, and readability. One library that made us think more deeply about this was styled-system which created new ways for a cleaner and more mobile-friendly look.

Let's take another leap forward with styled-components. We have been experimenting with options to create extensive UI components that will implement a design system and help developers create Websites from smaller elements. We built on Atomic design patterns and the result was astonishing. Cinnamon's styling library improved in overall performance and created amazing UIs. (https://cinnamon.video/)

Far more powerful than other libraries with incredible short render time that makes connection with styled-components advanced UI library.

Key features

Reusing components for creating extensible UIs.
Styles optimisation with duplication removal (Extended component always has optimised styles without ugly overrides).
Fewer classes.

Following styled-components styling pattern ensures safe implementation, which makes render time indistinguishable from Styled components implementation.

We have created a base component called StyledElement. It is the core block for creating extendable UIs. The syntax is remarkably similar to the styled components with additional features.

Enhanced styled components can be created with the extend function when used in styled attrs function.

Let us say we want to create a basic Text component with two variants.

const Text= styled(StyledElement).attrs(extend({
   tag: 'p',  
   display:'inline-block',
   //  ... more css properties
   variants: {
     blue:{
      color: 'blue'
     },
     white:{
      color: 'white'
     },
   },
   sizes: {
     base:{
       fontSize: 16,
     },
     small:{
       fontSize: 14,
     },
   }
}))``

Usage:

<Text small blue /> // fontSize: 14px, color: blue, <p/>
<Text base white /> // fontSize: 16px, color: white, <p/>

The function extend plays an important part in creating the final object with defined style properties.

As we already have the Text component let us say we want to extend it to create a Heading component.

const Heading= styled(Text).attrs(extend({   
   sizes: {
     large:{
       fontSize: 20,
       tag:'h1',
     },
     base:{
       fontSize: 16,
       tag:'h2',
     },
     small:{
       fontSize: 14,
       tag:'h3',
     },
   }
}))``

Usage:

<Heading large blue /> // <h1/>, color: blue, fontSize: 20
<Heading base white /> // <h2/>, color: white, fontSize: 16
<Heading small white /> // <h3/>, color: white, fontSize: 14

The Heading component reuses the Text variants and properties and extends sizes.

More incredible features for enhancing UI components are available here.

In early 2021 we plan to outsource the UI Cinnamon library. We cannot wait to see the amazing websites our community will create. Let us know what your thoughts are.

DEV Community: Norbert

Styled Components for Everyone - Welcome Cinnamon Wrap 1.0 🌯