Speed Up Web Development With Predefined CSS Classes – Flow CSS

Preview:

Description:

Flow CSS is a lightweight CSS utility library that offers an intuitive way to apply common CSS properties like padding, margin, alignment, color, display, and more, using straightforward class names.

For example, you can use classes like “p-4” to add padding of 2rem, “m-6” for a margin of 3rem, and so on. This means you can style elements by simply adding pre-defined classes, instead of writing custom CSS rules.

In addition, developers can mix and match classes to achieve the desired styling, without worrying about specificity issues or overriding existing styles.

How to use it:

1. Download and import the Flow CSS stylesheet in the project.

<link rel="stylesheet" href="./flow.css" />

2. Apply padding and margins to elements using p-{value} and m-{value} classes, where {value} ranges from 0 to 10.

<div class="p-4 m-4">
  Padding: 2rem 
  Margin: 3rem
</div>

<div class="pl-1 pr-2 pt-3 pb-4">
  Padding Left: 0.5rem 
  Padding Right: 1rem
  Padding Top: 1.5rem
  Padding Bottom: 2rem
</div>

<div class="ml-1 mr-2 mt-3 mb-4">
  Margin Left: 0.5rem 
  Margin Right: 1rem
  Margin Top: 1.5rem
  Margin Bottom: 2rem
</div>

3. Position your elements.

<div class="text-center">
  Text Center
</div>
<div class="center-x">
  Horizontally Centered
</div>
<div class="center-y">
  Vertically Centered
</div>
<div class="center-xy">
  Horizontally and Vertically Centered
</div>

4. Apply predefined colors to text and backgrounds.

<div class="text-primary">
  Text Color
</div>
<div class="text-secondary">
  Text Color
</div>
<div class="text-success">
  Text Color
</div>
<div class="text-danger">
  Text Color
</div>
<div class="text-warning">
  Text Color
</div>
<div class="text-info">
  Text Color
</div>
<div class="text-light">
  Text Color
</div>
<div class="text-dark">
  Text Color
</div>

<div class="bg-primary">
  Background Color
</div>
<div class="bg-secondary">
  Background Color
</div>
<div class="bg-success">
  Background Color
</div>
<div class="bg-danger">
  Background Color
</div>
<div class="bg-warning">
  Background Color
</div>
<div class="bg-info">
  Background Color
</div>
<div class="bg-light">
  Background Color
</div>
<div class="bg-dark">
  Background Color
</div>

5. Stretch the element’s height & width to full viewport.

<div class="screen-height">
  100vh
</div>
<div class="screen-width">
  100vw
</div>

6. Apply CSS ‘Display’ property to elements.

<span class="inline">
  Display: inline
</span>
<div class="block">
  Display: block
</div>
<div class="inline-block">
  Display: inline-block
</div>