GitPedia

ButterCake Legacy

Material Design Components, Responsive and Modern CSS Framework Built with Flexbox ๐Ÿฐ

From HimasRafeekยทUpdated May 9, 2026ยทView on GitHubยท

A Modern Lightweight Front End CSS framework for faster and easier web development. The project is written primarily in SCSS, distributed under the MIT License license, first published in 2018. Key topics include: butter-cake, css-flexbox, css-framework, css-grid, css3.

Latest release: 4.0.2โ€” Butter Cake v4.0.2
February 27, 2022View Changelog โ†’
<p align="center"> <a href="https://getbuttercake.com/?ref=readmeHeader"> <img src="https://getbuttercake.com/images/logo-white.png" alt="Butter Cake logo" width="150px"> </a> </p> <h3 align="center">Butter Cake</h3> <p align="center">v4.0.0</p> <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>

Status

Awesome Css
Jsdeliver
GitHub
Releases
Website
GitHub issues

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.

Get Started

NPM

html
npm i buttercake

CSS (jsdelivr)

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

JS (jsdelivr)

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

Documentation

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

Why You should use - Butter Cake

  • โœˆ๏ธ light weight
  • ๐Ÿ—ƒ Modular Components
  • ๐Ÿ  Simple Structure
  • ๐Ÿ“œ Built Using Sass(SCSS)
  • ๐Ÿ“ฒ Responsive

๐ŸŒ 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:

<img src="https://raw.githubusercontent.com/finnhvman/matter/master/docs/browsers.png" alt="Chrome, Firefox, Safari, Edge, Samsung Internet" width="520"><br/>

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Samsung Browser
  • Opera

Support the developement

<a href="https://www.patreon.com/bePatron?u=3868721"><img src="https://camo.githubusercontent.com/c11c9bdf1f6c2a1d80afb11859984a61f0fadfa6/68747470733a2f2f63352e70617472656f6e2e636f6d2f65787465726e616c2f6c6f676f2f6265636f6d655f615f706174726f6e5f627574746f6e4032782e706e67" width="200px"></a>

<a href="http://bit.ly/2qwDHFX"><img src="https://cdn.rawgit.com/twolfson/paypal-github-button/1.0.0/dist/button.svg" width="200px"></a>

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

Contributors

Showing top 5 contributors by commit count.

View all contributors on GitHub โ†’

This article is auto-generated from HimasRafeek/butterCake-Legacy via the GitHub API.Last fetched: 6/21/2026