DEV Community: Amir M. Mohamadi

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

Amir M. Mohamadi — Fri, 28 Oct 2022 22:51:18 +0000

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!

Intro to FlatifyCSS - Modern flat design framework for the web

Amir M. Mohamadi — Fri, 07 Jan 2022 11:33:42 +0000

After months of working on the project called FlatifyCSS now, I can announce the stable version that you can use to create fantastic websites.

FlatifyCSS is a modern flat design framework for the web, inspired by the Duolingo design system. It comes with several components and helper classes to speed up the development process.

I can describe it as a fancier version of the Material Design system. In FlatifyCSS, there are no blurred shadows, but borders express the same feeling, which causes the layout to be cleaner.

Features

Here is why FlatifyCSS can be the right choice because of:

Customizability
Accessibility
Support for right to left layouts
Practical set of components
Handy helper classes

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.
For example, here is a default button and we want to create a new kind of button:

.my-custom-button {
  --flatify__button-txt-color: #fff;
  --flatify__button-bg-color: #48cfad;
  --flatify__button-border-color: #37bc9b;
}

Therefore instead of changing all properties, you only need to modify some CSS variables to customize the styles.

Accessibility

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

For reduced motion users, all animations will be fade in/out.

General users:

Users who prefer reduced motion :

It is also possible to create the high-contrast version of FlatifyCSS for those who struggle with contrast loss issues. It is simply doable by applying some tweaks inside the SCSS config file. Read more about high-contrast version

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. Read more about RTL layouts

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.

Handy helper classes

FlatifyCSS is not a utility-first CSS framework, and honestly, we are not eager to be on that side. It makes things ready for development because real developers prove themselves by coding.

Nonetheless, FlatifyCSS comes with some of the must-must-haves. For example, if you want to change the theme of a component, there is just a set of helper classes started with style- and color- prefixes, not repeated like button-success or alert-danger, you just set style-danger and voilà you have the element with that style!

Getting started

FlatifyCSS is available for users in many ways, you can install it using package managers, directly from CDN, or even downloading lastest project archive.

Install the latest version via npm or Yarn:

npm install flatifycss
yarn add flatifycss

Once the package got installed, you can import files into your project or link them inside your web pages directly.

Learn more!

All components, forms, helper classes, principles, and pieces of information are documented, read about how things work, try, and then use them. I suggest first starting reading the overview section.

Help us make it better...

We are on the first steps of this road, some things should get polished and missing features should be added, in this case, your feedback and contributions to this project will be appreciated by us and the people who will use it.

FlatifyCSS's Github page