React FlatifyCSS: the flat design React component library is finally stable

About a year ago, I started the project called FlatifyCSS, it is an open-source web framework like Bootstrap to help web developers create websites with the design trend inspired by Duolingo design system, which is unique in its way.
I've written about FlatifyCSS here:

Intro to FlatifyCSS - Modern flat design framework for the web

Amir M. Mohamadi ・ Jan 7 '22

#css #javascript #webdev #opensource

How it started

Shortly after announcing FlatifyCSS, I started to create React components for my personal project and the result seemed satisfying, so I shared it open-source as React FlatifyCSS.

How it is going

Recently, I decided to get my arse in gear and finish it. Things went well, I added styled components and rewrote some major parts because of accessibility and performance. Some of the Reach UI bare-bones components were replaced to work along with FlatifyCSS styles.

Main features

FlatifyCSS has a playful design and gives you features to help you develop your project quickly and easily.

Customizability

With the power of CSS custom properties, it is possible to customize colors, typography, animations, etc. You can do the customization for each component or generally from the config file.

Accessibility

It is keyboard-friendly, the friend of assistive technologies, and supports the reduced motion for animation and transitions when the user prefers.

Support for right to left layouts

FlatifyCSS comes with files prefixed as -rtl.css built especially for the right to left languages like Arabic, Persian, Hebrew, etc. You can also extend the right to left styles by using the flatify-rtl.scss file and conditional statements.

Practical set of components

There are more than twenty components that can be mixed and make more complex user interfaces, each component has its unique CSS variables and can be customized based on the usage.

Based on Styled Components

The components are created based on styled-components, so you can add your styles and get benefits of using styled components with joy.

Start using React FlatifyCSS

To install and use it, you should install both the flatifycss and react-flatifycss packages. We use the base flatifycss package to import styles.

Installing packages

Use npm or Yarn to install the packages:

npm i flatifycss react-flatifycss

Import styles

React FlatifyCSS itself does not include the FlatifyCSS styles, so you can import your preferred stylesheet in your application.

Left to right

import 'flatifycss/dist/css/flatify-min.css';

Right to Left

import 'flatifycss/dist/css/flatify-rtl-min.css';

Use components!

Now, just import the component you need from react-flatifycss, for example a simple button:

import React from 'react';
import { Button } from 'react-flatifycss';

export default function App() {
  return <Button theme="green">Success!</Button>;
}

Component categories

Available components are separated by four categories:

• Content
• Forms
• Buttons
• Components

Content

Components that are related to post body, things like images, quotes and so on.

Forms

Inputs, checkbox, radio and other components that generally are used in forms are in this category.

Buttons

I remember somebody said:

If you want to know a design system is good enough, check its buttons first.

Buttons include a wide range of components, so it is better to separate them from others.

Components

Accordion, dropdown, modal, toast and other stuff are presented in this category.

Documents and playground

For more information, please start reading from here.
The playground is created with Storybook, so you can examine how each component works, read its documents and get a copy of the snippet easily!