mintbean-css-overflow v1.0.1

MintBean - Build Your Own Bootstrap Hackathon

This is a project created within Mintbean's hackathon. The goal is to create a landing page and a css library.

Installation

npm install mintbean-css-flow --save

Import

After installation, you can import the CSS file into your project with this snippet

@import 'mintbean-css-overflow/css'

Flex-box shortcuts

Some easy shortcuts you can use with flexbox if you don't want to touch the css files

• .flex => display: flex;
• .j-center => justify-content: center;
• .j-start => justify-content: start;
• .j-end => *justify-content: flex-end;
• .j-between => justify-content: space-between;
• .j-around => justify-content: space-around;

• .j-evenly => justify-content: space-evenly;

• .i-start => align-items: flex-start;

• .i-end => align-items: flex-end;
• .i-center => align-items: center;
• .i-baseline => align-items: baseline;
• .i-stretch => align-items: stretch;

Cards

We've created a some sample cards for you to play with.

• .card-sm : represents a small card. The width and padding could be changed by adjusting the $padding-sm and $width-sm scss variables

• .card-md : represents a medium card. The width and padding could be changed by adjusting the $padding-md and $width-md scss variables

• .card-lg : represents a large card. The width and padding could be changed by adjusting the $padding-lg and $width-lg scss variables

• .profile-card : an out of the box profile card for your personal usage. The padding utlizeds the $padding-md. The margin uses the $margin-sm and the width uses the $width-sm. You can cutomize the colors by changing up the $primary, $secondary and $alternate variables.

** Upon hover

Contributors

• Chris DiPiero
• Khuong Le