/cosmos-ui-cl-ufa

Cosmos-UI, A Utility-First Component Library that provides you with all the responsive components you need for your project.

Primary LanguageCSSMIT LicenseMIT


Cosmos UI

Cosmos UI

Cosmos of Components for your next awesome project! 
Fast | Responsive | Utility-First-Approach | Everything you need


Content
  1. Introduction
  2. How To Use
  3. Components
  4. Technology/ Languages Used
  5. How to Run Locally
  6. How to Contribute
  7. Social Links

📌 Introduction

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.


How To Use

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.

Import in the <head> of HTML file:

<link rel="stylesheet" href="https://cosmos-ui-cl-ufa.vercel.app/styles/cosmos-ui.css"/>

Import in your main CSS stylesheet:

@import "https://cosmos-ui-cl-ufa.vercel.app/styles/comos-ui.css";

Components

  • 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.

Cards

grids 50-50,30-70,70-30

grid-4-col

alerts

avatars

badges

badges 2

buttons 1

buttons2

images

inputs

typography 1

typography 2

lists

Navigation

modal

toasts

rating

Technology/ Languages Used

  • HTML
  • CSS
  • JavaScript


How to Run locally:

  • 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!



How to Contribute

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!

Contribution Guidelines-

  1. Fork the Project
  2. Creata a branch for your feature/ idea. Please do give a good name for the branch that tells about the feature.
  3. Stage your changes
  4. Commit your changes
  5. Push the changes to your remote branch
  6. Open and Create a PR

Social Links

Let's connect and talk about development, music, books and much more 🌠!

GitHub Profile  ·  LinkedIn Profile  ·  Twitter Profile  · 


Check out my developer portfolio 🌐-

Rishabh Rathore

Copyright © 2022
👩‍💻 Rishabh Rathore