Installation

Start off by linking the stylesheet to your project. Copy the following code on to your HTML file or use the import rule to import the styles to css file.

Presto also provides support for integrating individual components. An example of linking Alert component is shown below. All the components can be linked similarly by changing the component name in the link.

Presto components are completely Responsive and Customizable. You have all the freedom to modify an existing class as per your needs.

Colours

Colour is one of the important aspects of any User Interface. presto uses a set of handpicked, visually appealing colours.

Primary Colours

Font Colours

Alert Colours

Typography

A Webpage must have a good looking, standard and readable font to make it's content attractive to the end user. Nunito is what Presto came up with. It is available on Google Fonts for free. The font weight varies from 500 to 700 based on importance of the text.

Alert

Inform the user with contextual messages using Presto's Alert component.

alert is the base class for all types of Alerts. Use alert-type or alert-type-sec class to apply appropriate styles where type can be success, warning, error or info.

Primary Alerts

Secondary Alerts

Avatar

Avatars are images that users can set as their profile picture. Link any image, Presto will brew a magic spell for it!

The Avatar component comes in four different sizes:

• Extra Large (4rem)
• Large (3.2rem)
• Medium (2.4rem)
• Small (1.8rem)

avatar is the base class for all types of Avatar components. For more specific styles, use avatar-round, avatar-round-bd, and avatar-square classes as shown in the examples below.

Rounded Avatar

Rounded Avatar With Border

Square Avatar

Badge

A badge is a small numerical value or status descriptor for an element. Presto supports badges for Avatars and Icons.

The badge component must have a parent element whose position property is set to relative or just include Presto's badge-container class to the parent element.

adding badge class will set the general badge stylings to the element. To make use of pre-built badges, use badge-round and badge-square classes as shown below.

Badge on Text

Notice how the badges are adjusting their size based on the font-size of the text? Presto = Magic!

Badge on Avatars

9

9

9

9

Badge on Icons

Note : Badges on Avatars and Icons are Circles by default. But if the text content is wider than expected, they might lose the circular shape.

Button

Buttons allow users to take actions, and make choices, with a single tap.

btn is the base class for a button. Customize it by adding btn-primary, btn-secondary, btn-link, btn-icon, and btn-float classes as shown below.

Primary Button

Secondary Button

Link Button

Icon Button

The Icon button can be used with both images as well as icons.

Alert Button

Four types of Alert buttons are available. Use btn-success, btn-warning, btn-error, btn-info classes to apply the required styles.

Floating Action Button

Note: The float button expects the parent element to have a relative position.

Card

Cards contain content and actions about a single subject. Presto provides a wide variety of Cards to act as a container for your content.

card is the base class for any card. Customizations can be made by changing the HTML structure and by adding card-overlay, and card-horizontal as shown below.

Basic Card

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645

Add to Cart

Card with Badge

50% Off

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645

Add to Cart

Text Only Card

Dismissible Card

Open Card

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645

Add to Cart

Card with Text Overlay

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645

Add to Cart

Horizontal Card

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645

Add to Cart

Image

Making images responsive is now easy using Presto's image-res class. Use image-round class along with image-res class to make a round responsive image as shown below.

Responsive Image

Round Image

Input

Inputs are primarily used to collect information from the user.

input is the base class for Presto's Input component. Use input-success, input-warning, and input-error for Customizing the Input field.

Standard Input

Validation Input

Snackbar

Snackbar inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen and disappear within few seconds.

snackbar is the base class for all types of Snackbars. Customizations can be made by adding snackbar-lead or snackbar-center class as shown below.

Note: The Snackbar component assumes that the container has a position property set to relative and overflow set to hidden.

Leading Snackbar

Centered Snackbar

Rating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.

Use rating class to create Rating as shown below.

Modal

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

Add the modal class to enable the styles as shown below.

Note: The modal component assumes that the parent has it's position property is set to relative.

Navigation

Navigation menu can be used to navigate to different sections or pages within the website. Presto provides its users with a responsive header navigation menu.

Use the nav class to implement a Header Navigation in your WebApp.

Text Utilities

Develop your WebApps faster and make the content look consistent throughout with Presto's Text utility classes.

Headings

Add h1, h2, h3, h4, h5, and h6 classes to make use of the availabe heading styles.

Text Sizes

For different text sizes use txt-xs, txt-sm, txt-md, txt-lg, and txt-xl classes.

Decorated Text

Use txt-underline, txt-strikethrough, txt-overline, txt-highlight, and txt-grey classes to apply text decorations.

Centered Text

Apply the txt-center class to align a text to the center of it's container.

Grid

Making your site Responsive is a piece of cake with Presto's grid system.

Use the grid class on the container element and use grid-col-{number} class on the children to split the available width accordingly where number varies from 1 to 12.

List

List out a bunch of data with ease using the Presto's List component.

Use spaced-list and notification-list classes as shown below.

Spaced List

Stacked Notification