Introduction to Spiral UI

Spiral UI is an easy to use CSS framework, which helps in using best styles and components, by using pre-defined class names. Spiral UI helps you to quickly build your projects.

Installation Guide

To introduce Spiral UI to your project, copy the link given below and paste it in <head> tag of your html, above all other style sheets.

            
            <link rel="stylesheet" href="https://spiralui.netlify.app/components.css">

Customizing Styles

Even though Spiral UI tries to provide most of the styling for the user, there might be some styling that user wants to apply. We can override the Spiral UI styling by adding own classes to already existing classes and style them seperately.

          
            <header class="header custom-style">Custom Style</header>

                      <-- Custom class styling -->

                      <style>
                          .custom-style{
                            color : white;
                          }
                      </style>

Spiral UI Colors

Spiral UI uses pre-defined colors, which are consistent in the overall design. The colors used are chosen on a generic basis, which can be accessed by pre-defined classes.

Default Palette

Below is the color palette, used by Spiral UI.

Success

#84cc16

Danger

#e11d48

Warning

#f59e0b

Info

#2563eb

Black

#000000

White

#FFFFFF

Typography

Headings

All HTML headings, <h1> through <h6>, are available.

h1 Spiral UI Component Library

h2 Spiral UI Component Library

h3 Spiral UI Component Library

h4 Spiral UI Component Library

h5 Spiral UI Component Library

h6 Spiral UI Component Library

Font Family

Font that is used in Spiral UI is Roboto which you can use it by placing below code in css file.

          
          @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100&display=swap");

Avatar

Avatars are user profile pictures, usually found in circular shapes. Avatars can be used to give a recognisable visual identity.

Profile Avatar

Profile Avatars can be created using the class avatar, inside the img tag.

          
            <img src="img-source" alt="avatar-image" class="avatar" />
            <img src="img-source" alt="avatar-image" class="avatar" />
            <img src="img-source" alt="avatar-image" class="avatar" />

Sizes Avatar

Different sizes of profile Avatars can be created using the classes sm, md, lg, inside the img tag.

            
              <img src="img-source" alt="avatar-small-image" class="avatar sm" />
              <img src="img-source" alt="avatar-medium-image" class="avatar md" />
              <img src="img-source" alt="avatar-large-image" class="avatar lg" />

Square Avatar

Square type of profile Avatars can be created using the class square, inside the img tag.

            
          <img src="img-source" alt="avatar-square-image" class="avatar sm square" />
          <img src="img-source" alt="avatar-square-image" class="avatar md square" />
          <img src="img-source" alt="avatar-square-image" class="avatar lg square" />

Alert

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

Simple Alert

Simple Alerts can be created using alert class, followed by the variant name (like info, danger, success, warning).

Info Alert ! Change a few things

Danger Alert ! Change a few things

Success Alert ! Change a few things

Warning Alert ! Change a few things

          
            <div class="alert info">
                <p>Info Alert ! Change a few things</p>
            </div>
            <div class="alert danger">
                <p>Danger Alert ! Change a few things</p>
            </div>
            <div class="alert success">
                <p>Success Alert ! Change a few things</p>
            </div>
            <div class="alert warning">
                <p>Warning Alert ! Change a few things</p>
            </div>

Alert with Icon

Alerts with icons can be created using alert class, followed by the variant name (like info, danger, success, warning) and flex and flex-start.

info

Info Alert ! Change a few things

priority_high

Danger Alert ! Change a few things

check_circle

Success Alert ! Change a few things

warning

Warning Alert ! Change a few things

          
            <div class="alert info flex flex-start">
                  <span class="material-icons"> info </span>
                  <p>Info Alert ! Change a few things</p>
            </div>
            <div class="alert danger flex flex-start">
                  <span class="material-icons"> priority_high </span>
                  <p>Danger Alert ! Change a few things</p>
            </div>
            <div class="alert success flex flex-start">
                  <span class="material-icons"> check_circle </span>
                  <p>Success Alert ! Change a few things</p>
            </div>
            <div class="alert warning flex flex-start">
                  <span class="material-icons"> warning </span>
                  <p>Warning Alert ! Change a few things</p>
            </div>

Badge

Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge can be used to display numbers, online / offline status, depending on where they are used.

Profile with Badge

Profile Badge is used to show the current status of a user. It can be used with 2 variants : online and busy.

We can use class as status for displaying small circle at bottom and online or busy for color.

          
            <div class="badge">
                <img src="img-source" alt="badge-image" class="avatar" />
                <div class="status online"></div>
            </div>

            <div class="badge">
                <img src="img-source" alt="badge-image" class="avatar" />
                <div class="status busy"></div>
            </div>

            <div class="badge">
                <img src="img-source" alt="badge-image" class="avatar" />
                <div class="status online"></div>
            </div>

Icon with Badge

Icon with Badge is used to show the number of items present in it. It can be created using class number, status, flex and busy.

shopping_cart

shopping_bag

credit_card

          
            <div class="badge">
              <span class="material-icons span icon"> shopping_cart </span>
              <div class="number status flex">5</div>
            </div>

            <div class="badge">
              <span class="material-icons span icon">shopping_bag</span>
              <div class="number status flex">5</div>
            </div>
            
            <div class="badge">
              <span class="material-icons span icon">credit_card</span>
              <div class="number status flex busy">5</div>
            </div>

Button

Buttons are an important part of websites.Buttons are used on forms, website homepages, dialog boxes, and toolbars. Buttons allow users to take actions, with a single tap.

Contained Button

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

Contained button can be created using btn and btn-variant (variant can be default, success, primary, error)

          
            <button class="btn btn-default">Default</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-error">Error</button>

Link Button

Links are used to direct users to other pages (like about me, read more). To have link action on button click, we can use link button

          
            <button class="btn btn-default"><a class="link" href="#">Link</a></button>

Button with Icon

Buttons with icons can be made by making icon and text as child and giving btn btn-variant (variant can be primary, error, success) and flex as classes on parent.

          
            <button class="btn btn-primary flex">
              <span class="material-icons"> email </span>
              <p>Email</p>
            </button>

            <button class="btn btn-error flex">
              <span class="material-icons"> error </span>
              <p>Error</p>
            </button>

            <button class="btn btn-success flex">
              <span class="material-icons"> check_circle </span>
              <p>Success</p>
            </button>

Floating Buttons

A floating action button performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center

We can create a floating button using class float-btn

arrow_upward edit

          
            <span class="material-icons float-btn arrow-upward">arrow_upward</span>
            <span class="material-icons float-btn edit"> edit</span>

Responsive Image

Responsive Image Components are used to display images on websites, which are screen responsive.

Image can be made responsive by using class responsive-img.

          
            <img src="img-source" alt="responsive-image" class="img responsive-img" />

Round Image

Round Images are circular, with a default dimension of 150px X 150px.

We can create a rounded image by using class rounded-img.

          
            <img src="img-source" alt="round-image" class="img rounded-img" />
            <img src="img-source" alt="round-image" class="img rounded-img" />

Input

Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly.

Labeled Input

Label Input has a label present at the top of the input field. They can be customized to show error error-message, and change color accordingly.

Labeled inputs can be created using class input, and can be customized to show error-message using class incorrect, incorrect-password.

          
            <div>
              <label>Username * </label>
              <input type="text" placeholder="Enter Username" class="input" required />
            </div>

            <div>
              <label class="incorrect">Password * </label>
              <input type="password" placeholder="Enter Password" class="input incorrect-password" required />
              <div class="incorrect">
                <p>Incorrect password.</p>
              </div>
            </div>

Radio

Radio buttons allow the user to select one option from a set.

Checked

Unchecked

Disabled

          
            <div>
              <input type="radio" name="radio" id="checked" />
              <label for="checked">Checked</label>
            </div>

            <div>
              <input type="radio" name="radio" id="unchecked" />
              <label for="unchecked">Unchecked</label>
            </div>

            <div>
              <input type="radio" name="radio" id="unchecked" disabled />
              <label for="unchecked">Disabled</label>
            </div>

Checkbox

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Check box 1

Check box 2

Disabled

          
            <div>
              <input type="checkbox" id="checkbox1" />
              <label for="checkbox1">Check box 1</label>
            </div>

            <div>
              <input type="checkbox" id="checkbox2" />
              <label for="checkbox2">Check box 2</label>
            </div>

            <div>
              <input type="checkbox" id="checkbox-disabled" disabled />
              <label for="checkbox-disabled">Disabled</label>
            </div>

Card

Card is a UI component that contains content and actions about a single subject. A card can contain several different elements, but they all should be about a single subject. Typically, the card serves as an overview and an entry point for more detailed information.

Simple Card

Simple Card is the one that contains a title, a descriptive text.

Text only card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus dolorem suscipit eos quod magnam eligendi esse enim recusandae rerum rem laudantium distinctio aliquam molestiae consequatur minus repellendus molestias, adipisci quam!

          
              <div class="card card-width">
                <div class="p-1">
                  <h3>Text only card</h3>
                  <p class="pt-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus dolorem suscipit
                    eos quod magnam eligendi esse enim recusandae rerum rem laudantium distinctio aliquam molestiae consequatur
                    minus repellendus molestias, adipisci quam!
                  </p>
                </div>
              </div>

Card with Dismiss

cancel

Lorem ipsum, dolor sit amet consectetur adipisicing elit. In tempore quos

favorite_border share more_vert

          
              <div class="card card-width">
                <div class="p-1 flex space-between">
                  <h3>Card with Dismiss</h3>
                  <span class="material-icons">cancel</span>
                </div>

                <img class="img img-dimensions" src="img-source" />
                <div class="p-1">
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In tempore quos</p>
                </div>

                <div class="p-1 buttons flex space-between">
                  <button class="read btn btn-error">Read</button>
                  <button class="bookmark btn btn-primary">Bookmark</button>
                  <span class="material-icons">
                  favorite_border
                  </span>
                  <span class="material-icons ">
                  share
                  </span>
                  <span class="material-icons">
                  more_vert
                  </span>
                </div>
              </div>

Card with Badge

We can create a badge on card using class card-badge

New

Card with Badge

Lorem ipsum dolor sit amet consectetur adipisicing elit.

favorite_border share more_vert

          
              <div class="card card-width">
                <div class="card-badge">New</div>
                <img class="img img-border img-dimensions" src="img-source" />
                <div class="p-1">
                  <h3>Card with Badge</h3>
                  <p class="pt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>

                <div class="p-1 buttons flex flex-end">
                  <span class="material-icons">
                  favorite_border
                  </span>
                  <span class="material-icons ">
                  share
                  </span>
                  <span class="material-icons">
                  more_vert
                  </span>
                </div>
              </div>

Card with Text Overlay

We can overlay text on image using class overlay-text

Card with text overlay

by Rohit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, sed!

favorite_border share more_vert

          
            <div class="card card-width">
              <div class="img-overlay">
                <img class="img img-dimensions" src="img-source" />
                <div class="text-overlay">
                  <div class="p-1">
                    <h3>Card with text overlay</h3>
                    <p>by Rohit</p>
                    <span class="material-icons span hidden">cancel</span>
                  </div>
                </div>
              </div>
              <div class="px-1">
                <p class="pt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, sed! </p>
              </div>
              <div class="p-1 buttons flex space-between">
                <button class="read btn btn-error">Read</button>
                <button class="bookmark btn btn-primary">Bookmark</button>
                <span class="material-icons">
                favorite_border
                </span>
                <span class="material-icons ">
                share
                </span>
                <span class="material-icons">
                more_vert
                </span>
              </div>
            </div>

Horizontal Card with shadow

Horizontal card can be created using the classes horizontal-card, horizontal-img, horizontal-card-text

Horizontal Card

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

        
            <div class="card horizontal-card ">
              <div class="flex flex-start">
                <img class="img img-border horizontal-img align-self-stretch" src="img-source" />
                <div class="horizontal-card-text flex align-start flex-column">
                    <h3>Horizontal Card</h3>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

Text Utilities

Small, centered and grey text can be made by using classes small-text, text-center, grey-text

Small Text

Center Text

Grey Text

          
            <p class="small-text"> Small Text</p>
            <p class="text-center"> Center Text</p>
            <p class="grey-text"> Grey Text</p>

Lists

Simple Lists

We can create simple lists by using class list on list items.

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

          
            <ul>
              <li class="list">List Item 1</li>
              <li class="list">List Item 2</li>
              <li class="list">List Item 3</li>
              <li class="list">List Item 4</li>
              <li class="list">List Item 5</li>
            </ul>

Stacked Lists

We can create stacked lists by using classes list and container

Notification 1

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Notification 2

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Notification 3

Lorem ipsum dolor sit amet consectetur adipisicing elit.

          
            <ul>
              <li class="list">
                  <div class="container">
                    <h3>Notification 1</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                  </div>
              </li>
              <li class="list ">
                  <div class="container">
                    <h3>Notification 2</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                  </div>
              </li>
              <li class="list">
                  <div class="container">
                    <h3>Notification 3</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                  </div>
              </li>
            </ul>

Modal

Modals are positioned over everything else in the document and remove scroll from the page. It gets closed only with close button on modal pop-up.

Modal can be created using classes modal-bg, modal.

          
            <div class="flex">
              <button class="btn open-modal btn-error">Open Modal</button>
            </div>
            <div class="modal-bg modal-hidden flex">
              <div class="modal">
                  <div class="flex space-between">
                    <h2>Modal Heading</h2>
                    <span class="material-icons modal-close">close</span>
                  </div>
                  <p class="pt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                  Quis natus accusantium fuga a totam eligendi soluta aliquam magni.</p>
                  <div class="flex flex-end pt-1">
                    <button class="btn btn-primary">Action 1</button>
                    <button class="btn btn-error">Action 2</button>
                  </div>
              </div>
            </div>

Javascript Code

          
            const modalButton = document.querySelector(".open-modal");
            const modalBg = document.querySelector(".modal-bg");
            const modalClose = document.querySelector(".modal-close");

            function alertButtonHandler() {
              modalBg.classList.remove("modal-hidden");
              document.body.style.overflow = "hidden";
            }
            function modalCloseHandler() {
              modalBg.classList.add("modal-hidden");
              document.body.style.overflow = "visible";
            }

            modalButton.addEventListener("click", alertButtonHandler);
            modalClose.addEventListener("click", modalCloseHandler);

Navigation

A navigation bar is a user interface element within a webpage that contains links to other sections of the website.

          
            <header class="container bg">
              <nav class="flex space-between">
                  <div class="flex">
                    <span class="material-icons icon"> menu </span>
                    <h1>Navigation</h1>
                  </div>
                  <div class=" flex">
                    <span class="material-icons icon"> shopping_cart </span>
                    <span class="material-icons icon"> favorite </span>
                    <span class="material-icons icon"> person </span>
                  </div>
              </nav>
            </header>

Snackbar

A Snackbar is a message used to give users feedback after taking an action. They time out after a few seconds.

To create snackbars, use classes snackbar, snackbar-baseline, snackbar-leading,snackbar-stacked

The given below are 3 variants of snackbars.

Can't send photo. Retry in 5 secs.

Your photo has been archived.

This item already has a label . You can add a new label.

          
            <div class="flex pt-1">
              <button class="baseline btn btn-primary">Baseline</button>
              <button class="leading btn btn-error">Leading</button>
              <button class="stacked btn btn-success">Stacked</button>
            </div>
            <!-- Baseline -->
            <div class="snackbar snackbar-baseline flex baseline-hidden">
              <h4 class="">Can't send photo. Retry in 5 secs.</h4>
              <div class="flex">
                  <button class="btn btn-error">Retry</button>
                  <span class="material-icons snackbar-close">
                  close
                  </span>
              </div>
            </div>
            <!-- Leading -->
            <div class="snackbar snackbar-leading flex leading-hidden">
              <h4 class="snackbar-text">Your photo has been archived.</h4>
              <div class="flex">
                  <button class="btn btn-error">Undo</button>
                  <span class="material-icons snackbar-close">
                  close
                  </span>
              </div>
            </div>
            <!-- Stacked -->
            <div class="snackbar snackbar-stacked stacked-hidden">
              <h4 class="snackbar-text">This item already has a label. 
              You can add a new label.</h4>
              <div class="flex flex-end pt-1">
                  <button class="btn btn-error">Add a new label</button>
                  <span class="material-icons snackbar-close">
                  close
                  </span>
              </div>
            </div>

Rating

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

star star star star_border star_border

          
            <span class="material-icons rated">star</span>
            <span class="material-icons rated">star</span>
            <span class="material-icons rated">star</span>
            <span class="material-icons">star_border</span>
            <span class="material-icons">star_border</span>

Slider

Sliders are used to decide range for something like sound in videos, price in shopping sites, etc

To create slider use the class slider

0 100

          
            <div class="container text-center">
              <span>0</span>
              <input
                  type="range"
                  name="slider"
                  id="slider"
                  min="0"
                  max="100"
                  class="slider"
              />
              <span>100</span>
            </div>

Grid

Grid is a visual structure used to organize components of a webpage's design such as typography, images, video, and other elements

To use these kind of responsive grids, use the class grid, grid-item

Two Items in Grid

Grid 1

Grid 2

          
            <div class="container grid">
              <div class="grid-item flex">Grid 1</div>
              <div class="grid-item flex">Grid 2</div>
            </div>

Three Items in Grid

Grid 1

Grid 2

Grid 3

          
            <div class="container grid">
              <div class="grid-item flex">Grid 1</div>
              <div class="grid-item flex">Grid 2</div>
              <div class="grid-item flex">Grid 3</div>
            </div>

Drawer

The side drawer, also known as the slide menu, navigation drawer, or the “Left nav”, is a UI panel that contains an site or mobile app's main navigation destinations. Usually hidden from view, the side drawer slides in from the left edge of the screen.

Mail

email@gmail.com

inbox

Inbox

star

Star

send

Sent Mail

drafts

Drafts

Lables

inbox

Friends

star

Family

send

Work

drafts

Drafts

inbox

Inbox

star

Star

send

Sent Mail

drafts

Drafts

Dismissible Drawer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, corporis voluptas omnis amet consequuntur doloremque neque, provident magnam at doloribus recusandae, ipsum laudantium molestiae. Sit consequatur recusandae amet saepe cumque?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam voluptates non facilis deleniti amet, debitis, magnam optio quos magni expedita excepturi porro nulla repellat. Id aperiam consectetur veritatis eaque corrupti!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

          
            <div class="drawer flex no-wrap no-gap">
            <aside>
              <div class="aside-nav p-1">
                <div>
                  <h3>Mail</h3>
                  <small>email@gmail.com</small>
                </div>
                <nav class="pt-1">
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> inbox </span>
                    <p>Inbox</p>
                  </div>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> star </span>
                    <p>Star</p>
                  </div>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> send </span>
                    <p>Sent Mail</p>
                  </div>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> drafts </span>
                    <p>Drafts</p>
                  </div>
                  <hr />
                  <h1 class="pt-1">Lables</h1>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> inbox </span>
                    <p>Friends</p>
                  </div>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> star </span>
                    <p>Family</p>
                  </div>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> send </span>
                    <p>Work</p>
                  </div>
                  <div class="flex flex-start nav-link">
                    <span class="material-icons"> drafts </span>
                    <p>Drafts</p>
                  </div> 
                </nav>
              </div>
            </aside>
            <div class="drawer-content">
              <header class="drawer-nav flex flex-start p-1">
                <span class="material-icons menu-icon"> menu </span>
                <h4>Dismissible Drawer</h4>
              </header>
              <div class="p-1">
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit......
                </p>
              </div>
            </div>

Javascript Code

          
            const menu = document.querySelector(".menu-icon");
            const asideNav = document.querySelector(".aside-nav");

            function menuHandler() {
              asideNav.classList.toggle("hide");
            }

            menu.addEventListener("click", menuHandler);

arrow_upward