![Logo](https://futuretint.futureapps.in/20241129.png)
![Static Badge](https://img.shields.io/badge/Maintence_by-future_Apps-blue)
[![Follow on Twitter](https://img.shields.io/twitter/follow/abhimanyux48?style=social)](https://twitter.com/abhimanyux48)


**FutureTint** is a utility-first CSS library that provides custom classes for styling. It is designed to work seamlessly with React applications and gives you the flexibility to build responsive layouts with minimal effort.
.

## Table of Contents

- [Installation](#installation)
- [For HTML CDN](#for-html-cdn)
- [Available Classes](#search-for-classes)
- [Search for Classes](#search-for-classes)
- [Responsive Sizes](#responsive-sizes)
- [How to Use](#uses)

## Installation

You can install this package via npm:

```bash
npm install future-tint
```


## For HTML CDN
You can include the CSS file in your HTML file using the following CDN link:

```link
https://cdn.jsdelivr.net/npm/future-tint@latest/dist/common.min.css
```

## Search Classes

For search available futuretint classes by enter style name example you need margin related classes enter simply margin
https://futuretint.futureapps.in/


## Responsive Sizes
<!-- Note:- after 1.8.7 Version please check all responsive classes in each Devices Sizes changes in this sizes changes in only class name: md => mmd, sm=> md,  xs=> sm, vs => xs and added 2 new sizes vs (375px) and xxxl(2560px) enjoy. -->

| Devices  |                                       Pixles    | Description                                                           |
| ----------------- | ------------- | -----|
| vs  | <427px  | Very small devices      |
| xs  | <567px  | Extra small devices     |
| sm  | <768px  | Small devices           |
| md  | <867px  | Medium devices          |
| lg  | <1024px | Large devices           |
| xl  | <1225px | Extra large devices     |
| xxl | <1440px | Very extra large devices |
<!-- | ----------------- | ------------- | -----|
| vs  | <375px  | Very small devices      |
| xs  | <427px  | Extra small devices      |
| sm  | <567px  | Small devices     |
| md  | <768px  | Medium devices           |
| mmd  | <867px  | Medium Middle devices          |
| lg  | <1024px | Large devices           |
| xl  | <1225px | Extra large devices     |
| xxl | <1440px | Very extra large devices |
| xxxl | <2560px | 4k large devices | -->


<!-- ## Don't Uses This Sizes -->




## Usage

```js
import React from 'react';
import 'future-tint/dist/common.min.css';

<div class="px-10px px-10px--sm h-50px fs-22px rd-20px rd-tl-15px">
  Your Content Here.
</div>
```

in this use `px` means `padding-left` and `right`, `h-50px `means height is `50px`, `rd-20px` = borader radius is `20px` and `rd-tl-20px` means `border-top-left-radius 15px`

this FutureTint is help to build your web fast by using our classes with responsive


## Future Tint Components
we will launch soon our future tint components supported in react to build responsive pages with simlpe usage



## Developed By

This is Future Tint are built by `Future Apps` [Visit Our Website](https://futureapps.in)