Skip to content

Latest commit

 

History

History
323 lines (199 loc) · 6.66 KB

README.md

File metadata and controls

323 lines (199 loc) · 6.66 KB

Pebble UI

Minimal UI Component Library

- by Saurabh Chirde


logo

Build rapid modern websites without ever leaving your HTML with Pebble UI.

Live Documentation

Live Link : https://pebbleui.com

PebbleUI

Quick Start

To start using the components in your project, you can refer the following code in your <link> tags or directly use in your css files. Dark Theme has been enabled in Component Library, do check it!!

<link rel="stylesheet" href="https://pebbleui.com/components/v1.0.0/components.css"/>
@import url("https://pebbleui.com/components/v1.0.0/components.css");

Pebble UI contains the following Components

Typography

Use Typography to format text content on your web site.

You will find the following types of Typography on https://pebbleui.com/documentation/docpage/typography.html

Headings

Paragraphs

Text Align

Font Sizes With and Without Weights

Text Color Classes

Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

You will find the following types of Alert on https://pebbleui.com/documentation/docpage/alert.html

Basic and Descriptive Alert

  • Info Alert
  • Success Alert
  • Warning Alert
  • Error Alert

Button

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

You will find the following types of Button on https://pebbleui.com/documentation/docpage/buttons.html

Solid Button

  • Primary Button
  • Secondary Button
  • Disabled Button

Outlined Buttons

  • Primary Outline Button
  • Secondary Outline Button

Link/Text Buttons

  • Primary Text Button
  • Secondary Text Button

Icon Buttons

Icon With Label Buttons

Floating Buttons

Avatar

Avatars can be used to represent people or objects. It supports images or letters.

You will find the following types of Avatar on https://pebbleui.com/documentation/docpage/avatar.html

Image Avatar

Text Avatar

Badge

Badges are used to display a notification count or status information (online, offline, or away).

You will find the following types of Badge on https://pebbleui.com/documentation/docpage/badge.html

Badge on Avatars

Badge on Text

Badge on Icons

Badge on Button

Card

Cards are used to display content and action on a particular topic. It provides a flexible and extensible content container with multiple variants and options.

You will find the following types of Card on https://pebbleui.com/documentation/docpage/cards.html

All type of cards are mentioned below:-

Card Without dismiss

  • Vertical Light Card
  • Vertical Dark Card
  • Horizontal Light Cards
  • Horizontal Dark Cards

Card With dismiss

  • Vertical Light Card
  • Vertical Dark Card
  • Horizontal Light Cards
  • Horizontal Dark Cards

Cards With Text Overlay

  • Overlay Type 1
  • Overlay Type 2

Text Only Card

Card With Badge

Information Card

Card With Shadow

Cart Item Card

  • Horizontal Light Cards
  • Horizontal Dark Cards

Price Card

  • Vertical Light Card
  • Vertical Dark Card

Image

Image components are used, when you need to display pictures.

You will find the following types of Image on https://pebbleui.com/documentation/docpage/image.html

Square Image

Round Image

Full Width Responsive Image

Input

Inputs are used to take information from the user to authenticate or save their information to the server.

You will find the following types of Input on https://pebbleui.com/documentation/docpage/input.html

Outline Labelled Input (with & without placeholders)

  • Text Input
  • Email Input (required field)
  • Password Input (required field)
  • Number Input
  • Date Input (dd/mm/yyy)
  • Month & Year Input
  • File Upload Input
  • Telephone Number Input
  • Color Input
  • Search Input
  • Slider Input
  • Radio Input
  • Checkbox Input

No-Outline Labelled Input (with and without placeholders)

  • Text Input
  • Email Input (required field)
  • Password Input (required field)
  • Number Input
  • Date Input (dd/mm/yyy)
  • Month & Year Input
  • File Upload Input
  • Telephone Number Input
  • Search Input

Modal

Modals are positioned over everything else in the document. It gets closed only with a close button on the modal pop-up.

You will find the following types of Modal on https://pebbleui.com/documentation/docpage/modal.html

Discard Modal

Signin Modal

Signup Modal

Navigation

Navigation bar is used to navigate through the web apps or websites. This component is responsive with screen sizes.

You will find the following types of Navigation on https://pebbleui.com/documentation/docpage/navigation.html

Desktop Navigation Bar

Mobile Navigation Bar

Grid

Grids are used set the layout of a web page or any content on a page.

You will find the following types of Grid on https://pebbleui.com/documentation/docpage/grid.html

Two Columns Grid (50:50)

Two Columns Grid (20:80)

Two Columns Grid (80:20)

Two Columns Grid (30:70)

Two Columns Grid (70:30)

Four Columns Grid (25:25:25:25)

Snackbar

Snackbars/Toast provide brief notifications. The component is also known as a toast.

You will find the following types of Toast on https://pebbleui.com/documentation/docpage/snackbar.html

Baseline Snackbar

Leading Snackbar

Stacked Snackbar

Rating

Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.

You will find the following types of Rating on https://pebbleui.com/documentation/docpage/rating.html

Rating Bar

Rating Badge

List

Lists are continuous, vertical indexes of text or images..

You will find the following types of Rating on https://pebbleui.com/documentation/docpage/list.html

Unordered list styles

Ordered list styles

Stacked List Style


👨‍💻 lets connect !