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.
Latest
Latest
Latest
11+
9.1+
Latest