Responsive Mobile-first jQuery/CSS Framework - Butter Cake

Butter Cake

v2.5.5

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.

Get Started

NPM

npm i buttercake

CSS (jsdelivr)

<!-- BUTTER CAKE CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/butterCake.min.css">

JS (jsdelivr)

<!-- BUTTER CAKE JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/butterCake.min.js"></script>

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 (98kb) │    │   └── butterCake.min.css.map (52kb) │    │  │    └── js/ │        ├── butterCake.js (Non Minified) (9kb) - (Complete components Js) │        ├── butterCake.min.js (Minified) (5kb) - (Complete components Js) │        ├── alert.js  │        ├── accordion.js  │        ├── dropdown.js  │        ├── modal.js  │        ├── chips.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.5

Chips New Component - 😃 NEW
Inputs addons (icons) - NEW
Form Switches (Checkboxes) - NEW
File picker button - NEW
Button with loader - NEW
Bigger Dropdown menu - NEW

What's improved in v2.5.5

Forms elements - Improved
Tooltips - Improved
Badges - Improved
Table - Improved
Alerts - Improved
Cards - Improved
Modal - Improved

Dropdown More Styles added
Navbar More Styles added
Breadcrumb More Styles added
Buttons More Styles added
ETC.....

Responsive Classes Added

.d-none-{ sm | md | lg | xl  } .hide-{ sm | md | lg | xl  } .d-block-{ sm | md | lg | xl  } .d-inline-block-{ sm | md | lg | xl  } .d-flex-{ sm | md | lg | xl  } .fa-center-{ sm | md | lg | xl  } .fa-baseline-{ sm | md | lg | xl  } .fa-start-{ sm | md | lg | xl  } .fa-end-{ sm | md | lg | xl  } .fa-stretch-{ sm | md | lg | xl  } .fa-end-{ sm | md | lg | xl  } .fj-center-{ sm | md | lg | xl  } .fj-baseline-{ sm | md | lg | xl  } .fj-start-{ sm | md | lg | xl  } .fj-end-{ sm | md | lg | xl  } .fj-between-{ sm | md | lg | xl  } .fj-around-{ sm | md | lg | xl  } .order-{ sm | md | lg | xl  }-{1 - 10}

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