About Fower

Let's face it, writing CSS is painful.

In my experience of UI development, most people feel painful for writing CSS. Most Front-end developers find it boring to write CSS, and most Back-end developers find it difficult to master CSS.

CSS, which can't even be called a programming language, but it is huge and complex, with so many style attributes, and new features are still not being added.

Fower is a style library that allows you to develop UI efficiently, and let you write CSS without pain.

In Fower, we write styles directly in Markup through "Atomic props". The "Atomic props" provided by Fower does not support all CSS features. It is only a subset of CSS and only contains some of what we consider to be the essence of CSS The good parts, through these atomic properties, you can complete most of the work of UI development.

A quick example

Let's take a look at how to use Fower with a Live DEMO:

Result

Loading...

Live Editor

// import { Box } from '@fower/react' <Box toCenterY p-10 w-260 rounded-10 shadow> <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>

// import { Box } from '@fower/react'
<Box toCenterY p-10 w-260 rounded-10 shadow>
  <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>

Feature

• Atomic Props

  Fower uses Atomic Props to write the style. For decades, separating HTML, CSS and JS is the best practice in Front-end development , but with the advent of the componentization era, we should rethink what best practices are.

• Framework-agnostic

  Framework-agnostic is one of important motivations for the creating of Fower. Fower supports Web, React Native, and Mini Program. With Fower, you can write style with the same way in Web, React Native, and Mini Program.

• High Performance Atomic props design also enables super fast rendering. Rendered declarations get cached and can therefore be reused immediately. Additionally, there are several performance benefits by rendering styles with JavaScript. First of all, CSS is only generated and attached as it is needed. Also, it uses single class selectors which are among the fastest CSS selectors available.

• Type Safe

  Our team is a deep user of TypeScript. Fower is completely type-safe, especially with JSX, the development experience will be great, the type provides very good IntelliSense and documents, and no need to rely on specific editor plugin to achieve IntelliSense.

• 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.

• Less CSS, More JS

  Please gradually weaken CSS. We hope that utilities can cover more than 80% of regular scenes. For special scenes such as complex CSS animation, CSS Transform, we still recommend using native CSS.

• Programmable

  Fower is a solution of CSS in JS. When you are building the user interface, you are essentially writing JS, not CSS. It's more flexible than CSS. Especially in dynamic scenes, Fower can handle it more elegantly.

Inspiration

Inspired by:

• tailwindcss
• radium