MetaphorUI

A utility-first CSS library for building user interfaces.

Installation

// with CDN
https://cdn.jsdelivr.net/gh/Atishay-J/MetaphorUI@development/Components/MetaphorUI.css

// Download Locally 
https://github.com/Atishay-J/MetaphorUI/blob/development/Components/MetaphorUI.css

Usage

Some of examples for the full library

Margins

/**
  * mt => for margin Top
  * mb => for margin bottom
  * ml => for margin left
  * mr => for margin right
/**

// with sizes of 4, 8, 10, 15

// mt4 => give margin top 0.4rem

<div class="ml8"></div> // provides 0.8rem margin from left

Paddings

/**
  * pt => for padding Top
  * pb => for padding bottom
  * pl => for padding left
  * pr => for padding right
/**

// with sizes of 4, 8, 10, 15

// pt4 => give padding top 0.4rem

<div class="pl8"></div> // provides 0.8rem padding from left

FlexBox

Class	Converts to
flex-cont	display: flex
flex-column	display: flex; flex-direction: column
flex-column-rev	display: flex; flex-direction: column-reverse;
flex-row-rev	display: flex; flex-direction: row-reverse;
space-btw	justify-content: space-between

More Classes

Several Other Pre-built Components

Read full Documentation