Smooth UI System: a new way to style your components

We are happy to share with you the latest innovation from the Smooth UI family, a new system for creating components in a simple and intuitive way!

READ ALSO

If you want to learn React JS within 3 months, the following 8 basics must first be known

December 22, 2020

16

Pathway to learn javascript to reactjs

December 21, 2020

16

Smooth UI

A year ago, I released the first version of Smooth UI, a generic design system to help us build our React apps more efficiently at Smooth Code. Today, it is widely adopted by the developer community and is used on all of our projects.

This easy-to-use library boosts your productivity by focusing on four essential ingredients: a powerful grid, a responsive layout, basic components, and – of course – a stylish styled system.

What is the System?

The System is the brain of Smooth UI. It allows you to define global style rules and inject them directly into the core of the components via the props. Today we are defining a new way to use this system. It is possible to use it to create the “styled-components”.

import styled from "styled-components";
import system from "@smooth-ui/system";

const MyBox = styled.div(
  system({
    backgroundColor: 'primary',
    width: { sm: 1, md: 0.5 },
    height: 100,
    mx: 'auto',
    p: 2,
  }),
)

What does this code represent? Many things :

• One backgroundwith the “primary” color defined in the theme
• One widthof 100%on mobile and 50%on computer
• One heightof100px
• One paddingof16px
• One margin-leftand one margin-rightof50%

This simple example demonstrates the power of the System. And this is only a brief overview… Because yes, the possibilities extend to the most extreme limits of CSS. All language properties are supported!

The System can also be used directly via props to style your components declaratively from JSX code.

import { Box } from "@smooth-ui/core-sc";

<Box
  backgroundColor="primary"
  width={{ sm: 1, md: 0.5 }}
  height={100}
  mx="auto"
  p={2}
/>

In the example above, the Box is a simple divdoped by the Smooth UI System . This means that you can use all System properties as props!

Here is a Sandbox Code for you to test for yourself.

Advantages of the System

Why use the System instead of writing good old CSS? Why focus on yet another pseudo-language?

Streamline the development experience

As a developer, the less you write, the more efficient you are. The System considerably reduces the amount of code to be produced. So, pinstead of a tedious padding, mreplace margin, and an object will avoid an unnecessarily complex media-query. At the end of the day, all of these features are a huge time saver .

Design consistency

The System reads the values ​​of your theme. Whenever you need a color, you can use “primary,” secondary “, or whatever nice name you choose. The entire application is now configured directly in your theme !

This is all the more true for spaces. You can now define your own units of measure. When I use the property p={1}, the system uses the padding unit selected in the – 8px– theme. Of course, you are free to modify these values ​​as you wish. Now you don’t have to worry about pixels – think in terms of units. To condense your design, it will therefore suffice to change a single number in your theme. Practice not?

It is also a real revolution for responsive design. The breakpoints are configured here in the theme, you don’t have to worry about them anymore.

Flexibility

Being able to style a component from a prop is extremely handy. Most of the time, you will likely want to add a little margin here and there. Being able to do it in a simple way my={1}is a real relief. It’s like discovering Prettier, it gives you an incredible advantage.

Conclusion

At Smooth Code, we use the System every day and it’s a real game-changer for the whole team. That’s why I wanted to share with the community our new way of creating ever more exciting components. And of course, as usual, everything is open source and documented!