Butter Cake - A lightweight Modern Css framework
Tags: html, css, framework, webdev
Published: 2019-05-28 23:23:05

#### Butter Cake - Modern lightweight css framework built on top of flexbox


<p align="center">
  <a href="https://getbuttercake.com/?ref=readmeHeader">
    <img src="https://getbuttercake.com/README/header-1.svg" alt="Butter Cake logo" width="100%">
  </a>
</p>

<h3 align="center">Butter Cake</h3>

<p align="center">
  A Modern Lightweight Front End CSS framework for faster and easier web development.
  <br>
  <a href="https://getbuttercake.com/?ref=readmeHeader"><strong>Explore Butter Cake docs »</strong></a>
  <br>
  <br>
  <a href="https://getbuttercake.com/">Report bug</a>
  .
  <a href="https://getbuttercake.com/">Request feature</a>
  .
  <a href="https://getbuttercake.com/examples">Examples</a>
</p>

<img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">


## Status <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">


[![](https://data.jsdelivr.com/v1/package/gh/himasrafeek/butterCake/badge)](https://www.jsdelivr.com/package/gh/himasrafeek/butterCake)
![GitHub](https://img.shields.io/github/license/himasrafeek/butterCake.svg)
[![Releases](https://img.shields.io/github/release/himasrafeek/butterCake.svg)](#releases)
[![Website](https://img.shields.io/website/https/getbuttercake.com.svg)](#website)
![GitHub issues](https://img.shields.io/github/issues-raw/himasrafeek/butterCake.svg)

<img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

 Build responsive, mobile-first projects on the web 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.

<img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

### ***Butter Cake is constantly in development! Try it out now.***
<img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

## Documentation <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

Checkout the official website for the Documentation. [https://getbuttercake.com](https://getbuttercake.com/?ref=readme)


## Why You  should use - Butter Cake <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

 - ✈️ light weight 59kb (css) &amp; 4kb (js)
 - 🗃 Modular Components
 - 🏠 Simple Structure
 - 📜 Built Using Sass(SCSS)
 - 📲 Responsive

 > ***No need to setup development environment with Gulp etc... because Butter Cake uses [Prepros (FREE APP)](https://prepros.io/?ref=getbuttercake.com) to compile SASS(SCSS).***

Can start a new project within seconds 😻!!


## What's included <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

```
Butter Cake/
│
├── dist/
│    │
│    ├── css/
│    │   ├── butterCake.min.css (59kb)
│    │   └── butterCake.min.css.map (33kb)
│    │ 
│    └── js/
│        ├── butterCake.js (Non Minified) (9kb) - (Complete components Js)
│        ├── butterCake.min.js (Minified) (4kb) - (Complete components Js)
│        ├── alert.js 
│        ├── accordion.js 
│        ├── dropdown.js 
│        ├── modal.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)
```


## ***What's new in v2.5.0*** <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">
- Root Variables
- [Progress Bar](https://getbuttercake.com/docs/progress-bars/)
- [Tool Tip](https://getbuttercake.com/docs/tool-tips/)
- [Dissmisable Alerts](https://getbuttercake.com/docs/alerts/#alerts-Dismissable)
- [Badge Icons](https://getbuttercake.com/docs/badges/#badge-icons)
- [Custom Checkboxes and Radio Buttons](https://getbuttercake.com/docs/forms/#Custom-Checkbox)
- [Custom Modal Animations](https://getbuttercake.com/docs/modals/#modal-with-animate) with [Animate.css](https://daneden.github.io/animate.css/)

## ***What's improved in v2.5.0*** <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">
- [Navbar](https://getbuttercake.com/docs/navbars/)
- [Dropdown](https://getbuttercake.com/docs/dropdowns/)
- [Tabs](https://getbuttercake.com/docs/tabs/)
- [Modal](https://getbuttercake.com/docs/modals/)
- [Form Elements](https://getbuttercake.com/docs/forms/)
- [Badges](https://getbuttercake.com/docs/badges/)
- ETC.....

## ***Get Started*** <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">

#### NPM
```
npm i buttercake
```

#### CSS (jsdelivr)
```html
<!-- BUTTER CAKE CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@2.5.2/dist/css/butterCake.min.css">
```

#### JS (jsdelivr)
```html
<!-- BUTTER CAKE JS -->
<script src="https://cdn.jsdelivr.net/npm/buttercake@2.5.2/dist/js/butterCake.min.js"></script>
```


## Browser Support <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">
Butter Cake uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Butter Cake is compatible with recent versions of:

- Chrome
- Firefox
- Edge
- Safari
- Opera

Internet Explorer (10+) is only partially supported.



## Copyright and license <img src="https://getbuttercake.com/README/spacer.png" alt="Butter Cake logo" width="100%">
Code copyright 2018 - 2019 Himas Rafeek. Code released under the [MIT license](https://github.com/HimasRafeek/butterCake/blob/master/LICENSE).