Speed Up Web Development With Predefined CSS Classes – Flow CSS

Category: Javascript | April 3, 2024
Author:ramxcodes
Views Total:11 views
Official Page:Go to website
Last Update:April 3, 2024
License:MIT

Preview:

Speed Up Web Development With Predefined CSS Classes – Flow CSS

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>

You Might Be Interested In:


Leave a Reply