Butter Cake - A lightweight Modern Css framework

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

Butter Cake

A Modern Lightweight Front End CSS framework for faster and easier web development.
Explore Butter Cake docs »

Report bug . Request feature . Examples

Status

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.

Butter Cake is constantly in development! Try it out now.

Documentation

Checkout the official website for the Documentation. https://getbuttercake.com

Why You should use - Butter Cake

• ✈️ light weight 59kb (css) & 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) to compile SASS(SCSS).

Can start a new project within seconds 😻!!

What's included

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

• Root Variables
• Progress Bar
• Tool Tip
• Dissmisable Alerts
• Badge Icons
• Custom Checkboxes and Radio Buttons
• Custom Modal Animations with Animate.css

What's improved in v2.5.0

• Navbar
• Dropdown
• Tabs
• Modal
• Form Elements
• Badges
• ETC.....

Get Started

NPM

npm i buttercake

CSS (jsdelivr)

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

JS (jsdelivr)

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

Browser Support

Butter Cake uses 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

Code copyright 2018 - 2019 Himas Rafeek. Code released under the MIT license.