jsh854/uilab

The goal of this project is to create a easy to use ui library for people who are frustrated with one or the other thing in the thousands of ui libraries available out there.

What is UILab about ?

The goal of this project is to create a easy to use ui library for people who are frustrated with one or the other thing in the thousands of ui libraries available out there.

Getting started with this project

• Clone this repository into your machine.
• Once done go inside the uilab folder and do npm install - which will install everything needed (react with typescript)
• Run the app using npm start.
• Happy Hacking.

How to contribute!

• Take a issue/feature which has been posted by me and has a hacktoberfest tag to it.
• Make sure you read the issue/feature properly and start working on it.
• If you feel there is an issue/feature which is not there and you would want to create and work on do let me know .
• For PR's , please make sure you add the details when submitting so i would be clear on what you fixed with this pr.
• Always make sure you create a separate branch for your issue which you will be taking from main.

uilab's Issues

Modifications for Buttons

Try to make all possible modifications for buttons such that they will be easily accessible and usable.

Text

Text should be of different sizes

• h1 - h6
• base font size can be 12px

cards

Cards are always needed for every project and so they should have

• A simple card with heading , footer and description
• A card with image and text
• Sizes should be configurable

Inputs

Inputs should be of following type

• Simple Input (For email, text,number)
• Input with icon which can be configured (whether to be at end or start)
• Input with a dropdown (For number type inputs)

Images

For images , these things are required

• Avatar type images
• Images which will be easily configurable.

Grid

Every ui library has a grid or flexbox layout
But with our project the goal should be to make the grid layout so easy to use , that people dont have to check the docs again and again.

Think of it like this

we start by creating a div and give it classes for the no of rows , no of columns

• customisations can be huge e.g people want only rows give them
• people want only columns give them
• people want to set one column width larger then the other give them