Pixel UI

A pixel perfect component library for your website.

screencast-pixeldesign.netlify.app-2022.02.23-01_02_26.mp4

Installation

Import pixel-ui in your project:

https://pixeldesign.netlify.app/pixel-design.css

or

@import 'https://pixeldesign.netlify.app/pixel-design.css

Utilities

• Text-Utilities

Components

• Avatar
• Alerts
• Badge
• Button
• Card
• Image
• Input
• Lists
• Modal
• Toast/Notify/Snackbar
• Navigation
• Simplified Grid

Utilities

Typography

• Typography is an essential component of a website's design. Good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing.

Headings

Paragraph

Text position and gray text

components

Alert

The alert component has six variants alert-primary, alert-secondary, alert-danger, alert-info, alert-success and alert-warning

Avatar

The avatar component has 5 sizes, avatar-xl, avatar-lg, avatar-md, avatar-sm, avatar-xs, having rd,for round avatar, sq,for square avatar.

Badge

The Badge component has 5 sizes, av_badge_lg, av_badge_md, av_badge_sm, having 3 states, online, offline, idle,having rd,for round badge, sq,for square badge.

Button

The Button component i.e. btn, comes in two catagories, solid buttons and outlined buttons.

Solid Buttons

The Solid button is contained with filled colors inside, has five variants btn-primary, btn-cta, btn-danger, btn-link, btn disabledThe Button component i.e. btn, comes in two catagories, solid buttons and outlined buttons.

The Solid button is contained with filled colors inside, has five variants btn-primary, btn-cta, btn-danger, btn-link, btn disabled

Outlined Buttons

The Solid button is Outlined, and has five variants out-primary, out-cta, out-danger, out-success, out-info

Icon And Floating Action Button

The floating action button fa-btn and button with an icon btn-icon.

Card

The Card component has three variants, 1. basic Card or vertical card, 2. shopping card or horizontal card and 3. pricing card

Basic Cards (Vertical Card)

The basic Card component has 4 catagories, 1. Cards with badges, 2. Cards with dismiss and 3. Cards with text overlay and 4. text only cards.

Shopping Cards (Horizontal Cards)

Card are used to show user related data collectively, like product details.

Pricing Cards

Pricing card is used in subscription plans

Image

Responsive Image

The Image component has two variants img-res, for full size Responsive image.

Round And Squared Image

The Image component has four variants img-xl, for extra large image, img_lg, for large image, img_md, for medium image, img_sm, for small image. with round rd and square edges sq.

Input

The input component has two variants input sizes and input type

Input Sizes

inp_lg, inp_md, inp_sm

Input Type

The input component has one type i.e. Input error inp_err

Modal

Modals are used to show some important information to the user and they are closed only when the user selects some option.

List

List Style

List Category

Rating

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

Navigation

Toast/Notify/Snackbar

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