# CSS Library Documentation: Responsive Font System
## Introduction
Welcome to the documentation for the **font.css** library. This lightweight CSS library provides predefined font-size classes to ensure scalable and responsive typography across different screen sizes.
## Features
- **Predefined font sizes**: `1vw` to `100vw`
- **Viewport-based scaling** for fluid typography
- **Responsive design support** for mobile and tablet screens
- **Easy-to-use class-based system**
## Installation
Include the `font.css` file in your project:
```html
```
## Usage
### Default Font Classes (Large Screens)
Apply font sizes using `.f-*` classes:
- `.f-10` → `font-size: 10vw;`
- `.f-20` → `font-size: 20vw;`
- `.f-50` → `font-size: 50vw;`
Example:
```html
This text is 10vw in size.
```
### Mobile-Specific Font Classes (≤ 480px)
Use `.mf-*` classes for smaller screens:
```css
@media (max-width: 480px) {
.mf-10 { font-size: 10vw; }
}
```
Example:
```html
This text is 5vw on mobile.
```
### Tablet-Specific Font Classes (481px - 768px)
For tablets, use `.tf-*` classes:
```css
@media (min-width: 481px) and (max-width: 768px) {
.tf-15 { font-size: 15vw; }
}
```
Example:
```html
This text is 15vw on tablets.
```
## Conclusion
The **font.css** library simplifies responsive typography with predefined classes, ensuring optimal readability across devices. Include it in your project today for scalable font management!
# CSS Library Documentation: Margin & Padding System
## Introduction
Welcome to the documentation for the **mp.css** library. This lightweight CSS library provides a predefined set of margin and padding classes to simplify spacing management in your web projects. Designed with responsiveness in mind, it includes styles for desktops, tablets, and mobile devices.
## Features
- **Predefined spacing classes**: From `1px` to `100px`
- **Support for all directions**: `top`, `bottom`, `left`, `right`
- **Mobile and tablet-specific styles**
- **Lightweight and easy to implement**
## Installation
Simply include the `mp.css` file in your project:
```html
```
## Usage
### Margin Classes
Use the following classes to add margins to elements:
- `.tm-10` → `margin-top: 10px;`
- `.bm-20` → `margin-bottom: 20px;`
- `.rm-15` → `margin-right: 15px;`
- `.lm-5` → `margin-left: 5px;`
Example:
```html
This div has a top margin of 20px and a bottom margin of 10px.
This paragraph has top and bottom padding of 10px.
```
## Responsive Design
### Mobile (≤ 480px)
For mobile screens, use `mtm-*`, `mbm-*`, `mrm-*`, `mlm-*`, `mtp-*`, `mbp-*`, `mrp-*`, and `mlp-*` classes.
```css
@media (max-width: 480px) {
.mtm-10 { margin-top: 10px; }
}
```
### Tablet (481px - 768px)
For tablets, use `ttm-*`, `tbm-*`, `trm-*`, `tlm-*`, `ttp-*`, `tbp-*`, `trp-*`, and `tlp-*` classes.
```css
@media (min-width: 481px) and (max-width: 768px) {
.ttm-20 { margin-top: 20px; }
}
```
## Conclusion
The **mp.css** library provides an easy-to-use system for managing margins and padding in web design. It is lightweight, flexible, and enhances responsive design. Include it in your project today for effortless spacing management!
