Butter Cake

A Buttery Smooth Modern CSS framework
Currently v1.0.0
Butter Cake v1.5 Releasing soon with more stuffs and better Documentation.
Feel free to like on github.

Why Butter Cake?

Butter Cake is an open source CSS framework based on Flexbox, Giving Developers Flexibility & less Classes to create components and included 100+ helper Classes to get the task done easily without writing too many lines of css.

Hey everyone, I know this documentation is not too instructive, I couldn't create a detailed documentation at the moment, but real soon I'll be updating the documentation.

Thank You!
100% Responsive

Designed For Mobile first

Modern

Built with Flexbox

Modular

Just import what you need

How to use


Download Butter Cake and link css file and js file

                
<link rel="stylesheet" href="dist/butterCake.css">

......

<script src="js/butterCake.js"></script>
                
            

That's it, now you are ready to go

Typography


Heading h146px

Heading h240px

Heading h336px

Heading h430px

Heading h524px
Heading h620px


PARAGRAPH


Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae fugit nemo dicta deserunt optio voluptates, ratione expedita illo aliquid dolor aspernatur ex, blanditiis commodi id facere quos assumenda, quae non odio? Quasi, sint natus. Porro nulla maxime perferendis. Culpa soluta vel facilis. Accusantium cupiditate provident laboriosam soluta, vero quod consectetur?



    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, architecto commodi porro sequi
    possimus assumenda.</p>

    <a>Anchor</a>
    <em>Emphasis</em>
    <small>Small</small>
    <strong>Strong</strong>
    <u>Underline</u>

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

Grid

Butter Cake Uses Flex Grid system - classes are similar to bootstrap grid

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Buttons


Regular Buttons


primary success info warning danger dark light white
                
<a class="btn-primary" href="#!">primary</a>
                
            

Rounded Buttons


primary success warning danger dark light
                
<a class="btn-primary rounded" href="#!">primary</a>
                
            

Outline Buttons


primary success warning danger dark light
                
<a class="btn-primary outline" href="#!">primary</a>
                
                

Outline Rounded Buttons


primary success warning danger dark light
                
<a class="btn-primary rounded outline" href="#!">primary</a>
                
                

Large Buttons


primary success info warning danger dark light
                
<a class="btn-primary btn-lg" href="#!">primary</a>
                
                

Small Buttons


button button button button button button button button
                
<a class="btn-primary btn-sm" href="#!">primary</a>
                
                


Button Group


1
2
3
4
1
2
3
4
                
<div class="btn-group">
    <div class="btn-primary">1</div>
    <div class="btn-primary">2</div>
    <div class="btn-primary">3</div>
    <div class="btn-primary">4</div>
</div>

                
                

Dropdown button


                
<div class="dropdown btn-primary">
    <div>Drop Down <i class="fa fa-angle-down"></i></div>
    
    <ul class="dropdown-menu list-unstyled">
    <li><a href="#!">Link 2</a></li>
    <li><a href="#!">Link 3</a></li>
    <li><a href="#!">Link 4</a></li>
    </ul>
</div>
                
                

Badges


Normal Badges

Badge
primary
secondary
success
warning
danger
dark
light


    
<div class="badge primary">primary</div>
    
    

Small Badges

Badge
primary
secondary
success
warning
danger
dark
light


            
<div class="badge badge-sm primary">primary</div>
            
            

Large Badges

Badge
primary
secondary
success
warning
danger
dark
light


            
<div class="badge badge-lg primary">primary</div>
            
            

Rounded Badges

Badge
primary
secondary
success
warning
danger
dark
light
1
1
1
1
1
1
1
1


            
<div class="badge rounded badge-lg primary">primary</div>
            
            

Table


Striped Table

Title Title Title
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
            
<table class="table-striped">
    ..........
</table>
            
            

Scrollable table


Title Title
Lorem, ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, deserunt. Aut in earum quae eligendi.
            
<div class="table-fluid">
    <table>
        ..........
    </table>
</div>
            
            

Form Elements

To use Butter Cake's input style simply add .input class on input element



Simple Input Field

            
<!-- Simple input element -->
<input class="input" type="text" placeholder="John Doe">
            
            

Grouping Label and input

            
<!-- Input group -->
<div class="group">
    <label>Name</label>
    <input class="input" type="text" placeholder="John Doe">
</div>
            
            

Checkbox and radio group

            
<!-- Checkbox & Radio group -->
<div class="group checkbox-group">
    <input type="checkbox" id="confirmField">
    <label for="confirmField">Check Box</label>
</div>

<div class="group checkbox-group">
    <input type="radio" id="confirmField1">
    <label for="confirmField1">Radio Button</label>
</div>
            
            


Grid layout from

            
<div class="col-md-8">
    <form class="py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="group">
                    <input type="text" class="input" placeholder="First Name">
                </div>
            
                <div class="group">
                    <input type="text" class="input" placeholder="Last Name">
                </div>
            </div>

            <div class="col-md-6">
                <div class="group">
                    <input type="email" class="input" placeholder="Your Email">
                </div>

                <div class="group">
                    <input type="tel" class="input" placeholder="Phone Number">
                </div>
            </div>

            <div class="col-md-12">
                <div class="group">
                    <textarea name="" id="" cols="30" rows="10" class="input py-1"
                    placeholder="Message"></textarea>
                </div>
            
                <div class="group">
                    <input class="btn-primary w-100 button-lg uppercase" type="submit" value="Send">
                </div>
            </div>
        </div>
    </form>
</div>
            
            

Lists

Ul List



OL List

  1. List one
  2. List two
  3. List three
  4. List four


Blockquote


Yeah!! Butter Cake is so tasty

            
<blockquote>
    <p><em>Yeah!! Butter Cake is so tasty</em></p>
</blockquote>
            
            


CODE


.butterCake { color: #FFAA23; }
            
<code>
.butterCake {
color: #FFAA23;
}
</code>
            
            

Cards




Regular Card

Card Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!
            
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Card Title</h5>
    </div>
    <div class="card-body">
        ..............
    </div>
    <div class="card-footer">
        ..............
    </div>
</div>
            
            


Card with body


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More


Card with image


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More


Card with image & title


Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More

Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More

Card Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum dolorem vero, reiciendis similique!

Read More
            
<!-- CARDS -->
<div class="card shadow">
    <img src="https://source.unsplash.com/600x400/?person,man" alt="">
    <div class="card-body">
        <h4 class="weight-400">Card Title</h4>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia necessitatibus dolorum
            dolorem
            vero, reiciendis similique!
            </p>
        <a href="#!" class="btn-primary btn-sm">Read More</a>
    </div>
</div>
            
            

Alerts

Primary alert......
Secondary alert......
Dark alert......
Success alert......
Success alert......
Warning Alert.........
Danger alert........
            
<!-- ALERT PRIMARY -->
<div class="alert primary">
    <em>Primary alert......</em>
</div>