Pigment

Pigment

Docs

v.1.0.0

Introduction

Pigment is an open source CSS library for building responsive sites by using easily accessible and resuable components.

The name "Pigment" comes from its meaning that is

Hence Pigment UI is the substance used for colouring and designing the web🌐

Quick Setup Guide

In order to use Pigment in your project, Copy the Link given below and paste it in the

 <head>

tag of your html, above all other style sheets

                        
          <link rel="stylesheet" href="https://pigment.netlify.app/CSS/component.css">

Avatar

An icon or figure representing a particular person in a video game,

avatar-img 
              
  <div class="avatar">
    <img src="./assets/avatar.jpg" alt="avatar-img"/>
  </div>

Avatar with different sizes

      
 <div class="avatar-size">
  <div class="avatar-xs">
   <img src="./assets/avatar.jpg" alt="" />
 </div>
 <div class="avatar-sm">
   <img src="./assets/avatar.jpg" alt="" />
 </div>
  <div class="avatar-md">
   <img src="./assets/avatar.jpg" alt="" />
 </div>
  <div class="avatar-lg">
   <img src="./assets/avatar.jpg" alt="" />
  </div>
 </div>

Alert

Alerts are used to notify people about special information or a important decision thst requires to perform some tasks.

A simple primary alert!
A simple secondary alert!
A simple success alert!
A simple danger alert!
A simple info alert!
        
    <div class="alert">
      <div class="alert-primary">
        A simple primary alert!
      </div>
      <div class="alert-secondary">
        A simple secondary alert!
      </div>
      <div class="alert-success">
        A simple success alert!
      </div>
      <div class="alert-danger">
        A simple danger alert!
      </div>
      <div class="alert-info">
        A simple info alert!
      </div>
    </div>

Badge

Badges are used to display special information or status of a any item.

Badge
new
9
99+
        
    <div class="badge-primary">Badge</div>
    <div class="badge-primary">new</div>
    <div class="badge-circle">9</div>
    <div class="badge-circle">99+</div>

Profile Badge

Profile badges status regarding the online visibility of a person 

        
   <div class="avatar-sm">
     <img src="./assets/avatar.jpg" alt="" />
      <div class="badge-success"></div>
   </div>
  
   <div class="avatar-sm">
     <img src="./assets/avatar.jpg" alt="" />
      <div class="badge-grey"></div>
   </div>

Notification Badge

Notification badge displays the count of new messages

1
99+
        
   <div class="icon-badge-sm">
     <i class="fas fa-envelope fa-2x"></i>
     <div class="badge-number">1</div>
   </div>
  
   <div class="icon-badge-md">
     <i class="fab fa-github-square fa-3x"></i>
     <div class="badge-number-3x">99+</div>
   </div>

Buttons

Buttons are used to activate an action on a single click.

        
   <button class="btn btn-default btn-primary">Primary</button>
   <button class="btn btn-default btn-secondary">Secondary</button>
   <button class="btn btn-default btn-success">success</button>
   <button class="btn btn-default btn-danger">alert</button>
   <button class="btn btn-default btn-info">Info</button>

Outline Buttons

        
   <button class="btn btn-outline-primary">Primary</button>
   <button class="btn btn-outline-secondary">Secondary</button>
   <button class="btn btn-outline-success">success</button>
   <button class="btn btn-outline-danger">alert</button>
   <button class="btn btn-outline-info">Info</button>

Button Pills

        
   <button class="btn btn-default btn-primary  btn-pill">Primary</button>
   <button class="btn btn-outline-secondary btn-pill">Secondary</button>

Card

Cards are box like structured component which contains information

Simple Card

Hello world!!

This is a simple card Component used mainly in landing pages.Hey!Thanks for visiting the website and checking out things.Leave me a feedback. 

      
  <div class="simple-card">
   <h1>Hello world!!</h1>
    <p>
      This is a simple card Component used mainly in landing
      pages.Hey!Thanks for visiting the website and checking out
      things.Leave me a feedback.
    </p>
  </div>

Image Card

Image from unsplash

This is a simple card Component used mainly in landing pages.Hey!Thanks for visiting the website and checking out things.Leave me a feedback. 

      
  <div class="img-card">
    <img src="./assets/avatar.jpg" alt="" />
    <h1>Image from unsplash</h1>
    <p>This is a simple card Component used mainly in landing
    pages.Hey!Thanks for visiting the website and checking out
    things.Leave me a feedback.</p>
  </div>

Social media Card

Harvey Specter

That’s the difference between you and me. You wanna lose small, I wanna win big. 

      
  <div class="img-card">
    <div class="avatar">
      <img src="./assets/avatar1.jpg" alt="" />
      <h2 class="profile-name">Harvey Specter</h2>
    </div>

    <img src="./assets/social_media_card.jpg" alt="" />
    <p>That’s the difference between you and me. You wanna lose small, I
    wanna win big.</p>
  </div>

eCommerce Card

Oculus Quest 2 - Advanced

Price: ₹ 54,999.00

Local Electronics

Oculus Quest 2 - Advanced

Price: ₹ 54,999.00

Local Electronics

      
  <div class="eCommerce-list">
  <div class="eCommerce-card">
  <img src="./assets/ecommerce-card.jpg" alt="" />
  <p class="badge-primary">NEW</p>
  <button class="remove-btn btn btn-default ">X</button>
  <a href="javascript:void(0)" target="_blank">
  <h2>Price: ₹ 54,999.00</h2>
  <h3>Local Electronics</h3>
  </div>
  </div>

Grids

Grids are used to group rows and columns together.

Simple Grid

one

two

      
 <div class="grid center">
  <div class="two-cloumns-row">
   <div>
    <p>one</p>
   </div>
   <div>
    <p>two</p>
   </div>
 </div>
 </div>

Grid with 3 Columns

one

two

three

            
  <div class="grid center">
   <div class="three-cloumns-row">
    <div>
     <p>one</p>
    </div>
    <div>
     <p>two</p>
    </div>
    <div>
     <p>three</p>
    </div>
    </div>
   </div>
  </div>

Responsive Grid

one

two

            
 <div class="grid">
  <div class="two-cloumns-row ">
   <div>
    <p>one</p>
   </div>
   <div>
    <p>two</p>
   </div>
  </div>
 </div>

Images

Square Image

Watch 
        
    <div class="img-square">
      <img src="./assets/img-square.jfif" alt="Watch"/>
    </div>

Round Image

        
    <div class="img-rounded">
      <img src="./assets/img-rounded.jpg" alt="" />
    </div>

Responsive image

            
    <div class="img-responsive">
      <img src="./assets/img-responsive.jpg" alt="" />
    </div>

Inputs

Inputs are used to collect information or a response from the user such as username, decisons.

Simple Login Input

  
   <div class="center">
    <div class="input">
     <form>
      <div class="brand h1-login center">
       <h1>Pigment</h1>
      </div>
      <div>
       <label class=" email-label label-size" for="email">Email</label>
      </div>
      <input class="email-input" type="email" name="email" id="email" />
      <div>
       <label class="password-label label-size" for="password ">Password</label>
      </div>
      <input class="password-input" type="password" name="password" id="password" />
      <div class="center">
       <button class="btn-block btn-default btn-primary">Submit</button>
      </div>
     </form>
    </div>
   </div>

Radio Button

  	
   <div class="radio-btn">
    <input type="radio" name="radio-input" id="radio-checked" checked />
    <label for="radio-checked">Checked</label>
  
    <input type="radio" name="radio-input" id="radio-unchecked" Unchecked />
    <label for="radio-unchecked">Unchecked</label>
  
  
    <input type="radio" name="radio-input" id="radio-disabled" disabled />
    <label for="radio-disabled">Disabled</label>
   </div>

checkbox

  
   <div class="checkbox">
    <input type="checkbox" name="checkbox-input" id="checkbox-checked" checked />
    <label for="checkbox-checked">Checked</label>
  
    <input type="checkbox" name="checkbox-input" id="checkbox-unchecked" Unchecked />
    <label for="checkbox-unchecked">Unchecked</label>
  
    <input type="checkbox" name="checkbox-input" id="checkbox-disabled" disabled />
    <label for="checkbox-disabled">Disabled</label>
   </div>

List

Lists are used to display a sequence of information.

Stacked list

  • Categories

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  
   <ul class="stacked-list list-decor">
   <li class="list-heading">
    <h1>Categories</h1>
   </li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
   </ul>

Nested list

  • Categories

  • Item 1
  • Item 2
  • Item 3
    • option 1
    • option 2
  • Item 4
  • Item 5
    • option 1
    • option 2
    
    <ul class="nested-list list-decor">
     <li class="list-heading ">
      <h1>Categories</h1>
     </li>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3
       <ul class=" list-decor">
       <li>option 1</li>
       <li>option 2</li>
       </ul>
     </li>
     <li>Item 4</li>
     <li>Item 5
       <ul class=" list-decor">
        <li>option 1</li>
        <li>option 2</li>
       </ul>
     </li>
    </ul>

Modal

Modal is dialog box which is displayed on top of the current page which requires user interactions.

WELCOME!

Sign up for our weekly newsletter!

      
      <div class="modal-btn center">
       <button class="btn btn-primary">CLICK HERE</button>
      </div>
    
       <div class="center">
       <div class="modal-hide ">
        <button class="modal-close">
         <i class="fas fa-times "></i>
        </button>
        <div class="center">
         <h1>WELCOME!</h1>
        </div>
        <div class="center">
         <p>Sign up for our weekly newsletter!</p>
        </div>
        <div class="input-label">
        <div class="username">
         <input type="email" name="email" id="email" />
        </div>
        </div>
        <div class="submit center">
         <button class="btn btn-success">SUBMIT</button>
        </div>
       </div>

Navigation

Navigation is a menu which contains important links to acess the other sections of webpage.

Simple Navbar
  • Home
  • Products
  • About
  • Blog 

    •     
   <div class="nav-list default">
    <li><a href="http://" target="_blank">Home</a></li>
    <li><a href="http://" target="_blank">Products</a></li>
    <li><a href="http://" target="_blank">About</a></li>
    <li><a href="http://" target="_blank">Blog</a></li>
   </div>

    Responsive navbar with collapsible menu

    BRAND
  • Home
  • Products
  • About
  • Blog
    •     
   <div class="nav">
    <div class="nav-list nav-mobile-list nav-responsive ">
     <div><brand>BRAND</brand></div>
     <div class="nav-collapse">
      <button class="nav-toggle">
        <i class="fas fa-bars fa-2x"></i>
      </button>
    <div class="nav-hide ">
     <li><a href="">Home target="_blank"</a></li>
     <li><a href="">Products target="_blank"</a></li>
     <li><a href="">About target="_blank"</a> </li>
     <li><a href="">Blog target="_blank"</a></li>
     </div>
     </div>
    </div>
   </div>

    Rating

        
   <div class="rating">
    <input type="radio" name="rating" id="star-5" />
    <label for="star-5" class="fas fa-star fa-2x star-rating"></label>
    <input type="radio" name="rating" id="star-4" />
    <label for="star-4" class="fas fa-star fa-2x star-rating"></label>
    <input type="radio" name="rating" id="star-3" />
    <label for="star-3" class="fas fa-star fa-2x star-rating"></label>
    <input type="radio" name="rating" id="star-2" />
    <label for="star-2" class="fas fa-star fa-2x star-rating"></label>
    <input type="radio" name="rating" id="star-1" />
    <label for="star-1" class="fas fa-star fa-2x star-rating"></label>
   </div>

    Text Utilities

    Headings

    h1. Pigment heading

    h2. Pigment heading

    h3. Pigment heading

    h4. Pigment heading

    h5. Pigment heading
    h6. Pigment heading
              
   <div>
    <h1 class="pigment-h1">h1. Pigment heading</h1>
    <h2 class="pigment-h2">h2. Pigment heading</h2>
    <h3 class="pigment-h3">h3. Pigment heading</h3>
    <h4 class="pigment-h4">h4. Pigment heading</h4>
    <h5 class="pigment-h5">h5. Pigment heading</h5>
    <h6 class="pigment-h6">h6. Pigment heading</h6>
   </div>

    Small Text

    This text is small 
              
    <div>
      <small class="small">This text is small</small>
    </div>

    Grey Text

    This text is in Grey

            
    <div>
     <h1 class="grey">This text is in Grey</h1>
    </div>

    Center Text

    This text is in center

          
    <div>
      <h1 class="center">This text is in center</h1>
    </div>

    Toast

    Toasts are used to display notifications on user interaction

    ✓

    Success Item added to the cart

    ✕

              
      <div class="toast">
      <div class="toast-content">
      <p class="toast-check center" >✓ </p>
      <div class="toast-message">
      <span class="toast-text toast-text1">
      Success </span>
      <span class="toast-text toast-text2 ">
      Item added to the cart </span>
      </div>
      </div>
      <p class="toast-close" >✕</p>
      <div class="toast-progress" > </div>
      </div>
      <button class="btn btn-default btn-primary btn-toast"> Show Toast </button>
      </div>