Cosmos of Components for your next awesome project!
Fast | Responsive | Utility-First-Approach | Everything you need
Fast | Responsive | Utility-First-Approach | Everything you need
Content
Cosmos UI is an open source CSS library aimed at quick, responsive, and simple development of web UI-UX. With Cosmos, you can leave your design worries and get started with a completely logic-driven development for your websites. Cosmos has examples, code snippets and live demos for all the components.
Visit Cosmos UI Documentation Website and check out the documentation for the library. To use Cosmos in your project, include the CSS file in the main stylesheet using @import or in the <head> of your index.html file using <link>.
Copy-paste the below code in the <head> section of your HTML files to load predefined styles, components and utilities.
In Documentation, example's html code is written, you can directly copy and paste in your html file. Documentation has all the demo display of all the components which will help you to have a visual image of components.
<link rel="stylesheet" href="https://cosmos-ui-cl-ufa.vercel.app/styles/cosmos-ui.css"/>@import "https://cosmos-ui-cl-ufa.vercel.app/styles/comos-ui.css";- Alert
- Cosmos offers simple alerts and alerts with a close icon in the following themes - primary, secondary, success, warning, and error.
- To add alerts to your project, use the following url-
- Import using HTML
<link rel="stylesheet"href="https://cosmos-ui-cl-ufa.vercel.app/components/alerts/alerts.css" />
- OR, Import using CSS
@import " href="https://cosmos-ui-cl.netlify.app/Components/Alerts/alerts.css";
Likewise other components can be added.
Below are the Previews attched in a gif and jpg format to give you an Idea about them.
- HTML
- CSS
- JavaScript
-
To run this project locally, use the following command in your CLI:
git clone https://github.com/rishbitsnbytes/cosmos-ui-component-library.git -
Open your favorite code editor and run locally!
Contributions and ideas to this library are more than welcome!
If you want to contribute or have ideas for this project, just fork the repo and create a PR. If you spot a bug, you are more than welcome to open an issue! Do ⭐ this project!
- Fork the Project
- Creata a branch for your feature/ idea. Please do give a good name for the branch that tells about the feature.
- Stage your changes
- Commit your changes
- Push the changes to your remote branch
- Open and Create a PR
Let's connect and talk about development, music, books and much more 🌠!
Check out my developer portfolio 🌐-
Copyright © 2022
👩💻 Rishabh Rathore
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent