Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Introduction

Get Started

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, responsive grid system, extensive prebuilt components and addons.

Quick start

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

File Structure of Butter Cake
    Butter Cake/
    │
    ├── dist/
    │ │
    │ ├── css/
    │ │ ├── butterCake.min.css
    │ │ └── butterCake.min.css.map
    │ │
    │ └── js/
    │ ├── butterCake.js (Optional)
    │ └── butterCake.min.js (Optional)
    │
    ├── src/ (Includes SCSS Files)
    │
    ├── prepros-6.config (for prepros)
    │
    ├── gulpfile.js (if you want to use gulp)
    │
    └── index.html (Starter File)
  

Css

Link Butter Cake stylesheet dist/butterCake.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@4.0.0/dist/css/butterCake.min.css">
  

JS

Navbar, Dropdown, Tabs, Accordian and Modal Requires Butter Cake Javascript File. Specifically, they require jQuery,
Butter Cake js is completely optional and you can write your own Javscript to make it work.


  <script src="https://cdn.jsdelivr.net/npm/buttercake@4.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>Butter Cake Starter Kit v4.0</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@4.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@4.0.0/dist/js/butterCake.min.js"></script>

  </body>
</html>

Browser Support

The following table lists the versions that Butter Cake is tested on. "Latest" means that it works just fine on all recent versions of that browser. With many browser moving towards a rolling release strategy, pinning down browser support to a specific version has become a little tricky in recent years. Long story short: Butter Cake will work on pretty much any modern browser.

Chrome

Latest

Firefox

Latest

Edge

Latest

IE

11+

Safari

9.1+

Opera

Latest

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon