Getting Started

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

Installation

You can directly import the css file in your html using the following link tag.

or

Use Font Awesome Icons, by copying the link below to your html page.

Features

  • Responsive

    Designed for Mobile & Desktop

  • Modern

    It is built using flex and grid.

  • Free

    Open Source on Github

  • Modular

    Just import what you need

Components

Alerts

Alerts are used to attract user's attention for important information without interrupting the user's flow. Alert messages can be used to notify the user about something special: danger, success, information or warning.

Success alert

Green alert is for success

Error

An error occured because you used alert-error class.

Info

This is alert is for information

Warning

This alert is for warning, so stop and check whatever you are parsing.

Avatar

Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.

Circular Avatar

demo-image demo-image demo-image

Square Avatar

demo-image demo-image demo-image

Avatar with icons

Avatar with Texts

boy
boy
boy

Badge

Badges are used to highlight an item's status for quick recognition.

1. Badge on Icons

2. Badge on Avatars

2. Text Badge

5
9
demo-image 4
Some Message
New

Button

Badges are used to highlight an item's status for quick recognition.

Button Primary

Button Secondary

Buttons with icon

Floating button

Buttons link

Primary link Secondary link Outline link

Card

Cards are great for organizing and enhancing a website's user interface. Each card is uniquely designed to make it easy for users to read the card content.

Vertical Card

card image

Title

Sub-title

Some quick example text to build on the card title and make up the bulk of the card's content.

Know More

Horizontal Card with badge and dismiss

card image Hot

Title

Sub-title

Some quick example text to build on the card title and make up the bulk of the card's content.

Know More

Text-only Card with Overlayed Text

Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Know More

Overlayed Text

Input form

Form components display a record of data, usually for editing. Forms contain field and button components. Field components display the data in those fields and buttons perform some actions when pressed.

Responsive Images

Fluid images are responsive to the viewport, pixel ratio, etc. Fluid imges increases performance of the website in comparison to static images.

Round Images

Circular image from landscape image

landscape to circle image

Circular image from portrait image

postrait to circle image

Circular image from square image

landscape to circle image

Fluid Image

responsive image

Text Utilities

Headings

This is heading h1.

This is heading h2.

This is heading h3.

This is heading h4.

This is heading h5.
This is heading h6.

Text size

This is extra-extra large text.

This is extra large text.

This is large text.

This is medium size text.

This is small text.

This is extra small text.

Font weight

This is extrabold font.

This is bold font.

This is semibold font.

This is medium font.

This is light font.

This is extralight font .

Gray text and Center text

This is gray text

This is center text

Lists

Lists are used to specify lists of information. All lists may contain one or more list elements. There are two different types of lists: Ordered List or Numbered List (ol), Unordered List or Bulleted List (ul).

Unordered Lists

  • Item1
  • Item2
  • Item3
  • Item1
  • Item2
  • Item3
  • Item1
  • Item2
  • Item3

Ordered Lists

  1. Item1
  2. Item2
  3. Item3
  1. Item1
  2. Item2
  3. Item3
  1. Item1
  2. Item2
  3. Item3
  1. Item1
  2. Item2
  3. Item3
  1. Item1
  2. Item2
  3. Item3
  1. Item1
  2. Item2
  3. Item3

We can also create coustom list using stacked-list class of Socket-UI

Stacked List

  • List Heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

  • List Heading 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

  • List Heading 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, fugiat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, quaerat.

Navigation

The nav HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

Dropdown Navbar

Modal

Modals are positioned over everything else in the document and remove scroll from the document body so that modal content scrolls instead.

Clicking on the modal “backdrop” will automatically close the modal

Modal Title

Some modal text

Ratings

Ratings are used to showcase user approval of a product

Ratings bar

Ratings badge

4.2

Toasts

Toasts are used for relevant notification about a process, such as message sent, payment done, etc.

Updates complete
An error occured

Slider

Coustom slider input according to the styleing of your website. It has two variants: Primary Slider and Secondary slider

Primary Slider

Secondary Slider

Simple grids

Grid layout distributes the layout into rows and columns

Simple grids have two variants; Grid-2 for 2 columns and Grid-3 for 3 columns

Grid-2

Grid-3