No Result
View All Result
Cloud Reports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
No Result
View All Result
Cloud Reports
No Result
View All Result

Smooth UI System: a new way to style your components

npn by npn
December 18, 2020
in React
Reading Time: 4min read
A A
0
Smooth UI System: a new way to style your components
ADVERTISEMENT

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

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

December 22, 2020
16
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]

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 .

ADVERTISEMENT

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!

ShareTweetShare
Previous Post

Tips for optimizing Webpack

Next Post

The FUNDAMENTAL model for learning Web Development.

npn

npn

Related Posts

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

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

December 22, 2020
16
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]
React

Pathway to learn javascript to reactjs

December 21, 2020
16
React

React Document ~ Essential JSX Knowledge

December 17, 2020
12
Migrate from Hot Reload to Fast Refresh
React

Migrate from Hot Reload to Fast Refresh

December 16, 2020
63
[React] React installation for Mac
React

[React] React installation for Mac

December 16, 2020
6
Deploy Next.js to Firebase for SSR and API Route
React

Deploy Next.js to Firebase for SSR and API Route

December 15, 2020
94
Next Post
The FUNDAMENTAL model for learning Web Development.

The FUNDAMENTAL model for learning Web Development.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • Javascript (21)
  • Layout and Routing (2)
  • Linux (3)
  • PC & Laptop (88)
  • React (17)
  • SQL (2)
  • Technology & Digital (256)
  • The Basics (5)
  • Web development (38)

Search

No Result
View All Result
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital