Butter Cake 2.0

A Modern Lightweight CSS framework ~ 42KB

Butter Cake is a lightweight modular CSS framework, It makes it possible to craft modern and mobile-first designs without having to write too many lines of CSS. It is highly modular, and offers a large number of responsive components and elements that you can choose from.

Currently v2.0
100% Responsive

Designed For Mobile first

Modern

Built with Flexbox

Modular

Just import what you need

Why Butter Cake?


Comparison

ButterCake Bootstrap Bulma
Size (Minified) 42kb css - (js 5kb - unminified) 137kb css - (without js) 166kb css only
Beginner Friendly
Less Classes
Modular
Grid System 12 (Customizable) 12 (Customizable)
Customizable Level
Version v2.0.0 v4.1.3 v0.7.2

Code Comparision



- Navbar

Butter Cake

<!-- NAVBAR -->
<nav class="navbar expand-md default-nav bg-primary">
    <div class="container-fluid">

        <!-- LOGO -->
        <div class="brand">
            <a href="#!">Logo</a>
        </div>

        <!-- NAVBAR -->
        <div class="menu-box" id="mainNav1">
            <!-- CLOSE BUTTON | MOBILE-->
            <div class="menu-close"><i class="fa fa-close"></i></div>

            <!-- MENU -->
            <ul class="menu ml-auto">
                <li><a href="#!">link 1</a></li>
                <li><a href="#!">link 2</a></li>
            </ul>
        </div>

        <!-- TOGGLER | MOBILE -->
        <button class="toggler bg-secondary text-white" data-nav="#mainNav1"><i class="fa fa-bars"></i></button>

    </div>
</nav>

Bootstrap

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container">

        <!-- BRAND -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- TOGGLER -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- MENU -->
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">
                    <a class="nav-link" href="#">Link 1</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>

            </ul>
        </div>

    </div> 
</nav>
    
<!-- BUTTER CAKE  -->
<!-- BUTTONS | More styles available check docs -->
<button class="btn-primary">primary</button>
<button class="btn-primary outline">primary outline</button>

<!-- INPUT FIELD -->
<input type="text" class="input">

<!-- SIMPLE FORM -->
<form>
    <div class="group">
        <label>Email address</label>
        <input type="email" class="input" placeholder="Enter email">
        <small class="text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="group">
        <label>Password</label>
        <input type="password" class="input" placeholder="Password">
    </div>
    <div class="group checkbox-group">
        <input type="checkbox" id="checkbox">
        <label for="checkbox">Check me out</label>
    </div>
    <div class="group">
        <button type="submit" class="btn-primary">Submit</button>
    </div>
</form>
We'll never share your email with anyone else.
<!-- BOOTSTRAP  -->
<!-- BUTTONS -->
<button class="btn btn-primary">primary</button>
<button class="btn btn-outline-primary ">primary outline</button>

<!-- INPUT FIELD -->
<input type="text" class="form-control">

<!-- SIMPLE FORM -->
<form>
    <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" placeholder="Enter email">
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Password">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Usage


Download Butter Cake and link css file and js file

Requires - jQuery
For Navbar, Dropdown, Tabs, Accordian and Modal
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BUTTER CAKE CSS -->
<link rel="stylesheet" href="https://getbuttercake.com/host/dist/butterCake.css">

......

<!-- jQuery first, then Butter Cake JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://getbuttercake.com/host/js/butterCake.js"></script>

That's it, now you are ready to go


Explore Docs