Get Started

Introduction

Get started with Butter Cake,
Butter Cake is an open source and lightweight modular toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass(SCSS) variables and mixins, responsive grid system, extensive prebuilt components.

Quick start

Download Butter Cake Css Framework - Click here to Download v3.0

File Structure of Butter Cake

Butter Cake/
│
├── dist/
│    │
│    ├── css/
│    │   ├── butterCake.min.css (98kb)
│    │   └── butterCake.min.css.map (52kb)
│    │ 
│    └── js/
│        ├── butterCake.js (Non Minified) (9kb) - (Complete components Js)
│        ├── butterCake.min.js (Minified) (5kb) - (Complete components Js)
│        ├── alert.js 
│        ├── accordion.js 
│        ├── dropdown.js 
│        ├── modal.js 
│        ├── chips.js 
│        ├── tabs.js 
│        ├── side-navbar.js (Side Navbar)
│        └── slideDown-navbar.js (Slide Down Navbar)
│
├── src/ (Includes SASS|SCSS Files)
│
├── prepros-6.config
│
└── index.html (Starter File)

NOTE: By Default butterCake.js and butterCake.min.js includes Side Navbar.
If you want to add Slide Down Navbar, Do not include compiled version of Butter Cake js
include slideDown-navbar.js for Slide Down Navbar.

CSS

Link Butter Cake stylesheet dist/butterCake.min.css file into your head tag before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css">

Available Colors

Primary

Secondary

Dark

Light

White

Success

Info

Warning

Danger

JS

Navbar, Dropdown, Tabs, Accordian and Modal Requires Butter Cake Javascript File. Specifically, they require jQuery

<script src="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/js/butterCake.min.js"></script>

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello, world!</title>

  <!-- 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://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css">

</head>
<body>
  <h1>Hello, world!</h1>

  <!-- jQuery first, then Butter Cake JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/js/butterCake.min.js"></script>

</body>
</html>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!