Introduction
Simply-UI is a collection of components which are built in pure HTML and CSS.
In each component section, code snippet has the code of the actual example which is shown above the code snippet.
Installation
To use the pre-made classes import main CSS file and for icons import fontawesome icon file as per shown below.
Alert
Alert lets you monitor any website (or specific parts of it) you wish in order to be notified when it's updated.
Simple alerts
These alerts are alerts that has specific colors for specfic event.
Simple information alert - check it out
Simple secondary alert - check it out
Simple success alert - check it out
Simple danger alert - check it out
Simple warning alert - check it out
Alerts with link
Alerts that give event message with link for that what to do next.
Information alert with link - check it out
Secondary alert with link - check it out
Success alert with link - check it out
Danger alert with link - check it out
Warning alert with link - check it out
Alerts with icons
Icons in alert message represents the event analogy for alert.
Simple information alert - check it out
Simple success alert - check it out
Simple danger alert - check it out
Simple warning alert - check it out
Avatar
Avatar represents users profile pic for logged in users on websites.
Circular avatar
It shows circular profile pic for logged in users.
Rounded corner avatar
This is a square avatar with rounded corners.
Circular letter avatar
It represents the first letter as an image in your avatar.
Square letter avatar
It represents the first letter as an image with square shape.
Badges
Badges are important to show user current status, notification counts, no. of products in carts etc...
Status badges
Status badges are used to show current status of user like active, away, do not disturb and invisible.
Status badges
Status badges are used to show current status of user like active, away, do not disturb and invisible.
Cards
Cards are generally used in e-commerce app for showing product information.
Text only card
A card in which contents are placed in horizontal direction.
Cards with shadow
Cards have shadow effect around it.
Cards with badge
Cards have badge on it for its current status e.g trending, best value etc...
Cards with dismissal
Dismissal card have funcionality to remove card from the list.
Card with text overlay
Crads having text overlay to it to show important information about it.
Images
Images are most important for any web projects. It can be in any shape like circle or rectangle.
Responsive images
Responsive images are the images that will have some fixed height and width, and it will scale according to parent element.
Circular image
Add snippet class to get rounded shape image.
Rounded corner image
These images have corners rounded with square shape.
Input
Input element in HTML provides user to enter usres details via built in default components.
Simple inputs
Simple textbox with input type text allows user to enter user's name, state, country etc...
Disabled text box
Text box is disabled by attaching attribute called disabled.
Phone number
Phone number input takes input type as tel and maxlength as 10 to enter valid phone number.
Validation success
User enters the valid username then input will give success message.
Validation error
User enters the invalid password then input will give error message.
Lists
Lists are collection of similar type of items in the list form. It can be unordered or ordered list.
Un-ordered lists
Lists that has symbols to represent each list-item is un-ordered list.
- Pop OS
- Manjaro
- Endeavour OS
- Ubuntu
- Pop OS
- Manjaro
- Endeavour OS
- Ubuntu
Ordered lists
Lists that has specific number sequence or alphabet sequence or any sequence to represent each list-item is Ordered list.
- Pop OS
- Manjaro
- Endeavour OS
- Ubuntu
- Pop OS
- Manjaro
- Endeavour OS
- Ubuntu
Notification lists
Notification list is a collection of all individual notification.
- Your ordered delivered successfully
- You have used 90% of your data.
- This will harm your phone.
Modal
A modal is a dialog box/popup window that is displayed on top of the current page: Open Modal.
Login for better experience.
goodreads is like social media for book readers.
Toast
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
Hurray! Successfully logged in
Oops! password is too weak
Sorry! Email is not registered yet.
Text Utilities
Text utilities are Semantic HTML tags with different fontsize, fontweight.
Headings
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
Small text
Gray text
I love the smell of book ink in the morning.
Align text
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
I love the smell of book ink in the morning.
Grids
Grids are basically to show your childs into grid form just like pictures in gallery, products on flipKart etc...
Different Winter
By Mia JacksonThink twice, write it on paper and do it in actions.
₹325₹65050%off
Different Winter
By Mia JacksonThink twice, write it on paper and do it in actions.
₹325₹65050%off
Trending
Different Winter
By Mia JacksonThink twice, write it on paper and do it in actions.
₹325₹65050%off
Different Winter
By Mia JacksonThink twice, write it on paper and do it in actions.
₹325₹65050%off
Different Winter
By Mia JacksonThink twice, write it on paper and do it in actions.
₹325₹65050%off