Introduction

RocketUI is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.


Installation

Looking to quickly add RocketUI to your project? Copy the link given below and paste it in the <head> tag of your html, above all other style sheets.


RocketUI uses material icons. Copy the given link and paste it in the <head> tag before the link mentioned above.



Typography

Change the size, weight and other font properties of the text

This library uses Roboto font-family. Different styles can be applied to the text using classes like heading, h1/h2/h3/h4/h5, txt, txt-primary/txt-gray, txt-center/txt-left/txt-right etc.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Text based on size

Normal text

Gray text

Large text

Medium text

Small text

Text based on weight

Bold text

Light text

Text based on alignment

Text in left

Text in center

Text in right



Spacing

To apply margin and padding to elements

Different margins and paddings can be applied to the elements using class prefixes like m-, mx-, my-, m-auto, mx-auto, p-, py- etc.

Margin and padding

Margin-0


MarginX-1


MarginY-2


Padding-3


PaddingY-4


PaddingX-5


Margin-auto



Grids

Create visual consistency between layouts while allowing flexibility across a wide variety of designs

This library has 2-column and 3-column grid layout. It is built with grid and is fully responsive. Number of columns covered for different screen sizes can also be modified using class prefixes like col-lg-, col-md- and col-sm-.

3-Column grid

Column 1
Column 2
Column 3

2-Column grid

Column 1
Column 2

Mix and Match

Column 1
Column 2
Column 3


Column 1
Column 2
Column 3


Column 1
Column 2


Column 1
Column 2


Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages

Alerts are available for any length of text along with five color variants. For proper styling, alert class can be used with other contextual classes(eg: alert-primary).

Primary Alerts

Primary alert

notificationsPrimary alert

Primary alert

notificationsPrimary alert

Info Alerts

Info alert

infoInfo alert

Info alert

infoInfo alert

Success Alerts

Success alert

check_circleSuccess alert

Success alert

check_circleSuccess alert

Warning Alerts

Warning alert

warningWarning alert

Warning alert

warningWarning alert

Danger Alerts

Danger alert

errorDanger alert

Danger alert

errorDanger alert

Avatars

Provide a visual representation of a user or entity

An avatar can be circular or square and small, medium or large, depending on the usage. The default type is a rounded avatar and requires avatar as the base class. Avatars can also be grouped or stacked to represent a group of people. It can be done by wrapping all avatars inside avatar-group and avatar-stack classes.

Rounded Avatars

rounded avatar
rounded avatar
rounded avatar
rounded avatar
rounded avatar
rounded avatar

Square Avatars

square avatar

Avatars with icon

photo_camera

Avatars group

avatar group
avatar group
avatar group

Avatars stack

add
avatar stack
avatar stack
avatar stack
avatar stack

Badges

Visual indicator for numeric values such as tallies and scores

Badges can be used to draw attention and display statuses or counts. All types of badges must have badge class. Based on the requirement, badge-avatar, badge-icon-sm, badge-icon-md, badge-icon-xl etc. can be used.

Badges on avatars

avatar with badge
avatar with badge
avatar with badge
avatar with badge
avatar with badge
avatar with badge

Badges on icons

shopping_cart
5
 
email
99+
 
email
99+

Buttons

Clickable items to perform actions

Buttons can be of various types - basic button, filled/outline buttons, disabled buttons,button with icons, floating action buttons, link buttons.

Basic buttons

Link Button

Primary buttons

Link Button

Success buttons

Link Button

Danger buttons

Link Button

Info buttons

Link Button

Buttons with icon

Buttons of different sizes

Link Button Link Button Link Button



Cards

Surface that displays content and action on a single topic

All cards will have a common card class. Type of cards included in this library are - card-basic, card-hz, card-w-badge, card-overlay and card-dismiss.

Basic card

Basic Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, quia.

Card with footer

Card with footer
Subtitle of card
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis neque similique accusamus eius? Fugiat, tenetur! Officia, libero incidunt? Molestiae porro rem veritatis quam deleniti, aperiam praesentium dolorum quidem totam aliquid.

Horizontal card

card image
Horizonatal Card
Subtitle of card
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore, nulla.

Card with image

Card with image
Subtitle of card
card image
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis neque similique accusamus eius? Fugiat, tenetur! Officia, libero incidunt? Molestiae porro rem veritatis quam deleniti, aperiam praesentium dolorum quidem totam aliquid.

Card with overlay

Out of Stock
card image
Card with overlay
Subtitle of card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, possimus!

Card with badge

Bestseller
card image
Card with badge
Subtitle of card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, voluptatem?

Card with dismiss button

close
card image
Card with dismiss
Subtitle of card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, possimus!


Dialog

Displays content that requires user interaction, in a layer above the page

dialog-window class can be used as a wrapper to display a dialog window above rest of the content.

Dialog with header and footer

Dialog Header
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore esse dolorum porro fuga quisquam aperiam hic voluptate atque. Tempore exercitationem, quisquam aperiam veniam laudantium soluta maxime aliquam aspernatur adipisci facilis rerum ullam quas dolorem? Fuga alias in repellat dolorem, accusamus nisi sapiente doloribus nostrum distinctio? Delectus rerum at sequi illum optio, iste voluptas! Provident perferendis doloremque suscipit ipsam deserunt nesciunt voluptate voluptatibus, incidunt vero iusto. Repudiandae hic laborum placeat optio corporis numquam, sit assumenda quos incidunt saepe, adipisci iusto blanditiis dignissimos voluptate delectus quaerat. Impedit aspernatur facilis, perspiciatis pariatur quis hic culpa repellat accusantium ab autem odio optio? Accusamus, ducimus.


Images

To display images on website

Types of images included: img-responsive, img-square and img-rounded.

Responsive image

cat image

Rounded image

cat image round

Square image

cat image square


Inputs

To let users enter and edit text

Use input-label and input-outline classes for label and input tag respectively. Wrap both of them inside input-group class. Similary you can use textarea-group and textarea-outline for text-area.
To display error or success messages for inputs use msg-success and msg-error classes.

For radio buttons and checkboxes with label, wrap radio-input-group and checkbox-input-group inside input-radio and input-checkbox respectively.

Basic input field and textarea


Input field and textarea with messsages

invalid input
valid input

invalid input
valid input

Radio button and checkbox


Range Slider




List

Lists are continuous, vertical indexes of text or images

Lists can be bulleted, non-bulleted, inline, stacked etc. By default the list are non-bulleted. One can use list-group, list-group-bullteted, list-group-inline and list-group-stacked classes as per the requirement.

List items can also have images, avatars and two-line texts. list-item, list-item, list-w-icon and list-w-avatar classes can be used for list items.

Basic list

  • Item 1
    • sub item 1
      • super sub item 1
      • super sub item 2
      • super sub item 3
    • sub item 2
    • sub item 3
  • Item 2
  • Item 3
  • Item 4

Bulleted list

  • Item 1
    • sub item 1
      • super sub item 1
      • super sub item 2
      • super sub item 3
    • sub item 2
    • sub item 3
  • Item 2
  • Item 3
  • Item 4

Inline list

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Basic stacked list

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Stacked list with icon

  • shopping_bagItem 1
  • shopping_bagItem 2
  • shopping_bagItem 3
  • shopping_bagItem 4

Stacked list with avatars

  • avatar in list
    Item 1
  • avatar in list
    Item 2
  • avatar in list
    Item 3
  • avatar in list
    Item 4

Stacked list with two lines

  • Line 1

    Sub-line 1

  • Line 2

    Sub-line 2

  • Line 3

    Sub-line 3

Stacked list with two lines and icons

  • shopping_bag

    Line 1

    Sub-line 1

  • shopping_bag

    Line 2

    Sub-line 2

  • shopping_bag

    Line 3

    Sub-line 3

Stacked list with two lines and icons

  • avatar in stacked list

    Line 1

    Sub-line 1

  • avatar in stacked list

    Line 2

    Sub-line 2

  • avatar in stacked list

    Line 3

    Sub-line 3



List of navigation links that users can find in the Header of every page

Navigation bar includes brand name(or logo), list of navigations, actions icons and buttons.

Responsive Navbar

Navbar
  • Item 1
  • Item 2
  • Item 3
  • Signup/Login
  • Account
  • Shopping Bag
  • Wishlist


Ratings

Provide insights regarding others' opinions and experiences, and can allow the user to submit a rating of their own

rating and rating-read-only classes can be used based on the requirement.

Basic rating

Read-only rating



Snackbar

Serves as a feedback and confirmation mechanism after the user takes an action

All snackbars will have snackbar class. Snackbars can be positioned using snackbar-top-right, snackbar-top-left, snackbar-top-center, snackbar-bottom-right, snackbar-bottom-left and snackbar-bottom-center classes.

Snackbar in bottom-left corner

Hi! I am a snackbar