Cascade UI - Cascade UI is a robust and open-source repository of production-ready, customizable and reusable code components.

BUILD YOUR IDEAS MUCH FASTER.

Table of contents

• Overview

  • Installation Guide
  • Documentation

• My Journey

  • Tech Stack
  • What I learned
  • Resources

• Running this app Locally

• Contributing to the project

• Developer

Overview

Cascade UI is a lightweight, robust component library made with clean components. With the help of this, developers can build their projects much faster using pre-defined classes while focussing on functionality rather than designing.

Installation Guide

Copy and paste the below code in the head tag of your html document and start using the Cascade UI by just adding class names to your html elements.

<link
  rel="stylesheet"
  href="https://cascadeui-robust.netlify.app/css/components.css"
/>

Documentation

Cascade UI has the following components:

• Avatar
• Alert
• Badge
• Button
• Card
• Image
• Input
• Text Utilities
• Lists
• Navigation
• Modal
• Rating
• Toast
• Simplified Grid
• Slider

My Journey

What I learned

Making this Component Library helped me to brush up my CSS skills. Now, I am familiar with the designing styles. Really learnt a lot.

My Takeaways:

1. Don’t take CSS as hit-&-trial, rather take it up logically. Understand why something is not working and other thing is. 🎯
2. Value calculations in CSS.
3. Stacking context and z-index.
4. Responsive images.
5. Flexbox.
6. Grid.

Tech Stack

• HTML5
• CSS3
• Flexbox Layout
• Grid Layout

Running this app Locally

1. Clone the repository by running this command in your terminal.

gh repo clone shanolhere/Cascade-UI

2. A directory named "Cascade-UI" will be created on your machine.
3. Go to the index.html and use the live server to run the project.

Contributing to the project

1. Do the steps (1-2) exactly as above.
2. Refer the style-guide.css and reset.css to get the idea what pattern is followed.
3. Create a new branch from dev branch.
4. Make the changes.
5. Commit the Changes.
6. Push the changes and open a pull request.
7. Pull request will be reviewed by the maintainer and merged if found okay.

Note: Please describe the component/changes you have made in your pull request. It would be nice if you could attach a visual example for the same.

Resources

• Font aswome
• Google font
• SVG Repo
• Pinterest

Developer

• Portfolio - PortfolioLink
• Twitter - TwitterLink