Flexy is a minimal css framework based on flex-box module. Period.

Before we start, we must khow, What is Flex-box?
Well, we all know about Responsive Web Design. Responsiveness means the layout and components of a website should be displayed in a reasonable way according to each size of screen. The popular way to do that is dividing the total width of the screen in a few columns. We call it grid system. Most of the popular design framework use this kind of grid system. It's not bad actually. But, there is more efficient way to make a responsible website. Here comes Flex.

Flex is one of the newest module of CSS. It allows us to distribute and display the contents in totally a new convention. If you want to know more about flex-box module, you can visit here.
Flexy therefore, is a very simple and minimal solution for designing a website with flex module. Let's dive into it!

Flexy has a 12 columns grid system like other frameworks for 6 differnt screen sizes:

• Extra small: col-xs-
• Small: col-sm-
• Medium: col-md-
• Large: col-lg-
• Extra large: col-xl-
• Extra extra large: col-xxl-

* You will see the columns according to your screen size. For extra small screens (<576px), all columns have 100% width.

There are two of container classes in the framework. Those are:

• container: This class is for full width container.
• fixed-container: This one is used for a fixed width container of maximum width 1366px.

We created a bunch of helper class to make your job easy. The class names are pretty self-explanatory.

Flex Directions

• flex-column
• flex-row
• flex-column-reverse
• flex-row-reverse

Justify Content

• justify-left or start
• justify-right or end
• justify-center
• space-arround
• space-between
• even

Align Items

• align-start
• align-middle
• align-end
• stretch
• baseline

Align Content

• content-start
• content-center
• content-end
• content-stretch
• content-space-around
• content-space-between

Align Self

• self-start
• self-center
• self-end
• self-stretch
• self-baseline
• self-auto

Paddings

We've created 7 types of padding class with 5, 10, 15, 20, 25, 30, 40, 50 and 100 pixels. The classes look like following:

• padding- : Ex: padding-5
• padding-top- : Ex: padding-top-5
• padding-bottom- : Ex: padding-bottom-5
• padding-left- : Ex: padding-left-5
• padding-right- : Ex: padding-right-5
• padding-left-right- : Ex: padding-left-right-5
• padding-top-bottom- : Ex: padding-top-bottom-5

Typography

• txt-center
• txt-justify
• txt-left
• txt-right
• upprecase
• lowercase
• capitalize
• smallcaps