/butterCake

Butter Cake is buttery smooth modern CSS Framework, for developing responsive, mobile first websites.

Primary LanguageCSSMIT LicenseMIT

Butter Cake is an open source CSS framework based on Flexbox, Giving Developer's Flexibility & less Classes to create components and included 100+ helper Classes to get the task done easily without writing too many lines of css.

Requirements

  • Jquery

Usages

Download Butter Cake files, and include css and js file

<link rel="stylesheet" href="css/butterCake.css">

.................

<script src="js/butterCake.js"></script>

Grid

<div class="row"> 
  
  <div class="col-md-6">
  ..........
  </div>
  
  <div class="col-md-6">
  ..........
  </div>
  
</div>

Grid - Classes

  • .row
  • .col
  • .col-md-x
  • .col-lg-x
  • .col-xl-x

Utilities - Helper Classes

Wrappers
  • .container
  • .container-fluid
Display Property
  • .d-none
  • .d-block
  • .d-inline
  • .d-inline-block
  • .d-flex or .flex
Background Color
  • .bg-primary
  • .bg-dark
  • .bg-light
  • .bg-white
Text Color
  • .text-primary
  • .text-dark
  • .text-light
  • .text-white
Button

  • .btn-primary

  • .btn-secondary

  • .btn-success

  • .btn-warning

  • .btn-danger

  • .btn-dark

  • .btn-light

  • .btn-white

  • .rounded (rounded)

  • .outline (outline)

SAMPLE BUTTONS USAGE

<!-- REGULAR BUTTONS -->
            <div class="container-fluid py-1">
                <a class="btn-primary" href="#!">button</a>
            </div>

            <!-- ROUNDED BUTTONS -->
            <div class="container-fluid py-1">
                <a class="btn-primary rounded" href="#!">button</a>
            </div>

            <!-- OUTLINE BUTTONS -->
            <div class="container-fluid py-1">
                <a class="btn-primary outline" href="#!">button</a>
             </div>

Padding
  • p-0 to 10 ( 0 - 100px (xy))
  • pt-0 to 10 ( 0 - 100px (padding top))
  • pb-0 to 10 ( 0 - 100px (padding bottom))
  • pl-0 to 10 ( 0 - 100px (padding left))
  • pr-0 to 10 ( 0 - 100px (padding right))

Margin
  • .mx-auto ( margin: 0 auto)
  • .ml-auto ( margin-left: auto)
  • .mr-auto ( margin-right: auto)
  • .m-0 to 10 ( 0 - 100px (xy))
  • .mt-0 to 10 ( 0 - 100px (margin top))
  • .mb-0 to 10 ( 0 - 100px (margin bottom))
  • .ml-0 to 10 ( 0 - 100px (margin left))
  • .mr-0 to 10 ( 0 - 100px (margin right))

Width
  • .w-100 (width: 100%)
Normal Image
  • .img-fluid
  • .img-rounded
  • .img-cirle
  • .img-cover
  • .img-contain
Background Image
  • .bg-cover
  • .bg-fixed
List
  • .list-unstyled
Shadow
  • .shadow
Border Radius
  • .radius-none
Border
  • .border-none
  • .border-top-none
  • .border-bottom-none
  • .border-left-none
  • .border-right-none
Font
  • .text-center
  • .text-left
  • .text-right
  • .capitalize
  • .uppercase
  • .lowercase

Font Weight

  • .font-normal
  • .font-bold
  • .weight-100 to .weight-900

Font Sizes

  • .display-1
  • .display-2
  • .display-3
  • .display-4
Float
  • .float-left
  • .float-right
  • .clearfix
Flexbox

Jusitify

  • .flex-justify-start
  • .flex-justify-center
  • .flex-justify-end
  • .flex-justify-between
  • .flex-justify-around
  • .flex-justify-evenly
  • .flex-justify-baseline

Align

  • .flex-align-start
  • .flex-align-center
  • .flex-align-end
  • .flex-align-stretch

Flex align center - Vertically & Horizontally

  • .flex-center-center

Flex Direction

  • .flex-column
  • .flex-row
Disable
  • .disabled
  • disabled (attribute)

PREVIEW FRAMEWORK

Butter Cake is built using SASS, Used Prepos to compile

ko-fi

Supporters Name Will Be Included.
I will spend most of my time improving the ButterCake core and its documentation.

Thank you!