Styled Components for Everyone - Welcome Cinnamon Wrap 1.0 🌯
Tags: styledcomponents, components, styling, ui
Published: 2020-11-18 16:26:38

**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](https://styled-system.com/) which created new ways for a cleaner and more mobile-friendly look.

--- 

__L__et'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.

```js
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:
```html
<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.
```js
const Heading= styled(Text).attrs(extend({   
   sizes: {
     large:{
       fontSize: 20,
       tag:'h1',
     },
     base:{
       fontSize: 16,
       tag:'h2',
     },
     small:{
       fontSize: 14,
       tag:'h3',
     },
   }
}))``
```
Usage:
```html
<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](https://www.notion.so/Styling-bfd1b72d815e46fab45135cd12cb7420).

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.