Installation
Installation of Grand UI is quite simple. Put the below code snippet in your <head> tag. This will load the CSS cdn in your project. You will also require material-icons CDN as this component library make use of icons.
You can also use your own css along with our component library. To import this library directly into your main CSS put this below code at top inside your CSS file.
Avatar
Avatars used to display profile pictures are user profile in general. We have different formats for avatars that comes with various combination.
Avatar takes base class as avatar and then the image inside should have class as avatar-image
Round Avatar
Round Avatars come in 6 different sizes with values as Extra extra Large avatar-size-xxl, Extra Large avatar-size-xl, Large avatar-size-lg, Medium (by default this is medium), Small avatar-size-sm, Extra Small avatar-size-xs.
To use these avatar we use the base class avatar and on that class we use an add on class avatar-size-xxl, avatar-size-xl, avatar-size-sm, etc.
Text Avatar
Text avatar doesn't have any variations as such tough you can use different sizes to changes the avatar accordingly. The base class is same, here you rather use <p> tag inside avatar
XXL
XL
LG
MD
Avatar with Badges
Badges on avatar can be used to show different status of those Avatars. To use badges on avatar use base class avatar and then use one span tag. The span tag takes two class one is base class for badge and second one is for status.
Badges comes in 3 different status namely badge-idle for Idle state, badge-online for online status and badge-dnd for Do Not Disturb Status. If no status class is provided it by default takes in primary color.
Square Avatars
Square Avatar comes with different 6 different sizes. Classes used are same as that of Round Avatar. Here to make it square we use an add-on of avatar-square class. Rest everything remains same. So in total 3 classes are used i.e., base class avatar, class to define square shape avatar-square and last any of the size class.
Alert
Alerts are used to display messages that may require user attention. Here we can see different type of alerts with different colors.
Alerts has a base class as alert which takes 3 tags, one for icon one for message body and one is for close button interaction if any. The icon tag use class alert-icon and the body takes class as alert-body while the close button takes class as alert-close. Alert body have 2 tags one for header as alert-header and one of text as alert-text.
Close button is optional and only used if necessary.
Success. Action is completed.
Default Alert
Default alert have four different color variation based on the type of alert namely Error, Warning, Success and fourth one is default primary which can be used to display Information.
Alert takes default class of alert and then we need to specify extra class for the type of message. For default no need to specify extra class.
alert-color-success for Success messages.
alert-color-warning for Warning messages.
alert-color-error for Error messages.
Success. Action is completed.
Warning! Action may cause inconsistencies.
Error. Action Invalid
Info. This is a default color
Standard Alert
Standard Alert comes with one extra variation to the previous default variation. Here you have alert background as white which have a slightly cleaner look. To use standard alert add class alert-bg-default
Success. Action is completed.
Warning! Action may cause inconsistencies.
Error. Action Invalid
Info. This is a default color
Badge
Badge can be used for various purpose to show something new has appeared or to give some extra information on the existing components. Here the badge is contained inside one badge container class badge-container. the badge uses class asbadge. to display basic badge.
Badge element
7Icon and Text Badge
Round badge is basic type of badge used to emphasize on any Icon or text. To provide empty badges just provide empty badges. To provide square badges add class badge-square along with the basic badge class.
This badge text
7This badge text
66Color Badges
Badges also have different variations of colors. It has four different variations one being the primary which we have seen so far. The other 3 colors as Red, Green and Yellow. We specify this colors alongside the base badge class.
badge-red for Red color.
badge-yellow for Yellow color.
badge-green for Green color.
Cards
Cards comes with different variations for specific purpose. Cards have option for ad content description buttons and CTAs (call to Action). Most of these options that we use are optional and can be used along with utility classes to get desired results.
Below code is an basic example of card that we will be using.
card class is used to define card
card-img-wrapper class is used to wrap the image of card
card-content-wrapper class is kind of the main body of the card and used to wrap all the content including title, description and other Call To Actions.
card-content-wrapper class further takes all the below parameters:
- card-content class is takes all the content including title and description.
- card-title class is used to define the title of card
- card-description class is used to give description to the card
- card-cta class is used to define the cta items like price and buttons.
- card-price class is used for displaying price of the item.
- card-buttons class is wrapper class for all the buttons
My card
This is description of my card.
Vertical Card
Vertical card is the default card that appears when you use card class. Cards can have badge to emphasize on discount or trending products. It also has one optional favorite button icon.
card-badge class is used to add badge to card. To us it put it inside card component direct child.
card-favorite class is used to give favorite button which can act as add to wishlist or liked product. Again this is optional one.
My card
My card
Card with Text Overlay and Dismiss
Card also has parameter for displaying text overlay on to to display products Out-of-stock or Unavailable products. Also it has one cancel button
card-text-overlay class is used to add Text overlay to card. To us it put it inside card component as direct child.
card-dismiss-btn class is used to give dismiss icon button which can be used to cancel or delete card.
My card
My card
Card Horizontal
Horizontal cards are different variation of the card. Here the components are all aligned horizontally. It can be used in product listing or even in smaller screens or to display products at checkout it totally depends on you design.
To use horizontal use class card-horizontal along with class card rest is the same as above vertical card.
My card
Card List
Card lists are used to display list products in a vertical list as horizontal items. To make this card use card-list-item along with card and card-horizontal
Here to arrange items you don't have to make any structural changes.You just keep adding extra classes to the base card class. You cannot also add badges and favorite button or text overlay but then you have to add those components extra inside the card component.
My card
Text Card
Text card can be used to display a message to the user or to convey information about another product or any short note or give a brief description on any topic.
To use use text card. use text-card along with the base card class. Also you need to provide the text-card-description class along with card-description
My card
Image
Images component can be used to define responsive images that can adapt to the parent element. To use this we need to wrap it inside block named img-wrap and inside which we will have to declare an images with img class.
Default width of wrapper class is 100%. You can modify it with utilities using it along with wrapper class.
Square Responsive Image
Square image by default with a square shape to use it use class img inside wrapper class with <img> tag. The default width of this class is 100%.
Round Image
To define round images we use img-round class along with <img> tag. To use this we wrap it around wrapper class same as square image.
Input
Input fields can be used to take data from user or for taking inputs for authentication. The original input tag is wrapped inside wrapper class input-wrapper and we attach class input-field to <input> tag inside wrapper. This gives us our basic input field.
Input with messages and variations
Input field particularly comes with different color variations majorly displaying success, warning or error signs. Input wrapper also have one optional parameter to give an label to input to externally display what that input is responsible for inside the wrapper named as input-label which we provide inside input-wrapper class. It also have one class input-message to display any other messages related to input field which again we have to give inside wrapper class.
To display different color styles we have following classes:
input-color-success to display success messages.
input-color-warning to display warning messages.
input-color-error to display success messages.
Rounded Input
Rounded input provided us with round styled input fields. To use this we have to add an extra class input-rounded along with input-field class. You can also use to along with different colors as that of normal input tag and also add input-message class along with it. So everything is same just style changes.
Input with Full width
Input with full width can be used in places where you wish to make the input take teh size of the container to maintain consistent width across other inputs. You provide input-width-100 along with wrapper class input-wrapper
Multiline inputs
Multiline Inputs makes use of <textarea&> tag to make multiline comments possible. To use it use input-field-area along with input-field class inside wrapper class.
Text Utilities
Text Utilities component includes manipulation around Headings, font colors, font size, font weight, alignment and different utilities for text. The default font Grand-UI uses is Open Sans. and the font-size for 1rem equals 10px.
Heading
Heading can be applied using default h1, h2, h3, h4, h5, h6 tags. We can also use h1, h2, h3, h4, h5, h6 classes to define different heading sizes to other tags as well.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Alignment
Alignment utilities can be used to align text at different positions in the block. We use three different alignments:
text-align-left used to align text to left.
text-align-center used to align text in center.
text-align-right used to align text to right.
Left Text
Center Text
Right Text
Font color
Font colors are used to give text different font colors to text. It comes with 5 different colors which are as follows:
font-primary used for primary color
font-success used for green or success color
font-warning used for yellow or warning color
font-error used for error or red color
font-gray used for gray color
This is primary font color
This is success font color
This is warning font color
This is error font color
This is gray font color
Font Weight
Font weights are useful for providing emphasize on different type of fonts.We have use two different classes for same type of font weight so that user may use them according to their convenience. Below are some of the font weight classes that you apply on text element:
fw-300 and font-light used for light weight font
fw-400 and font-regular used for regular weight font
fw-500 and font-medium used for medium weight font
fw-600 and font-semi-bold used for semi-bold weight font
fw-700 and font-bold used for bold weight font
fw-800 and font-extra-bold used for Extra bold weight font
Light Font
Regular Font
Medium Font
Semi-Bold Font
Bold Font
Extra-bold Font
Font Size
Font sizes come in four different variations mainly small, medium, large and Extra large.
font-small used for small sized font.
font-medium used for medium sized font.
font-large used for large sized font.
font-x-large used for Extra Large sized font.
Small font
Medium font
Large font
Extra Large font
Lists
Lists serve various purpose can used to display point wise info on any topic or can be used to display list of items or products. By default we provide basic list with no styling.
To use lists use class list in <ul> tag. All the items of list have list-item class.
- Apple
- Banana
- Watermelon
- Grapes
Vertical Spaced List
Vertical List is same as the the normal list as the above. We can even add a title for this list using list-title class. Use it inside list class along with header or normal component. Padding and margins could be taken care of using utilities.
- Avatar
- Button
- Navigation
- Alert
Components
Horizontal Spaced List
Horizontal Spaced list can be used to arrange list items horizontally. Horizontal items can used to display filter, tags or even in building navigation bar. To make list horizontal use list-inline class along with list class. List items must be provided with class name as list-inline-item
- Home
- Product
- About
Stacked List
Stacked List are special kind of list which represent items that are stacked one over the other. Stacked List can be used to display log messages or even small feeds or notifications.
To use stacked list use class list-stacked along with list class and use stacked-item class for the items inside list.
- This is deleted message
- added comments
- Replied to message
- You got a new message
Notification List
Notification List are used to display notification messages in various formats. They are a good example of special kind of Stacked List. We can used more of such customable stacked lists like notification lists.
To make use of notification list class we provide list-notification along with list class. The item of list takes base class list-item and another class notification-item
Inside notification-item class we can use following components:
-
avatar to display avatar of the profile. This is the same normal avatar component that we have reused here.
notification-item-body class is main class that is used to display the main message inside the notification.
-
few seconds ago
Post liked
Saurabh has liked your message.
-
3 mins ago
Commented
Hela has commented your message.
-
2 hours ago
Post liked
Dani has liked your message.
-
1 day ago
Post liked
Laura has liked your message.
Modal
Modal can be used for different purposes which is kind of a popup boxes that appear on screen. These modals usually require some actions to cancel or handle them.
To use modals we wrap them into container class modal-container inside which we can pass any component we wish to display. Modals also have takes one default close button class modal-close which we pass inside the container class. To display modal we use modal-active class along the side of base class. By default modal-container is hidden.
Modal by default displays content at top we can make it display content at center by passing modal-center class along with base class modal-container. Click the below buttons to see modals in action. We can also remove the modal-close button which comes by default with modal by simply removing it.
Notification
Notification
Javascript
Ratings
Ratings are used in many places like while filtering out products or while giving out reviews. Ratings are also used to represent visual representation of information like in reviews.
Standard Rating
To use standard ratings use class ratings-container to wrap the stars. This ratings-container containers takes 5 <label> tags. This label tags take two elements one is <input> tag and another one the icon itself. Give the <input> tag class rating-input and add class rating-icon to icons
Primary Rating
Primary ratings are same as that of standard ratings only difference is it uses primary colors to represent stars. To make ratings use primary colors use the same class as above just add one extra class ratings-primary along with base class ratings-container
Toast
Toasts are small messages that can be used to display so actions of user without interrupting the flow of event. Toast messages generally disappears after seconds.
Default Toast
To use default toast use use toast class. Inside toast class we give one <p> tag which again takes class as toast-text which is used to pass the message of toast
Toast comes with different color variations for different kind of messages. To make use of those provide these below class along with base class toast. This will change color of toasts.
toast-error for displaying error toast.
toast-warning for displaying warning toast.
toast-success for displaying success toast.
toast-primary for displaying primary toast.
Can't send photo. Retry in 5 seconds.
Can't send photo. Retry in 5 seconds.
Can't send photo. Retry in 5 seconds.
Can't send photo. Retry in 5 seconds.
Can't send photo. Retry in 5 seconds.
Grid
Grid layouts are used to provide consistent UI and also helps in arranging the components logically.Grids are widely supported by browsers and proves useful while arranging components. We have 2 types of grids here:
2 Column Grid
The 2 column grid proves useful in providing equal columns for the element. to use 2 column grid use class grid-col-2. Grid 2 columns also comes with variations one is grid-auto-1 arranges left column according to its specified width and the right column takes up remaining space. Another class grid-auto-2 does vice versa of this.
Note that any elements inside grid are no way related to grid and shouldn't be used. Tose are for visual representations only.
2 Column Grid
2 Column Grid with left auto width
2 Column Grid with right auto width
3 Column Grid
Its same as above just the difference is we provide 3 columns here. To use 3 column grid use class grid-col-2. It also has one variation where the extreme columns are set auto and center column takes free space. To use it add class grid-auto-2 along with base grid-col-3
2 column Grid
2 Column Grid with left and right column auto width
Slider
Sliders are special kind of inputs used to take values from a specified range. Slider can be also used to represent elements like volume, range of values in shopping sites.
Primary Slider
To use primary slider provide we use one wrapper class slider-wrapper which takes two classes slider for slider input and slider-range for displaying range of slider.
slider-range takes the interval values to display the intervals of range. It takes class range-interval for representing one interval. The interval takes one <label> tag to repsent value.
Secondary Slider
Secondary Slider uses black color to represent slider. To use slider use the same classes as that of above just provide this slider-secondary class along with base class slider-wrapper.