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!
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
background
with the “primary” color defined in the theme - One
width
of100%
on mobile and50%
on computer - One
height
of100px
- One
padding
of16px
- One
margin-left
and onemargin-right
of50%
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 div
doped 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, p
instead of a tedious padding
, m
replace 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!