Fower v1.0

After half a year's efforts, today we're finally releasing Fower v1.0.

What is Fower?

Fower is a styling tool library that allows you to efficiently develop UI. The goal is to make it easier for you to write CSS. The core features of Fower are Atomic, Type Safe, and CSS in JS. It pays great attention to the development experience, allowing you to build user interface quickly and happily.

The Story

A year ago, our team was developing Web, React native, and Mini Program projects at the same time. In these three types of projects, we used different styling tool:

• In the Web project, we use styed-component to write style;
• In the React native project, we use the StyleSheet.create that comes with React native;
• In the Mini Program project, We use Sass to write css;

The three style solutions are written in different way, which makes us particularly painful when writing styles:

• The development experience is poor. When developing the same user interface, we need to write three types of css code, and need to constantly switch habits and thinking.
• The tool chain is too broad and too complicated,，Styled-component、Sass、StyleSheet.create...
• Development efficiency is low, and there are too many duplicate codes.
• CSS has many inherent shortcomings and poor maintainability.

Later，We discovered Tailwindcss, A utility-first CSS framework. We started to use Tailwindcss in the web project. After some time, we found that the development experience is very good, the development efficiency is very high, especially suitable for our projects that require a highly customized interface. Unfortunately, Tailwindcss cannot be used directly in non-web projects such as React native.

The members of our team like the style of Tailwindcss, so we create Fower, it allows us to unify the way we write styles for all projects.

Similar to Tailwindcss, we also use the concept of utility-first, but Fower is a bit different. Fower uses Atomic Props to write styles. The code is as follows:

<div toCenterY p-10 w-260 rounded-10 shadow>
  <img circle-48 src="/img/jobs.jpg" />
  <div ml-10>
    <div textXL fontBold>Steve Jobs</div>
    <span gray800>Co-founder of Apple Inc.</span>
  </div>
</div>

Core concepts

Fower is opinionated and we created it based on the following concepts:

• utility-first, it allows us to write styles more quickly. Unlike other "utility-first" CSS frameworks, Fower uses "Atomic style prop" to write styles.

• Type safe, Our team is a heavy user of TypeScript. The intellisense brought by Type safe make us hardly read the documents, and we do not rely on any editor plugin when writing code to get accurate auto-completion.

• Framework-agnostic, This is one of the main reasons we created Fower. Fower allows you to write styles in React, Vue, and React Native in a consistent way.

• CSS in JS, We hate to write CSS in a separate CSS file. Pure CSS has many shortcomings, such as: unable to access JS variables; easy to produce style conflicts; easy to generate dead code... We like to use JS (CSS in JS) to write styles, which is more Suitable in the age component. In fact, Fower is not just CSS in JS, we also call it CSS in HTML.

Some Cool features

Fower has many features, such as atomic classes, responsiveness, pseudo-classes, themes, design systems, CSS in JS..., I think these are the basic feature of Fower, not special feature.

Fower has a few cool features:

1. Layout Toolkit

If I were to choose a favorite feature in Fower, it would undoubtedly be the Layout Toolkit.

Fower provides a powerful Flexbox-based layout toolkit. By adjusting the direction and alignment of the layout, you can build most of the layout and make the layout easier.

Compared with the traditional flex layout, the layout of Fower is more abstract and streamlined. The layout of Fower is abstracted as toCenter, toCenterX, toCenterY, toLeft, toTop, toRight, toBottom, toBetween , toEvenly, toAround ten kinds of atomic alignment, you can forget the concept of main axis and cross axis in traditional flex layout when you use them, you only need to have a sense of direction.

Use as below:

<div toCenter bgGray100 square-200>
  <div square-60 bgAmber400 rounded-8></div>
  <div square-80 bgBlue400 rounded-8></div>
</div>

For more detailed usage, please see the document: Layout Toolkit。

2. Predictable style

Another cool feature of Fower is the predictable style. In traditional CSS, it's not predictable to override style.

For example, if you have some css rule like below:

.red {
  color: red;
}
.blue {
  color: blue;
}

And some html with css class "red blue" and "blue red":

<div>
  <span className="red blue">Fower</span>
  <span className="blue red">Fower</span>
</div>

Can you judge the color of the text? It's hard to be sure, if we don't see the above CSS code, you can't directly judge the color of the text, you can only find out through debugging with developer tools.

In Flower, you can easily judge the color of the following text:

<div>
  <div red400 blue400>text will be color blue400</div>
  <div blue400 red400>text will be color red400</div>
</div>

When we build a reusable component, it's very useful. We can override component style elegantly.

For more detailed usage, please see the document: Predictable style。

3. Color helper

Another cool feature of Fower is the color helper. you can handle color with some postfix.

Use --D{0-100} postfix to darken a color.

<div toEvenly toCenterY>
  <div red300>normal</div>
  <div red300--D40>darken</div>
  <div color="#fff--D40">darken</div>
  <div bgRed300 square-84></div>
  <div bgRed300--D40 square-84></div>
  <div border borderRed300 square-84></div>
  <div border borderRed300--D40 square-84></div>
</div>

Use --L{0-100} to lighten a color.

<div toEvenly>
  <div red500>normal</div>
  <div red500--T40>transparentize</div>
  <div color="#000--T40">transparentize</div>
  <div bgRed500 square-84></div>
  <div bgRed500--T40 square-84></div>
  <div border borderRed300 square-84></div>
  <div border borderRed300--T40 square-84></div>
</div>

Use --T{0-100} to transparentize a color.

<div toEvenly>
  <div red500>normal</div>
  <div red500--T40>transparentize</div>
  <div color="#000--T40">transparentize</div>
  <div bgRed500 square-84></div>
  <div bgRed500--T40 square-84></div>
  <div border borderRed300 square-84></div>
  <div border borderRed300--T40 square-84></div>
</div>

Use --O{0-100} to opacify a color.

<div toEvenly>
  <div color="rgba(0,0,0,0.4)">0.4</div>
  <div color="rgba(0,0,0,0.4)--O40">Opacify to 0.6</div>
  <div bg="rgba(0,0,0,0.4)" square-84></div>
  <div bg="rgba(0,0,0,0.4)--O40" square-84></div>
  <div border borderColor="rgba(0,0,0,0.4)" square-84></div>
  <div border borderColor="rgba(0,0,0,0.4)--O40" square-84></div>
</div>

For more detailed usage, please see the document: Color helper。

4. Composition Postfix

Fower proveders some postfix to handle style, like: --hover, --focus, --sm, --dark, --T{amount}...

Another cool feature of Fower is Composition Postfix. You can combine some postfix, and The order is arbitrary:

<div square-84 bgOrange300 bgOrange400--D10--hover--sm></div>

The below code is equal above:

<div square-84 bgOrange300 bgOrange400--hover--sm--D10></div>

In the end, Fower is a opinionated style tool, if you like it, you can give it a star in github: Fower.