FitUI

How To USE ?

Copy-paste the stylesheet link into your head tag before all other stylesheets to load our CSS. 

                
                    <link rel="stylesheet" href="https://component-site-fitui.netlify.app/components/components.css">

Alerts

Alerts are used in different ways, such as while create account, log in account, doing transaction, etc.

This is primary alert!
This is sucess alert!
This is warning alert!
This is danger alert!
This is info alert!
                
                    <div class="alert alert-primary">This is primary alert!</div>
                    <div class="alert alert-success">This is sucess alert!</div>
                    <div class="alert alert-warning">This is warning alert!</div>
                    <div class="alert alert-danger">This is danger alert!</div>
                    <div class="alert alert-info">This is info alert!</div>

Avatar

Avatar are the icons that can be used in social apps, and if user logged in the user is shown. If user have the image then image avatar is used otherwise the text avatar is used.

avatar
avatar
avatar 
                
                        <div class="avatar-img">
                            <div class="avatar avatar-ls">
                                <img src="./assest/images/avatar-img.jpg" alt="avatar" class="circle-img">
                            </div>
                        <div class="avatar avatar-ms">
                            <img src="./assest/images/avatar-img.jpg" alt="avatar" class="circle-img">
                        </div>
                        <div class="avatar avatar-ss">
                            <img src="./assest/images/avatar-img.jpg" alt="avatar" class="circle-img">
                        </div>
                        </div>
M
M
M
                
                        <div class="avatar-text">
                            <div class="avatar avatar-txt avatar-ls">M</div>
                            <div class="avatar avatar-txt avatar-ms">M</div>
                            <div class="avatar avatar-txt avatar-ss">M</div>
                        </div>

Badges

Badges have wide use. It is used in notification, in social apps it shows the person status, and ecomm apps.

7
7
7
7 
                
                        <a href="/" class="bg btn btn-link">
                            <span class="iconify bg-icon" data-icon="zmdi:shopping-cart" data-inline="false">
                            </span>
                            <span class="bg-num">7</span>
                        </a>
                        <a href="/" class="bg btn btn-link">
                            <span class="iconify bg-icon" data-icon="mdi:home" data-inline="false">    
                            </span>
                            <span class="bg-num">7</span>
                        </a>
                        <a href="/" class="bg btn btn-link">
                            <span class="iconify bg-icon" data-icon="mdi:cards-heart-outline" data-inline="false"></span>
                            <span class="bg-num">7</span>
                        </a>
                        <a href="/" class="bg btn btn-link">
                            <span class="iconify bg-icon" data-icon="mdi:cards-heart" data-inline="false">
                            </span>
                            <span class="bg-num">7</span>
                        </a>
avatar
avatar 
                
                    <div class="bg avatar avatar-ms">
                        <img src="./assest/images/avatar-img.jpg" alt="avatar" class="circle-img">
                            <span class="bg-avatar bg-online">
                            </span>
                    </div>
                    <div class="bg avatar avatar-ms">
                        <img src="./assest/images/avatar-img.jpg" alt="avatar" class="circle-img">
                        <span class="bg-avatar bg-offline">
                        </span>
                    </div>

heading h1new

heading h2new

heading h3new

heading h4new

heading h5new
heading h6new

paragraphnew

                
                        <h1>heading h1<span class="bg-txt">new</span></h1>
                        <h2>heading h2<span class="bg-txt">new</span></h2>
                        <h3>heading h3<span class="bg-txt">new</span></h3>
                        <h4>heading h4<span class="bg-txt">new</span></h4>
                        <h5>heading h5<span class="bg-txt">new</span></h5>
                        <h6>heading h6<span class="bg-txt">new</span></h6>
                        <p>paragraph<span class="bg-txt">new</span></p>

Button

Buttons are used everywhere, it can be used in forms, dialog boxes, cards, etc.

link 
                
                    <button class="btn btn-primary">primary</button>
                    <button class="btn btn-outline">outline</button>
                    <a href="#" class="btn btn-link">link</a>
                    <a href="#" class="btn ">
                        <span class="iconify btn-icon" data-icon="zmdi:shopping-cart" data-inline="false">
                    </span>
                    </a>
                    <button class="btn "><span class="iconify btn-float" data-icon="mdi:plus-circle" data-inline="false"></span>
                    </button>

Large and small buttons 

                
                        <button class="btn btn-primary btn-ls">primary</button>
                        <button class="btn btn-primary btn-ss">primary</button>

Cards

Cards are used in almost every app, it is used in ecomm to show products, can be used in dialog box, video app, etc.

peanut-butter

Peanut butter

by Myfitness

Rs 499Rs 999
peanut-butter

Peanut butter

by Myfitness

Rs 499Rs 999
peanut-butter

Peanut butter

by Myfitness

Rs 499Rs 999
new 
                
                    <!-- simple card -->
                    <div class="card card-vrt">
                        <div class="card-img-container">
                            <img class="card-img" src="./assest/images/peanut-butter.png" alt="peanut-butter">
                        </div>
                        <div class="card-desc">
                            <h3>Peanut butter</h3>
                            <p>by Myfitness</p>
                            <span class="card-price">Rs 499</span><span><del class="card-mrp">Rs 999</del>
                            <div class="card-btns">
                                <button class="card-cart btn btn-primary">add to cart</button>
                                <button class="card-wishlist btn btn-outline">wishlist</button>
                        </div>
                        </span></div>
                    </div>

                    <!-- dismis card -->
                    <div class="card card-vrt card-dismis">
                        <div class="card-img-container">
                            <img class="card-img" src="./assest/images/peanut-butter.png" alt="peanut-butter">
                        </div>
                        <div class="card-desc">
                            <h3>Peanut butter</h3>
                            <p>by Myfitness</p>
                            <span class="card-price">Rs 499</span><del class="card-mrp">Rs 999</del>
                            <div class="card-btns">
                                <button class="card-cart btn btn-primary">add to cart</button>
                                <button class="card-wishlist btn btn-outline">wishlist</button>
                            </div>
                        </div>
                        <span class="iconify card-dismis-btn" data-icon="mdi:close" data-inline="false"></span>
                    </div>

                    <!-- badge card -->
                    <div class="card card-vrt card-badge">
                        <div class="card-img-container">
                            <img class="card-img" src="./assest/images/peanut-butter.png" alt="peanut-butter">
                        </div>
                        <div class="card-desc">
                            <h3>Peanut butter</h3>
                            <p>by Myfitness</p>
                            <span class="card-price">Rs 499</span><del class="card-mrp">Rs 999</del>
                            <div class="card-btns">
                                <button class="card-cart btn btn-primary">add to cart</button>
                                <button class="card-wishlist btn btn-outline">wishlist</button>
                            </div>
                        </div>
                        <span class="card-badge-pos">new</span>
                    </div>
peanut-butter

Peanut butter

by Myfitness

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum veritatis aspernatur, ratione inventore similique reprehenderit iure voluptas esse unde sit earum odio impedit, sapiente tenetur excepturi consectetur assumenda, debitis cumque?

peanut-butter

Peanut butter

by Myfitness

Rs 499Rs 999 
                
                    <!-- text overlay card -->
                    <div class="card card-vrt card-txt-overlay">
                        <div class="card-img-container">
                            <img class="card-img" src="./assest/images/peanut-butter.png" alt="peanut-butter">
                        </div>
                        <div class="card-desc card-desc-pos">
                            <h3>Peanut butter</h3>
                            <p>by Myfitness</p>
                        </div>
                    </div>

                    <!-- text only card -->
                    <div class="card card-vrt card-txt">
                        <div class="card-desc">
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                Nostrum veritatis aspernatur,
                                ratione inventore similique reprehenderit iure voluptas 
                                esse unde sit earum odio
                                impedit, sapiente tenetur excepturi consectetur assumenda,
                                debitis cumque?
                            </p>
                            <div class="card-btns card-txt-icons">
                                <span class="iconify card-icons" data-icon="mdi:cards-heart-outline" data-inline="false">
                                </span>
                                <span class="iconify card-icons" data-icon="mdi:share-variant" data-inline="false">
                                </span>
                                <span class="iconify card-icons" data-icon="mdi:dots-vertical" data-inline="false">
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- horizonal card -->
                    <div class="card card-hz">
                        <div class="card-img-container card-img-hz">
                            <img class="card-img" src="./assest/images/peanut-butter.png" alt="peanut-butter">
                        </div>
                        <div class="card-desc">
                            <h3>Peanut butter</h3>
                            <p>by Myfitness</p>
                            <span class="card-price">Rs 499</span><del class="card-mrp">Rs 999</del>
                            <div class="card-btns card-btns-hz">
                                <button class="card-cart btn btn-primary ">add to cart</button>
                                <button class="card-wishlist btn btn-outline">wishlist</button>
                            </div>
                        </div>
                    </div>

Images

Square images are used in landing pages, it is responsive according to the viewport.

gym

Round images can be used in personal portfolio.

man 
                
                    <!-- image responsive -->
                    <img src="./assest/images/gym.jpg" alt="gym" class="img-resp">
                    <!-- round image -->
                    <img src="./assest/images/gym.jpg" alt="man" class="img-round-resp">

Input

Input are used in forms such as sign up, log in, comments box, etc.

required required 
                
                    <!-- input textarea -->
                    <form class="form">
                        <label>textarea</label>
                        <textarea class="input-textarea"></textarea>
                    </form>

                    <!-- input form -->
                    <form class="form">
                        <label>Email</label>
                        <input type="text" required="" class="form-input">
                        <small class="form-error">required</small>
                        <label>Password</label>
                        <input type="text" required="" class="form-input">
                        <small class="form-error">required</small>
                        <button class="btn btn-primary form-btn">login</button>
                    </form>

Text Utilities

Texts are important, different text with different font weight, different heading, different colors, etc. are selected while coding the website or web apps.

heading h1

heading h2

heading h3

heading h4

heading h5
heading h6
                
                <h1>heading h1</h1>
                <h2>heading h2</h2>
                <h3>heading h3</h3>
                <h4>heading h4</h4>
                <h5>heading h5</h5>
                <h6>heading h6</h6>

center paragraph

left text

right text

                
                    <p class="txt-center">center paragraph</p>
                    <p class="txt-left">left text</p>
                    <p class="txt-right">right text</p>

font weight 900

font weight 700

font weight 500

font weight 400

font weight 300

                
                    <p class="ft-w-900">font weight 900</p>
                    <p class="ft-w-700">font weight 700</p>
                    <p class="ft-w-500">font weight 500</p>
                    <p class="ft-w-400">font weight 400</p>
                    <p class="ft-w-300">font weight 300</p>

font weight 900

font weight 700

font weight 500

font weight 400

font weight 300

                
                    <p class="ft-w-900 ft-grey">font weight 900</p>
                    <p class="ft-w-700 ft-grey">font weight 700</p>
                    <p class="ft-w-500 ft-grey">font weight 500</p>
                    <p class="ft-w-400 ft-grey">font weight 400</p>
                    <p class="ft-w-300 ft-grey">font weight 300</p>
small text

fone line through

font underline

font capital

font uppercase

font lowercase

                
                    <small>small text</small>
                    <p><del>fone line through</del></p>
                    <p class="ft-underline">font underline</p>
                    <p class="ft-capital">font capital</p>
                    <p class="ft-uppercase">font uppercase</p>
                    <p class="ft-lowercase">font lowercase</p>

List

List such as normal list, and stacked list. Normal list with circle, square, number, lower-alpha list style type.

  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3
  1. list item 1
  2. list item 2
  3. list item 3
  1. list item 1
  2. list item 2
  3. list item 3

                <ul class="unorder-list-circle">
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                </ul>
                <ul class="unorder-list-sqr">
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                </ul>
                <ol class="order-list-aphabet">
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                </ol>
                <ol class="order-list-roman">
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                </ol>
  • lorem list one
  • lorem list two
  • lorem list three

                <div class="stack-list-container">
                    <ul class="stack-list">
                        <li>lorem list one</li>
                        <li>lorem list two</li>
                        <li>lorem list three</li>
                    </ul>
                </div>

Navigation is used in all website, which are some option to navigate pages, and searches, and login the particular website.

Fit Store

                
                    <div class="navbar">
                    <h1 class="navbar-title">Fit Store</h1>
                    <div class="navbar-search">
                        <input type="text" placeholder="search..." class="navbar-input">
                        <span class="iconify navbar-search-icon" data-icon="bx:bx-search" data-inline="false"></span>
                    </div> 
                      <div class="navbar-icons">
                        <a href="#" class="btn btn-link navbar-login">login</a>
                        <a class="navbar-wishlist" href="#">
                            <span class="iconify navbar-wishlist-icon" data-icon="mdi:cards-heart-outline" data-inline="false">
                            </span>
                        </a>
                        <a class="btn btn-link navbar-cart" href="#">
                            <span class="iconify navbar-cart-icon" data-icon="zmdi:shopping-cart" data-inline="false">
                            </span>
                        </a>
                      </div>
                    </div>

Modals are the screen pop-ups, which appears on the window and blurs the background.

Remove item

Are you sure you want to remove the item?

× 

                <div class="modal card-dismis">
                    <p class="ft-w-500">Remove item</p>
                    <p class="ft-w-500 ft-grey">Are you sure you want to remove the item?</p>
                    <div>
                        <button class="btn btn-primary">remove</button>
                        <button class="btn btn-outline">cancel</button>
                        <span class="card-dismis-btn btn-modal-close" id="modal-closeBtn">×</span>
                    </div>
                </div>
                <button class="btn btn-primary btn-modal-open">open modal</button>

Rating

Ratings are used in the ecommerce app to rate the product.

5 
                
                    <!-- normal star rating -->
                    <div>
                        <span class="iconify rating-fill" data-icon="mdi:star" data-inline="false"></span>
                        <span class="iconify rating-fill" data-icon="mdi:star" data-inline="false"></span>
                        <span class="iconify rating-fill" data-icon="mdi:star" data-inline="false"></span>
                        <span class="iconify rating-fill" data-icon="mdi:star" data-inline="false"></span>
                        <span class="iconify rating-fill" data-icon="mdi:star" data-inline="false"></span>
                    </div>

                    <!-- number rating -->
                        <span class="rating-num">5<span class="iconify" data-icon="mdi:star" data-inline="false"></span></span>

Toast

Toast are the notification which appears on the screens, within few seconds disappears.

This is toast.

                
                    <p id="toast-msg" class="toast ft-w-500 ft-grey">This is toast.</p>

Grid

Grid are mainly used to make layouts, which can be fit in your screen according to your need.

item 1
item 2

item 1
item 3
item 2

item 1
item 2
item 3
            
                <div class="grid-container">
                    <div class="col-left txt-center">item 1</div>
                    <div class="col-right txt-center">item 2</div>
                </div>
        
                <div class="grid-container">
                    <div class="col-left txt-center">item 1</div>
                        <div class="col-mid txt-center">item 3</div>
                        <div class="col-right txt-center">item 2</div>  
                    </div>
            
                <div class="grid-container-row-col">
                    <div class="row-1 txt-center">item 1</div>
                    <div class="col-1 txt-center">item 2</div>
                    <div class="col-2 txt-center"> item 3</div>
                </div>