DEV Community

Cover image for React FlatifyCSS: the flat design React component library is finally stable
Amir M. Mohamadi
Amir M. Mohamadi

Posted on

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:

Image description

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Right to Left

import 'flatifycss/dist/css/flatify-rtl-min.css';
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

Component categories

Available components are separated by four categories:

  • Content
  • Forms
  • Buttons
  • Components

Image description

Content

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

Image description

Forms

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

Image description

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.

Image description

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!

Top comments (2)

Collapse
 
iiabady profile image
Abdullah Binsaad

Awesome! we are actually using it in a capstone project.

Collapse
 
amir2mi profile image
Amir M. Mohamadi • Edited

Hi Abdullah, such a pleasure that it's practical to you,