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.
- Jquery
Download Butter Cake files, and include css and js file
<link rel="stylesheet" href="css/butterCake.css">
.................
<script src="js/butterCake.js"></script>
<div class="row">
<div class="col-md-6">
..........
</div>
<div class="col-md-6">
..........
</div>
</div>
- .row
- .col
- .col-md-x
- .col-lg-x
- .col-xl-x
- .container
- .container-fluid
- .d-none
- .d-block
- .d-inline
- .d-inline-block
- .d-flex or .flex
- .bg-primary
- .bg-dark
- .bg-light
- .bg-white
- .text-primary
- .text-dark
- .text-light
- .text-white
-
.btn-primary
-
.btn-secondary
-
.btn-success
-
.btn-warning
-
.btn-danger
-
.btn-dark
-
.btn-light
-
.btn-white
-
.rounded (rounded)
-
.outline (outline)
<!-- 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>
- 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))
- .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))
- .w-100 (width: 100%)
- .img-fluid
- .img-rounded
- .img-cirle
- .img-cover
- .img-contain
- .bg-cover
- .bg-fixed
- .list-unstyled
- .shadow
- .radius-none
- .border-none
- .border-top-none
- .border-bottom-none
- .border-left-none
- .border-right-none
- .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-left
- .float-right
- .clearfix
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
- .disabled
- disabled (attribute)
Butter Cake is built using SASS, Used Prepos to compile
Thank you!