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
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!
Top comments (2)
Awesome! we are actually using it in a capstone project.
Hi Abdullah, such a pleasure that it's practical to you,