Basic

Understanding Atomic props

For decades, we consider the principle of "separation of Concerns" as the best practice. But with the advent of the componentization era, we should rethink what best practices are.

Fower does not advocate "separation of Concerns", Fower use Atomic Props to write style. when we use Fower, there no CSS code, no CSS classnames, no CSS files.

Code snippet using Fower:

Result

Loading...

Live Editor

<Box bgGray100 p6> <Box toCenterY p-10 w-260 bgWhite rounded-10 shadowMD> <Box as="img" circle-48 src="/img/jobs.jpg" /> <Box ml-10> <Box textXL fontBold> Steve Jobs </Box> <Box as="span" gray800> Co-founder of Apple Inc. </Box> </Box> </Box> </Box>

<Box bgGray100 p6>
  <Box toCenterY p-10 w-260 bgWhite rounded-10 shadowMD>
    <Box as="img" circle-48 src="/img/jobs.jpg" />
    <Box ml-10>
      <Box textXL fontBold>
        Steve Jobs
      </Box>
      <Box as="span" gray800>
        Co-founder of Apple Inc.
      </Box>
    </Box>
  </Box>
</Box>

At first glance, You may be very resistant to abbreviations like toCenterY p-20 w-300 bgWhite rounded-10. It’s a bit simple and rude, but I promise, it will make you happy later.

Advantages of Atomc props

• Less code, Using Fower, you can develop UI with less code, especially in JSX, the boolean prop value of can be omitted, that we call it the "key as value" pattern, it can reduce a lot of style code.

• No need to waste time naming, naming CSS classes is very annoying and a waste of energy. Everyone has different naming habits. Many scenes are difficult to describe with a semantic name. Fower does not waste time to do it. These things are replaced by declarative creation of styles by adding attributes.

• More cohesive, with the traditional way, you create a style for an element, you need to create a middleman (CSS class name), and then copy the class name to the CSS file to start writing the style. In this process, You have to repeat these operations:

  • thinking a class name
  • writing the class name to the template
  • copying the class name to the CSS file
  • starting to write the CSS code

  At the same time, you have to jump around frequently between the template structure and style files. Fower does not have these problems, when you need to write a style, just set the atom Props directly.

• CSS stops bloating, using traditional solutions, as the project grows, CSS will gradually expand, and the final CSS size will become larger and more difficult to maintain. With Fower, the style code will hardly expand.

Basic usage

In order to give you a deeper understanding of the usage of Fower, let's review the basic usage:

Result

Loading...

Live Editor

<Box text2XL fontBold green500> Hi, Fower </Box>

<Box text2XL fontBold green500>
  Hi, Fower
</Box>

The simplest way to use Fower is to set some Atomic Props directly on the Fower component. The Atomic Props text2XL, fontBold, green500 will produce the following style:

Result

Loading...

Live Editor

<span style={{ fontSize: '24px', fontWeight: 'bold', color: '#48bb78', }} > Hi, Fower </span>

<span
  style={{
    fontSize: '24px',
    fontWeight: 'bold',
    color: '#48bb78',
  }}
>
  Hi, Fower
</span>

The Atomic Props above text2XL, fontBold, green500, no need to declare a value for them, we call it the "Key as Value" pattern, which makes the UI code more concise and improves the development experience. Personally I believe that the JSX inline style itself is already very good. It has strong types and is convenient for dynamic styles. The biggest disadvantage is cumbersome and visually disturbing. No one likes ugly boilerplate code like style={{}}. Fower solves these problems. With Fower, every character is meaningful, there are no unnecessary characters such as equal signs, curly braces, and quotation marks, and the structure of JSX is kept clean.

Use attr value

In most cases, we recommend write the style with the "Key as Value" pattern. In some scenarios, we need to set the attribute value to write the style:

Result

Loading...

Live Editor

function Demo() { const a = 5 const b = 5 return ( <Box text={30} p={a + b} bg="#bee3f8" fontBold> Hi, Fower </Box> ) }

function Demo() {
  const a = 5
  const b = 5
  return (
    <Box text={30} p={a + b} bg="#bee3f8" fontBold>
      Hi, Fower
    </Box>
  )
}

The value mode loses some of its simplicity, but is more flexible, and is especially suitable for dynamic style scenes.