https://github.com/ramxcodes/flow-css
Go with the Flow, CSS that Makes Your Website Glow!
https://github.com/ramxcodes/flow-css
flow flow-css
Last synced: 11 months ago
JSON representation
Go with the Flow, CSS that Makes Your Website Glow!
- Host: GitHub
- URL: https://github.com/ramxcodes/flow-css
- Owner: ramxcodes
- License: mit
- Created: 2024-03-30T19:09:59.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-30T23:01:52.000Z (about 2 years ago)
- Last Synced: 2025-03-26T23:11:14.857Z (about 1 year ago)
- Topics: flow, flow-css
- Language: CSS
- Homepage:
- Size: 104 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flow CSS
`Flow CSS` is a lightweight CSS utility library created by Ramkrishna aka @ramxcodes. It provides simple utility classes to quickly style your HTML elements. With Flow CSS, create modern, aesthetically pleasing websites has never been easier. Design faster, smarter, better!
Go with the Flow, CSS that Makes Your Website Glow!
[](https://twitter.com/intent/follow?screen_name=ramxcodes)
## Table of Contents
- [Getting Started](#getting-started)
- [Utility Classes](#utility-classes)
- [Spacing Padding and Margin](#Spacing-Padding-and-Margin)
- [Text and Element Alignment](#Text-and-Element-Alignment)
- [Text and Background Colors](#text-and-background-colors)
- [Screen Height and Width](#screen-height-and-width)
- [Display](#display)
- [Credits](#Credits)
- [License](#license)
## Getting Started
To get started with `Flow CSS`, simply include the CSS file in your HTML document.
Local
```html
```
Cdn
```html
```
## Last Updated
Last updated : `31 March 2024`
changelog
| Version | Description |
|---|---|
|
V 1.0
| - Removed all default styles for elements and pseudo elements
- Added Custom Variables pseudo root class
- Added Padding & Margin classes
- Added Center Text and Element classes
- Added Text color classes
- Added Background color classes
- Added screen height and width classes
## Utility Classes
### Spacing Padding and Margin
`Flow CSS` provides utility classes for padding and margin. The classes follow a naming convention like `p-{value}` for padding and `m-{value}` for margin, where `{value}` ranges from 0 to 10.
Example:
```html
```
### Padding Classes
Padding
| Padding Classes | Description |
|---|---|
| p-0 | Padding of 0 |
| p-1 | Padding of 0.25rem |
| p-2 | Padding of 0.5rem |
| p-3 | Padding of 0.75rem |
| p-4 | Padding of 1rem |
| p-5 | Padding of 1.5rem |
| p-6 | Padding of 2rem |
| p-7 | Padding of 2.5rem |
| p-8 | Padding of 3rem |
| p-9 | Padding of 4rem |
| p-10 | Padding of 5rem |
Padding Top
| Padding Top Classes | Description |
|---|---|
| pt-0 | Padding top of 0 |
| pt-1 | Padding top of 0.25rem |
| pt-2 | Padding top of 0.5rem |
| pt-3 | Padding top of 0.75rem |
| pt-4 | Padding top of 1rem |
| pt-5 | Padding top of 1.5rem |
| pt-6 | Padding top of 2rem |
| pt-7 | Padding top of 2.5rem |
| pt-8 | Padding top of 3rem |
| pt-9 | Padding top of 4rem |
| pt-10| Padding top of 5rem |
Padding Bottom
| Padding Bottom Classes | Description |
|---|---|
| pb-0 | Padding bottom of 0 |
| pb-1 | Padding bottom of 0.25rem |
| pb-2 | Padding bottom of 0.5rem |
| pb-3 | Padding bottom of 0.75rem |
| pb-4 | Padding bottom of 1rem |
| pb-5 | Padding bottom of 1.5rem |
| pb-6 | Padding bottom of 2rem |
| pb-7 | Padding bottom of 2.5rem |
| pb-8 | Padding bottom of 3rem |
| pb-9 | Padding bottom of 4rem |
| pb-10| Padding bottom of 5rem |
Padding Left
| Padding left Classes | Description |
|---|---|
| pl-0 | Padding left of 0 |
| pl-1 | Padding left of 0.25rem |
| pl-2 | Padding left of 0.5rem |
| pl-3 | Padding left of 0.75rem |
| pl-4 | Padding left of 1rem |
| pl-5 | Padding left of 1.5rem |
| pl-6 | Padding left of 2rem |
| pl-7 | Padding left of 2.5rem |
| pl-8 | Padding left of 3rem |
| pl-9 | Padding left of 4rem |
| pl-10| Padding left of 5rem |
Padding Right
| Padding Right Classes | Description |
|---|---|
| pr-0 | Padding right of 0 |
| pr-1 | Padding right of 0.25rem |
| pr-2 | Padding right of 0.5rem |
| pr-3 | Padding right of 0.75rem |
| pr-4 | Padding right of 1rem |
| pr-5 | Padding right of 1.5rem |
| pr-6 | Padding right of 2rem |
| pr-7 | Padding right of 2.5rem |
| pr-8 | Padding right of 3rem |
| pr-9 | Padding right of 4rem |
| pr-10| Padding right of 5rem |
Padding Left & Right
| Padding Left & Right Classes | Description |
|---|---|
| px-0 | Padding Left & Right of 0 |
| px-1 | Padding Left & Right of 0.25rem |
| px-2 | Padding Left & Right of 0.5rem |
| px-3 | Padding Left & Right of 0.75rem |
| px-4 | Padding Left & Right of 1rem |
| px-5 | Padding Left & Right of 1.5rem |
| px-6 | Padding Left & Right of 2rem |
| px-7 | Padding Left & Right of 2.5rem |
| px-8 | Padding Left & Right of 3rem |
| px-9 | Padding Left & Right of 4rem |
| px-10| Padding Left & Right of 5rem |
Padding Top & Bottom
| Padding Top & Bottom Classes | Description |
|---|---|
| py-0 | Padding Top & Bottom of 0 |
| py-1 | Padding Top & Bottom of 0.25rem |
| py-2 | Padding Top & Bottom of 0.5rem |
| py-3 | Padding Top & Bottom of 0.75rem |
| py-4 | Padding Top & Bottom of 1rem |
| py-5 | Padding Top & Bottom of 1.5rem |
| py-6 | Padding Top & Bottom of 2rem |
| py-7 | Padding Top & Bottom of 2.5rem |
| py-8 | Padding Top & Bottom of 3rem |
| py-9 | Padding Top & Bottom of 4rem |
| py-10| Padding Top & Bottom of 5rem |
### Margin Classes
Margin
| Margin Classes | Description |
|---|---|
| m-0 | Margin of 0 |
| m-1 | Margin of 0.25rem |
| m-2 | Margin of 0.5rem |
| m-3 | Margin of 0.75rem |
| m-4 | Margin of 1rem |
| m-5 | Margin of 1.5rem |
| m-6 | Margin of 2rem |
| m-7 | Margin of 2.5rem |
| m-8 | Margin of 3rem |
| m-9 | Margin of 4rem |
| m-10 | Margin of 5rem |
Margin Top
| Margin Top Classes | Description |
|---|---|
| mt-0 | Margin top of 0 |
| mt-1 | Margin top of 0.25rem |
| mt-2 | Margin top of 0.5rem |
| mt-3 | Margin top of 0.75rem |
| mt-4 | Margin top of 1rem |
| mt-5 | Margin top of 1.5rem |
| mt-6 | Margin top of 2rem |
| mt-7 | Margin top of 2.5rem |
| mt-8 | Margin top of 3rem |
| mt-9 | Margin top of 4rem |
| mt-10| Margin top of 5rem |
Margin Bottom
| Margin Bottom Classes | Description |
|---|---|
| mb-0 | Margin bottom of 0 |
| mb-1 | Margin bottom of 0.25rem |
| mb-2 | Margin bottom of 0.5rem |
| mb-3 | Margin bottom of 0.75rem |
| mb-4 | Margin bottom of 1rem |
| mb-5 | Margin bottom of 1.5rem |
| mb-6 | Margin bottom of 2rem |
| mb-7 | Margin bottom of 2.5rem |
| mb-8 | Margin bottom of 3rem |
| mb-9 | Margin bottom of 4rem |
| mb-10| Margin bottom of 5rem |
Margin Left
| Margin left Classes | Description |
|---|---|
| ml-0 | Margin left of 0 |
| ml-1 | Margin left of 0.25rem |
| ml-2 | Margin left of 0.5rem |
| ml-3 | Margin left of 0.75rem |
| ml-4 | Margin left of 1rem |
| ml-5 | Margin left of 1.5rem |
| ml-6 | Margin left of 2rem |
| ml-7 | Margin left of 2.5rem |
| ml-8 | Margin left of 3rem |
| ml-9 | Margin left of 4rem |
| ml-10| Margin left of 5rem |
Margin Right
| Margin Right Classes | Description |
|---|---|
| mr-0 | Margin right of 0 |
| mr-1 | Margin right of 0.25rem |
| mr-2 | Margin right of 0.5rem |
| mr-3 | Margin right of 0.75rem |
| mr-4 | Margin right of 1rem |
| mr-5 | Margin right of 1.5rem |
| mr-6 | Margin right of 2rem |
| mr-7 | Margin right of 2.5rem |
| mr-8 | Margin right of 3rem |
| mr-9 | Margin right of 4rem |
| mr-10| Margin right of 5rem |
Margin Left & Right
| Margin Left & Right Classes | Description |
|---|---|
| mx-0 | Margin Left & Right of 0 |
| mx-1 | Margin Left & Right of 0.25rem |
| mx-2 | Margin Left & Right of 0.5rem |
| mx-3 | Margin Left & Right of 0.75rem |
| mx-4 | Margin Left & Right of 1rem |
| mx-5 | Margin Left & Right of 1.5rem |
| mx-6 | Margin Left & Right of 2rem |
| mx-7 | Margin Left & Right of 2.5rem |
| mx-8 | Margin Left & Right of 3rem |
| mx-9 | Margin Left & Right of 4rem |
| mx-10| Margin Left & Right of 5rem |
Margin Top & Bottom
| Margin Top & Bottom Classes | Description |
|---|---|
| my-0 | Margin Top & Bottom of 0 |
| my-1 | Margin Top & Bottom of 0.25rem |
| my-2 | Margin Top & Bottom of 0.5rem |
| my-3 | Margin Top & Bottom of 0.75rem |
| my-4 | Margin Top & Bottom of 1rem |
| my-5 | Margin Top & Bottom of 1.5rem |
| my-6 | Margin Top & Bottom of 2rem |
| my-7 | Margin Top & Bottom of 2.5rem |
| my-8 | Margin Top & Bottom of 3rem |
| my-9 | Margin Top & Bottom of 4rem |
| my-10| Margin Top & Bottom of 5rem |
### Text and Element Alignment
Classes `text-center`, `center-x`, `center-y`, and `center-xy` are provided for text and element alignment.
Example:
```html
```
### Text and Background Colors
Utility classes are available for text and background colors using semantic color names.
Example:
```html
```
Text Colors
text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-light
text-dark
Background Colors
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
### Screen Height and Width
Classes `screen-height` and `screen-width` are provided to set elements to full viewport height and width.
Example:
```html
```
### Display
Classes like `inline`, `block`, and `inline-block` are available to set the display property of elements.
Example:
```html
This text is displayed inline.
```
## Credits
`Flow CSS` is created by `Ramkrishna` don't forgot to star the git repo follow me on github [ramxcodes](https://github.com/ramxcodes).
## Contributing
Feel free to contribute to `Flow CSS` by submitting `pull requests` or `opening issues` on GitHub.
## License
`Flow CSS` is released under the MIT License. See [LICENSE](./LICENSE) for details.