Getting Started

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.


                    

Copy
<link
  rel="stylesheet"
  href="https://prestoui.iambatman.dev/css/components/index.css"
/>


                    

Copy
@import url("https://prestoui.iambatman.dev/css/components/index.css");

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.


                    

Copy
<link
  rel="stylesheet"
  href="https://prestoui.iambatman.dev/css/components/alert.css"
/>

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

#9a1841

#be1e50

#e0527f

#e65c87

Font Colours

#9a1841

#be1e50

#e0527f

#e65c87

Alert Colours

#81db7b

#ffecb5

#ff9494

#67c7ff

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.

Components

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

This is a Primary Success Alert!

This is a Primary Error Alert!

This is a Primary Warning Alert!

This is a Primary Info Alert!


                    

Copy
<div class="alert alert-success">This is a Primary Success Alert!</div>
<div class="alert alert-error">This is a Primary Error Alert!</div>
<div class="alert alert-warning">This is a Primary Warning Alert!</div>
<div class="alert alert-info">This is a Primary Info Alert!</div>

Secondary Alerts

This is a Secondary Success Alert!

This is a Secondary Error Alert!

This is a Secondary Warning Alert!

This is a Secondary Info Alert!


                    

Copy
<div class="alert alert-success-sec">This is a Secondary Success Alert!</div>
<div class="alert alert-error-sec">This is a Secondary Error Alert!</div>
<div class="alert alert-warning-sec">This is a Secondary Warning Alert!</div>
<div class="alert alert-info-sec">This is a Secondary Info Alert!</div>

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


                    

Copy
<div class="avatar avatar-round avatar-xl">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-round avatar-lg">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-round avatar-md">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-round avatar-sm">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>

Rounded Avatar With Border


                    

Copy
<div class="avatar avatar-round-bd avatar-xl">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-round-bd avatar-lg">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-round-bd avatar-md">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-round-bd avatar-sm">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>

Square Avatar


                    

Copy
<div class="avatar avatar-square avatar-xl">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-square avatar-lg">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-square avatar-md">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>
<div class="avatar avatar-square avatar-sm">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
</div>

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

Large Text

New

Medium Text

New

Small Text

New


                    

Copy
<span class="badge-container"
  >This is a Large Text
  <div class="badge badge-square">New</div></span
>
<span class="badge-container"
  >This is a Medium sized Text
  <div class="badge badge-square">New</div></span
>
<span class="badge-container"
  >This is a small Text
  <div class="badge badge-square">New</div></span
>

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

Badge on Avatars


                    

Copy
<div class="avatar avatar-round avatar-xl">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" class="avater" />
  <div class="badge badge-round badge-xl"><span>9</span></div>
</div>
<div class="avatar avatar-round avatar-lg">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" class="avater" />
  <div class="badge badge-round badge-lg"><span>9</span></div>
</div>
<div class="avatar avatar-round avatar-md">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" class="avater" />
  <div class="badge badge-round badge-md"><span>9</span></div>
</div>
<div class="avatar avatar-round avatar-sm">
  <img src="https://picsum.photos/id/64/60/60" alt="avatar" class="avater" />
  <div class="badge badge-round badge-sm"><span>9</span></div>
</div>

Badge on Icons


                    

Copy
<div class="badge-container">
  <img src="../assets/icons/cart.svg" alt="cart" class="icon" />
  <div class="badge badge-round badge-lg"><span>9</span></div>
</div>
<div class="badge-container">
  <img src="../assets/icons/message.svg" alt="message" class="icon" />
  <div class="badge badge-round badge-lg"><span>9</span></div>
</div>
<div class="badge-container">
  <img src="../assets/icons/phone.svg" alt="phone" class="icon" />
  <div class="badge badge-round badge-lg"><span>9</span></div>
</div>
<div class="badge-container">
  <img src="../assets/icons/calender.svg" alt="calender" class="icon" />
  <div class="badge badge-round badge-lg"><span>9</span></div>
</div>

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.

999

9999

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


                    

Copy
<button class="btn btn-primary">Primary</button>

Secondary Button


                    

Copy
<button class="btn btn-secondary">Secondary</button>

Link Button


                    

Copy
<button class="btn btn-link">Link</button>

Icon Button

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


                    

Copy
<button class="btn btn-icon">
  <img src="../assets/icons/heart.svg" alt="heart" />
</button>
<button class="btn btn-icon">
  <img src="../assets/icons/plus.svg" alt="plus" />
</button>
<button class="btn btn-icon">
  <img src="../assets/icons/delete.svg" alt="delete" />
</button>

Alert Button

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


                    

Copy
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warming s</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-info">Info</button>

Floating Action Button

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


                    

Copy
<button class="btn btn-float">Buy</button>

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


                    

Copy
<div class="card">
  <button class="btn btn-icon">
    <img src="../assets/icons/heart.svg" alt="heart" />
  </button>
  <div class="card-cover">
    <img src="../assets/images/product.jpg" alt="cover" />
  </div>
  <div class="card-title-container">
    <h5 class="card-title">HyperX Cloud Alpha</h5>
    <p class="card-subtitle">Red, Black, On Ear</p>
    <span class="card-price">₹9,645</span>
  </div>
  <div class="rating">
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img
      class="star"
      src="../assets/icons/star-regular.svg"
      alt="rating star"
    />
  </div>
  <div class="card-bottom">
    <button class="btn btn-primary">Add to Cart</button>
  </div>
</div>

Card with Badge

50% Off

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645


                    

Copy
<div class="card card-badge">
  <div class="badge badge-square">50% Off</div>
  <button class="btn btn-icon">
    <img src="../assets/icons/heart.svg" alt="heart" />
  </button>
  <div class="card-cover">
    <img src="../assets/images/product.jpg" alt="cover" />
  </div>
  <div class="card-title-container">
    <h5 class="card-title">HyperX Cloud Alpha</h5>
    <p class="card-subtitle">Red, Black, On Ear</p>
    <span class="card-price">₹9,645</span>
  </div>
  <div class="rating">
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img
      class="star"
      src="../assets/icons/star-regular.svg"
      alt="rating star"
    />
  </div>
  <div class="card-bottom">
    <button class="btn btn-primary">Add to Cart</button>
  </div>
</div>

Text Only Card

HyperX Cloud Alpha

Click to view more


                    

Copy
<div class="card card-header">
  <div class="card-title-container">
    <h5 class="card-title">HyperX Cloud Alpha</h5>
    <p class="card-subtitle">Click to view more</p>
  </div>
</div>

Dismissible Card

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645


                    

Copy
<div class="card">
  <button class="btn btn-icon">
    <img src="../assets/icons/menu-close.svg" alt="heart" />
  </button>
  <div class="card-cover">
    <img src="../assets/images/product.jpg" alt="cover" />
  </div>
  <div class="card-title-container">
    <h5 class="card-title">HyperX Cloud Alpha</h5>
    <p class="card-subtitle">Red, Black, On Ear</p>
    <span class="card-price">₹9,645</span>
  </div>
  <div class="rating">
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img
      class="star"
      src="../assets/icons/star-regular.svg"
      alt="rating star"
    />
  </div>
  <div class="card-bottom">
    <button class="btn btn-primary">Add to Cart</button>
  </div>
</div>

Card with Text Overlay

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645


                    

Copy
<div class="card card-overlay">
  <button class="btn btn-icon">
    <img src="../assets/icons/heart.svg" alt="heart" />
  </button>
  <div class="card-cover">
    <div class="text-overlay">
      <div class="card-title-container">
        <h5 class="card-title">HyperX Cloud Alpha</h5>
        <p class="card-subtitle">Red, Black, On Ear</p>
        <span class="card-price">₹9,645</span>
      </div>
    </div>
    <img src="../assets/images/product.jpg" alt="cover" />
  </div>
  <div class="rating">
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img class="star" src="../assets/icons/star-solid.svg" alt="rating star" />
    <img
      class="star"
      src="../assets/icons/star-regular.svg"
      alt="rating star"
    />
  </div>
  <div class="card-bottom">
    <button class="btn btn-primary">Add to Cart</button>
  </div>
</div>

Horizontal Card

HyperX Cloud Alpha

Red, Black, On Ear

₹9,645


                    

Copy
<div class="card card-horizontal">
  <button class="btn btn-icon">
    <img src="../assets/icons/heart.svg" alt="heart" />
  </button>
  <div class="card-cover">
    <img src="../assets/images/product.jpg" alt="cover" />
  </div>
  <div class="card-content">
    <div class="card-title-container">
      <h5 class="card-title">HyperX Cloud Alpha</h5>
      <p class="card-subtitle">Red, Black, On Ear</p>
      <span class="card-price">₹9,645</span>
    </div>
    <div class="rating">
      <img
        class="star"
        src="../assets/icons/star-solid.svg"
        alt="rating star"
      />
      <img
        class="star"
        src="../assets/icons/star-solid.svg"
        alt="rating star"
      />
      <img
        class="star"
        src="../assets/icons/star-solid.svg"
        alt="rating star"
      />
      <img
        class="star"
        src="../assets/icons/star-solid.svg"
        alt="rating star"
      />
      <img
        class="star"
        src="../assets/icons/star-regular.svg"
        alt="rating star"
      />
    </div>
    <div class="card-bottom">
      <button class="btn btn-primary">Add to Cart</button>
    </div>
  </div>
</div>

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


                    

Copy
<img class="image-res" src="../assets/images/product.jpg" alt="product" />

Round Image


                    

Copy
<img
  class="image-res image-round"
  src="../assets/images/product.jpg"
  alt="product"
/>

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


                    

Copy
<input type="text" class="input" placeholder="Placeholder" />

Validation Input


                    

Copy
<input type="text" class="input input-success" placeholder="Placeholder" />
<input type="text" class="input input-warning" placeholder="Placeholder" />
<input type="text" class="input input-error" placeholder="Placeholder" />

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

This a Leading Snackbar


                    

Copy
<div class="snackbar snackbar-lead">
  <span>This a Leading Snackbar</span>
  <button class="btn btn-link btn-lead-close">ACTION</button>
</div>

Centered Snackbar

This a Centered Snackbar


                    

Copy
<div class="snackbar snackbar-lead">
  <span>This a Leading Snackbar</span>
  <button class="btn btn-link btn-lead-close">ACTION</button>
</div>

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.


                    

Copy
<div class="rating">
  <img class="star" src="../assets/icons/star-regular.svg" alt="rating star" />
  <img class="star" src="../assets/icons/star-regular.svg" alt="rating star" />
  <img class="star" src="../assets/icons/star-regular.svg" alt="rating star" />
  <img class="star" src="../assets/icons/star-regular.svg" alt="rating star" />
  <img class="star" src="../assets/icons/star-regular.svg" alt="rating star" />
</div>

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.


                    

Copy
<div class="modal">
  <img
    class="btn-close-modal"
    src="../assets/icons/menu-close.svg"
    alt="close"
  />
  <h5>Modal Title</h5>
  <p>Modal body goes here.</p>
  <div class="btn-container">
    <button class="btn btn-primary btn-close-modal">Save</button>
    <button class="btn btn-secondary btn-close-modal">Close</button>
  </div>
</div>

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.

Logo


                    

Copy
<nav class="modal">
  <img
    class="btn-close-modal"
    src="../assets/icons/menu-close.svg"
    alt="close"
  />
  <h5>Modal Title</h5>
  <p>Modal body goes here.</p>
  <div class="btn-container">
    <button class="btn btn-primary btn-close-modal">Save</button>
    <button class="btn btn-secondary btn-close-modal">Close</button>
  </div>
</nav>

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.

This is an H1 Heading This is an H2 Heading This is an H3 Heading This is an H4 Heading This is an H5 Heading This is an H6 Heading


                    

Copy
<span class="h1">This is an H1 Heading</span>
<span class="h2">This is an H2 Heading</span>
<span class="h3">This is an H3 Heading</span>
<span class="h4">This is an H4 Heading</span>
<span class="h5">This is an H5 Heading</span>
<span class="h6">This is an H6 Heading</span>

Text Sizes

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

Extra Large Text Large Text Medium sized Text Small Text Extra small Text


                    

Copy
<span class="txt-xl">Extra Large Text</span>
<span class="txt-lg">Large Text</span>
<span class="txt-md">Medium sized Text</span>
<span class="txt-sm">Small Text</span>
<span class="txt-xs">Extra small Text</span>

Decorated Text

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

Underline Overline Strikethrough Highlight Grey text


                    

Copy
<span class="txt-underline">Underline</span>
<span class="txt-overline">Overline</span>
<span class="txt-strikethrough">Strikethrough</span>
<span class="txt-highlight">Highlight</span>
<span class="txt-grey">Grey text</span>

Centered Text

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

This text is centered


                    

Copy
<span class="txt-center">This text is centered</span>

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.

2 Column

4 Column

6 Column


                    

Copy
<div class="grid">
  <div class="grid-col-2">2 Column</div>
  <div class="grid-col-4">4 Column</div>
  <div class="grid-col-6">6 Column</div>
</div>

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

item1
item2
item3
item4
item5


                    

Copy
<ul class="spaced-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

Stacked Notification

1 new message
1 new message
1 new message


                    

Copy
<ul class="notification-list">
  <li>
    <div class="avatar avatar-round avatar-md">
      <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
    </div>
    1 new message
  </li>
  <li>
    <div class="avatar avatar-round avatar-md">
      <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
    </div>
    1 new message
  </li>
  <li>
    <div class="avatar avatar-round avatar-md">
      <img src="https://picsum.photos/id/64/60/60" alt="avatar" />
    </div>
    1 new message
  </li>
</ul>