diff --git a/Assests/logo.jpg b/Assests/logo.jpg new file mode 100644 index 0000000..5ffce97 Binary files /dev/null and b/Assests/logo.jpg differ diff --git a/README.md b/README.md index 4b96106..6d8e571 100644 --- a/README.md +++ b/README.md @@ -1 +1,424 @@ -# Flow-Css \ No newline at end of file + +# 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!

+ +![GitHub repo size](https://img.shields.io/github/repo-size/ramxcodes/Flow-Css) +![GitHub stars](https://img.shields.io/github/stars/ramxcodes/Flow-Css?style=social) +![GitHub forks](https://img.shields.io/github/forks/ramxcodes/Flow-Css?style=social) +[![Twitter Follow](https://img.shields.io/twitter/follow/ramxcodes?style=social)](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

| | +
+ +## 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 +
This div has padding of 1rem.
+
This div has margin of 0.5rem.
+``` + +### 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 +
This text is centered.
+
This element is horizontally centered.
+
This element is vertically centered.
+
This element is horizontally and vertically centered.
+``` + +### Text and Background Colors + +Utility classes are available for text and background colors using semantic color names. + +Example: +```html +
This text is in primary color.
+
This div has secondary background color.
+``` +
+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 +
This div takes full viewport height.
+
This div takes full viewport width.
+``` + +### Display + +Classes like `inline`, `block`, and `inline-block` are available to set the display property of elements. + +Example: +```html +This text is displayed inline. +
This div is displayed as a block element.
+
This div is displayed as a inline block element.
+``` + +## 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. \ No newline at end of file diff --git a/flow.css b/flow.css new file mode 100644 index 0000000..c3ccfba --- /dev/null +++ b/flow.css @@ -0,0 +1,658 @@ +/* Flow Css Created By Ramkrishna aka @ramxcodes */ + +:root { + --color-primary: #007bff; + --color-secondary: #6c757d; + --color-success: #28a745; + --color-danger: #dc3545; + --color-warning: #ffc107; + --color-info: #17a2b8; + --color-light: #f8f9fa; + --color-dark: #343a40; + } + *, + ::after, + ::before { + box-sizing: border-box; + } + body, + h1, + h2, + h3, + h4, + h5, + h6, + p, + ul, + ol, + dl, + blockquote, + fieldset, + figure, + menu, + hr { + margin: 0; + } + ul { + list-style: none; + } + a { + text-decoration: none; + } + button { + border: none; + padding: 0; + background-color: #0000; + } + .p-0 { + padding: 0; + } + .p-1 { + padding: 0.25rem; + } + .p-2 { + padding: 0.5rem; + } + .p-3 { + padding: 0.75rem; + } + .p-4 { + padding: 1rem; + } + .p-5 { + padding: 1.5rem; + } + .p-6 { + padding: 2rem; + } + .p-7 { + padding: 2.5rem; + } + .p-8 { + padding: 3rem; + } + .p-9 { + padding: 4rem; + } + .p-10 { + padding: 5rem; + } + .pt-0 { + padding-top: 0; + } + .pt-1 { + padding-top: 0.25rem; + } + .pt-2 { + padding-top: 0.5rem; + } + .pt-3 { + padding-top: 0.75rem; + } + .pt-4 { + padding-top: 1rem; + } + .pt-5 { + padding-top: 1.5rem; + } + .pt-6 { + padding-top: 2rem; + } + .pt-7 { + padding-top: 2.5rem; + } + .pt-8 { + padding-top: 3rem; + } + .pt-9 { + padding-top: 4rem; + } + .pt-10 { + padding-top: 5rem; + } + .pb-0 { + padding-bottom: 0; + } + .pb-1 { + padding-bottom: 0.25rem; + } + .pb-2 { + padding-bottom: 0.5rem; + } + .pb-3 { + padding-bottom: 0.75rem; + } + .pb-4 { + padding-bottom: 1rem; + } + .pb-5 { + padding-bottom: 1.5rem; + } + .pb-6 { + padding-bottom: 2rem; + } + .pb-7 { + padding-bottom: 2.5rem; + } + .pb-8 { + padding-bottom: 3rem; + } + .pb-9 { + padding-bottom: 4rem; + } + .pb-10 { + padding-bottom: 5rem; + } + .pl-0 { + padding-left: 0; + } + .pl-1 { + padding-left: 0.25rem; + } + .pl-2 { + padding-left: 0.5rem; + } + .pl-3 { + padding-left: 0.75rem; + } + .pl-4 { + padding-left: 1rem; + } + .pl-5 { + padding-left: 1.5rem; + } + .pl-6 { + padding-left: 2rem; + } + .pl-7 { + padding-left: 2.5rem; + } + .pl-8 { + padding-left: 3rem; + } + .pl-9 { + padding-left: 4rem; + } + .pl-10 { + padding-left: 5rem; + } + .pr-0 { + padding-right: 0; + } + .pr-1 { + padding-right: 0.25rem; + } + .pr-2 { + padding-right: 0.5rem; + } + .pr-3 { + padding-right: 0.75rem; + } + .pr-4 { + padding-right: 1rem; + } + .pr-5 { + padding-right: 1.5rem; + } + .pr-6 { + padding-right: 2rem; + } + .pr-7 { + padding-right: 2.5rem; + } + .pr-8 { + padding-right: 3rem; + } + .pr-9 { + padding-right: 4rem; + } + .pr-10 { + padding-right: 5rem; + } + .px-0 { + padding-left: 0; + padding-right: 0; + } + .px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; + } + .px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; + } + .px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + .px-5 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + .px-6 { + padding-left: 2rem; + padding-right: 2rem; + } + .px-7 { + padding-left: 2.5rem; + padding-right: 2.5rem; + } + .px-8 { + padding-left: 3rem; + padding-right: 3rem; + } + .px-9 { + padding-left: 4rem; + padding-right: 4rem; + } + .px-10 { + padding-left: 5rem; + padding-right: 5rem; + } + .py-0 { + padding-top: 0; + padding-bottom: 0; + } + .py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; + } + .py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + .py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } + .py-4 { + padding-top: 1rem; + padding-bottom: 1rem; + } + .py-5 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } + .py-6 { + padding-top: 2rem; + padding-bottom: 2rem; + } + .py-7 { + padding-top: 2.5rem; + padding-bottom: 2.5rem; + } + .py-8 { + padding-top: 3rem; + padding-bottom: 3rem; + } + .py-9 { + padding-top: 4rem; + padding-bottom: 4rem; + } + .py-10 { + padding-top: 5rem; + padding-bottom: 5rem; + } + .m-0 { + margin: 0; + } + .m-1 { + margin: 0.25rem; + } + .m-2 { + margin: 0.5rem; + } + .m-3 { + margin: 0.75rem; + } + .m-4 { + margin: 1rem; + } + .m-5 { + margin: 1.5rem; + } + .m-6 { + margin: 2rem; + } + .m-7 { + margin: 2.5rem; + } + .m-8 { + margin: 3rem; + } + .m-9 { + margin: 4rem; + } + .m-10 { + margin: 5rem; + } + .mt-0 { + margin-top: 0; + } + .mt-1 { + margin-top: 0.25rem; + } + .mt-2 { + margin-top: 0.5rem; + } + .mt-3 { + margin-top: 0.75rem; + } + .mt-4 { + margin-top: 1rem; + } + .mt-5 { + margin-top: 1.5rem; + } + .mt-6 { + margin-top: 2rem; + } + .mt-7 { + margin-top: 2.5rem; + } + .mt-8 { + margin-top: 3rem; + } + .mt-9 { + margin-top: 4rem; + } + .mt-10 { + margin-top: 5rem; + } + .mb-0 { + margin-bottom: 0; + } + .mb-1 { + margin-bottom: 0.25rem; + } + .mb-2 { + margin-bottom: 0.5rem; + } + .mb-3 { + margin-bottom: 0.75rem; + } + .mb-4 { + margin-bottom: 1rem; + } + .mb-5 { + margin-bottom: 1.5rem; + } + .mb-6 { + margin-bottom: 2rem; + } + .mb-7 { + margin-bottom: 2.5rem; + } + .mb-8 { + margin-bottom: 3rem; + } + .mb-9 { + margin-bottom: 4rem; + } + .mb-10 { + margin-bottom: 5rem; + } + .ml-0 { + margin-left: 0; + } + .ml-1 { + margin-left: 0.25rem; + } + .ml-2 { + margin-left: 0.5rem; + } + .ml-3 { + margin-left: 0.75rem; + } + .ml-4 { + margin-left: 1rem; + } + .ml-5 { + margin-left: 1.5rem; + } + .ml-6 { + margin-left: 2rem; + } + .ml-7 { + margin-left: 2.5rem; + } + .ml-8 { + margin-left: 3rem; + } + .ml-9 { + margin-left: 4rem; + } + .ml-10 { + margin-left: 5rem; + } + .mr-0 { + margin-right: 0; + } + .mr-1 { + margin-right: 0.25rem; + } + .mr-2 { + margin-right: 0.5rem; + } + .mr-3 { + margin-right: 0.75rem; + } + .mr-4 { + margin-right: 1rem; + } + .mr-5 { + margin-right: 1.5rem; + } + .mr-6 { + margin-right: 2rem; + } + .mr-7 { + margin-right: 2.5rem; + } + .mr-8 { + margin-right: 3rem; + } + .mr-9 { + margin-right: 4rem; + } + .mr-10 { + margin-right: 5rem; + } + .mx-0 { + margin-left: 0; + margin-right: 0; + } + .mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + .mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + .mx-3 { + margin-left: 0.75rem; + margin-right: 0.75rem; + } + .mx-4 { + margin-left: 1rem; + margin-right: 1rem; + } + .mx-5 { + margin-left: 1.5rem; + margin-right: 1.5rem; + } + .mx-6 { + margin-left: 2rem; + margin-right: 2rem; + } + .mx-7 { + margin-left: 2.5rem; + margin-right: 2.5rem; + } + .mx-8 { + margin-left: 3rem; + margin-right: 3rem; + } + .mx-9 { + margin-left: 4rem; + margin-right: 4rem; + } + .mx-10 { + margin-left: 5rem; + margin-right: 5rem; + } + .my-0 { + margin-top: 0; + margin-bottom: 0; + } + .my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } + .my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + .my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; + } + .my-4 { + margin-top: 1rem; + margin-bottom: 1rem; + } + .my-5 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + } + .my-6 { + margin-top: 2rem; + margin-bottom: 2rem; + } + .my-7 { + margin-top: 2.5rem; + margin-bottom: 2.5rem; + } + .my-8 { + margin-top: 3rem; + margin-bottom: 3rem; + } + .my-9 { + margin-top: 4rem; + margin-bottom: 4rem; + } + .my-10 { + margin-top: 5rem; + margin-bottom: 5rem; + } + + + /* Center Text and Element */ + + .text-center { + text-align: center; + } + .center-x { + display: flex; + justify-content: center; + } + .center-y { + display: flex; + align-items: center; + } + .center-xy { + display: flex; + justify-content: center; + align-items: center; + } + + /* Text color classes */ + + .text-primary { + color: var(--color-primary); + } + + .text-secondary { + color: var(--color-secondary); + } + + .text-success { + color: var(--color-success); + } + + .text-danger { + color: var(--color-danger); + } + + .text-warning { + color: var(--color-warning); + } + + .text-info { + color: var(--color-info); + } + + .text-light { + color: var(--color-light); + } + + .text-dark { + color: var(--color-dark); + } + + + /* Background color classes */ + .bg-primary { + background-color: var(--color-primary); + } + + .bg-secondary { + background-color: var(--color-secondary); + } + + .bg-success { + background-color: var(--color-success); + } + + .bg-danger { + background-color: var(--color-danger); + } + + .bg-warning { + background-color: var(--color-warning); + } + + .bg-info { + background-color: var(--color-info); + } + + .bg-light { + background-color: var(--color-light); + } + + .bg-dark { + background-color: var(--color-dark); + } + + + /* screen height and width */ + .screen-height { + height: 100vh; + } + .screen-width { + width: 100vw; + } + .inline { + display: inline; + } + .block { + display: block; + } + .inline-block { + display: inline-block; + } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bd31599 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + + Flow Css + + + + +