Felix UI

A light weight CSS component library to speed up your next awesome project

Felix UI is an open source styling framework, which helps Developers to use best styles and components, by using pre-defined classnames. Felix UI helps you to quickly build your Dream Project, by focusing much on Functionality, because we take care of your Designs.

Quick start

In order to introduce Felix UI to your project, Copy the Link given below and paste it in the head tag of your html, above all other style sheets.

Colors

Felix UI comes with 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 Felix, listed with the hex-codes.

Primary #3bb77e

Secondary #2d3748

Gray #626262

Success #20a779

Error #fd4e4e

Warning #f8aa1c

Info #007bc3

Utility classes for colors

.bg-primary .bg-secondary .bg-gray .bg-success .bg-error .bg-warning .bg-info

.bg-primary-light .bg-secondary-light .bg-gray-light .bg-success-light .bg-error-light .bg-warning-light .bg-info-light

Typography

Felix UI uses Montserrat, as its default font, which is a free font available at Google Fonts.

A Visual Type Scale - h1

A Visual Type Scale - h2

A Visual Type Scale - h3

A Visual Type Scale - h4

A Visual Type Scale - h5

A Visual Type Scale - h6

A Visual Type Scale - p

A Visual Type Scale - label

Heading - h1

Heading - h2

Heading - h3

Heading - h4

Heading - h5

Heading - h6

Paragraph - p

Small text - label

Utility Classes

Class Names	Description
`.text-primary`	Change font color to Primary - `#3bb77e`
`.text-black`	Change font color to Secondary - `#2d3748`
`.text-gray`	Change font color to Gray - `#626262`
`.text-success`	Change font color to Success - `#20a779`
`.text-error`	Change font color to Error - `#f8aa1c`
`.text-warning`	Change font color to Warning - `#fd4e4e`
`.text-info`	Change font color to Info - `#007bc3`
`.text-center`	Used to center text in a block element
`.text-w-400`	Used for setting font weight of `400`
`.text-w-500`	Used for setting font weight of `500`
`.text-w-600`	Used for setting font weight of `600`

Alert

Alerts are used to communicate a state that affects a system, feature or page.

Examples

Data uploaded to the server. Fire on!

Alert theme

Alerts are available in 4 different color scheme show case any system alert to users.

Data uploaded to the server. Fire on!

Update is ready to be installed.

Seems your account is about to expire, upgrade now.

There was an error processing your request!

    



    
        
    
    
        Data uploaded to the server. Fire on!
    





    
        
    
    
        Update is ready to be installed.
    





    
        
    
    
        Seems your account is about to expire, upgrade now.
    





    
        
    
    
        There was an error processing your request!

Alerts variant

Alerts can have extra information with description and can also have a close button.

There was an error processing your request! Request can not be processed due to insufficient funds in account.

    

    
        
    
    
        There was an error processing your request!
        Request can not be processed due to insufficient funds in account.

Avatar

Avatar is used to represent a user, and displays the profile picture or initials.

Examples

Avatar size

The Avatar component comes in 6 sizes. check examples for better understanding.

Avatar with text



    AT


    RE


    SK

Avatar with badges

Badges indicate status of a particular avatar.

AT

Avatar group

An avatar group is an element that communicates to the user that there is more than 1 person associated to an item.

+78

Badge

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

Examples

Example heading new


Example heading new

Badge colors

New Sale Trending Latest Best seller


New
Sale
Trending
Latest
Best seller

Icon badges

99+ 15 new

Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Examples

Felix UI includes several predefined button styles, each serving its own semantic purpose.

Button variants

Card

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

Product card

Product card comes with Few variations. Vertical, Horizontal and Text variant for different use case.

Vertical card

To the product card vertical just add .vertical class to parent element.

Sale

Food Angie’s Boomchickapop Sweet & Salty

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt. Facere laboriosam accusantium corrupti, repellendus ratione inventore architecto expedita aliquam!

By Nestle

Rs. 250 Rs. 339

Sale

Food Angie’s Boomchickapop Sweet & Salty

By Nestle

Rs. 250 Rs. 339

Sale

Food Angie’s Boomchickapop Sweet & Salty

By Nestle

Rs. 250 Rs. 339

    

    
        Sale
        
    
    
        Food
        Angie’s Boomchickapop Sweet & Salty
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
        By Nestle
        
            
                Rs. 250
                Rs. 339

Horizontal card

To the product card horizontal just add .horizontal class to parent element.

Sale

Food Angie’s Boomchickapop Sweet & Salty

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.

By Nestle

Rs. 250 Rs. 339

Sale

Food Angie’s Boomchickapop Sweet & Salty

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.

By Nestle

Rs. 250 Rs. 339

    

    
        Sale
        
    
    
        Food
        Angie’s Boomchickapop Sweet & Salty
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
        By Nestle
        
            
                Rs. 250
                Rs. 339

Text only card

To show only the text details of a product just add .text-only class in parent element to hide product images.

Sale

Food Angie’s Boomchickapop Sweet & Salty

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.

By Nestle

Rs. 250 Rs. 339

Sale

Food Angie’s Boomchickapop Sweet & Salty

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.

By Nestle

Rs. 250 Rs. 339

    

    
        Sale
        
    
    
        Food
        Angie’s Boomchickapop Sweet & Salty
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
        By Nestle
        
            
                Rs. 250
                Rs. 339

Card with overlay

To show an overlay on a product just add a div element with .card__overlay class with desired text.

Sale

Food Angie’s Boomchickapop Sweet & Salty

By Nestle

Rs. 250 Rs. 339

Out of stock

Sale

Food Angie’s Boomchickapop Sweet & Salty

By Nestle

Rs. 250 Rs. 339

Sale

Food Angie’s Boomchickapop Sweet & Salty

By Nestle

Rs. 250 Rs. 339

    

    
    Out of stock
    
        Sale
        
    
    
        Food
        Angie’s Boomchickapop Sweet & Salty
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
        By Nestle
        
            
                Rs. 250
                Rs. 339
            
            
                
                
            
        
    




    
    
    
        Sale
        
    
    
        Food
        Angie’s Boomchickapop Sweet & Salty
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
        By Nestle
        
            
                Rs. 250
                Rs. 339

Grid

Use grid when you want to divide screen width into column. Check below some examples of side by side cards.

Two column grid

To create a two colum grid add .grid class to parent container div and arrange it according to your need with below utility classes.

col-2-even : To evenly divide a row into 2 columns.
col-2-right-expand : To divide a row into 2 columns where right column is stretched.
col-2-left-expand : To divide a row into 2 columns where left column is stretched.

Column 1 Collapesd column

Column 2 Stretched column

Column 1 Even column

Column 2 Even column

Column 1 Stretched column

Column 2 Collapesd column

Three column grid

To create a three colum grid add .grid class to parent container div and arrange it according to your need with below utility classes.

col-3-even : To evenly divide a row into 3 columns.
col-3-right-expand : To divide a row into 3 columns where right column is stretched.
col-3-mid-expand : To divide a row into 3 columns where middle column is stretched.
col-3-left-expand : To divide a row into 3 columns where left column is stretched.

Column 1 Even column

Column 2 Even column

Column 3 Even column

Column 1 Stretched column

Column 2 Even column

Column 3 Even column

Column 1 Even column

Column 2 Stretched column

Column 3 Even column

Column 1 Even column

Column 2 Even column

Column 3 Stretched column

Images

Felix UI comes with few utility classes for images for different purpose.

Responsive image

Images in Felix UI are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Rounded images

Input

The input is used to get user input in a text field.

Examples

Full name

    

    
        Full name

Input with validation

Inputs need to be validated before getting processed in the system. so input comes with validation messages for better user experience

Username Username is not valid

    

    
        Username
        Username is not valid

Form example

    

    
        
            Email
        
        
    
    
        
            Password
        
        
    
    
        
        Keep me signed in

List

Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Class Names	Description
`list-style-disc`	To add disc style for `ul` list items.
`list-style-square`	To add square style for `ul` list items.
`list-style-circle`	To add circle style for `ul` list item.
`list-style-number`	To add number style for `ol` list item.
`list-style-lowerLetter`	To add lower case letter style for `ol` list item.
`list-style-upperLetter`	To add Upper case letter style for `ol` list item.

list item1
list item2
list item3

list item1
list item2
list item3

list item1
list item2
list item3

list item1
list item2
list item3

list item1
list item2
list item3

list item1
list item2
list item3

    
 
    {list items...}

 
    {list items...}

 
    {list items...}

 
    {list items...}

 
    {list items...}

 
    {list items...}

Stacked list for notification

To strip away any list styling, add list-style-none class to stack items without any default list styles.

user added
@new-user just folowed you
user added
@new-user just folowed you
user added
@new-user just folowed you
user added
@new-user just folowed you

    
 
    
        user added
        @new-user just folowed you
    
    
        user added
        @new-user just folowed you
    
    
        user added
        @new-user just folowed you
    
    
        user added
        @new-user just folowed you

Modals

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.

Live demo

Click on the below CTA to open modal. Once the modal is open user will not be able to scroll or do any action on the main page. To close the pop-up, click on close icon or Back button. Functionality is achieved using JavaScript

    

    
        
            Modal title
            
        
        
            This is a demo modal
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam natus sint dicta
                 sed id voluptate atque, sequi error aliquid consequatur facere adipisci a quidem 
                 similique ex doloribus reprehenderit ratione cumque?

JavaScript

    
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the span element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = ()=> {
    modal.style.display = "block"
    document.body.style.overflow = "hidden"
}

// When the user clicks on (x), close the modal
span.onclick = ()=> {
    modal.style.display = "none"
    document.body.style.overflow = "visible"
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = (event)=> {
    if (event.target == modal) {
        modal.style.display = "none"
        document.body.style.overflow = "visible"
    }
}

Navigation

Navigation bar is used to navigate through the web apps or websites. This navigation component is responsive. It is a hamburger menu in medium and small devices

Example of generic navigation

    

    
         Brand Logo
        
            Link-1
            Link-2

Rating

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

Example of read-only ratings

(3.1)

Toast

This component can be used for toast or snackbar component. Toast is mostly used to show feedback message. Snackbar is to used show message that need user action

Example of Toast

Saved!

Please fill the form!

Saving to server...

Try again later!

    

    Saved! 
    


    Please fill the form! 
    


    Saving to server... 
    


    Try again later!

Slider

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

Example

JavaScript

    
const range = document.querySelector(".range")
const thumb = document.querySelector(".thumb")
const track = document.querySelector(".track-inner")

const updateSlider = (value) => {
    thumb.style.left = `${value}%`
    thumb.style.transform = `translate(-${value}%, -50%)`
    track.style.width = `${value}%`
}

range.oninput = (e) => updateSlider(e.target.value)

updateSlider(50)