Welcome to our page. Use our framework is simple as it looks. Make it easy provides a minimal setup of styles for a fast and clean starting point. Use classes from our examples to create your website.
Buttons
To use this button you should use the class: btn-1
To use this button you should use the class: btn-2
To use this button you should use the class: btn-3
Cards
A card is a flexible and extensible content container. It includes options for text, title, image position.
![](http://mirrors.ctan.org/macros/latex/contrib/incgraph/example.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
![](http://mirrors.ctan.org/macros/latex/contrib/incgraph/example.jpg)
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example of cards classes:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Pagination
Navigation bars
Modal
A modal is a dialog box window that is displayed when click the button.
Hi!
This is modal example.
Hi!
This is modal example.
Progress bars
Loading progress bar can be used to show how far along a user is in a process.
Bar1Example:
Spinners
Spinners can be used to show the loading state in your projects.
Example:
Breakpoints
All utilities below can be responsive. This framework includes three breakpoints: small (<600px), medium (600-800px) and large for default (>800px).
Flex classes
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
For small screen use class d-sm-flex. For large screen use class d-md-flex.
For small screen use class d-sm-inline-flex. For large screen use class d-md-inline-flex.
Flex direction
For the horizontal direction of flex items use fl-row (for small screen fl-sm-row and for large use fl-md-row):
For the horizontal-reverse direction of flex items use fl-row-rev (for small screen fl-sm-row-rev and for large use fl-md-row-rev):
For the vertical direction of flex items use fl-col (for small screen fl-sm-col and for large use fl-md-col). For reverse option add -rev:
Justify content
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly. For small and large screens add sm or md, for example .just-sm-start, .just-md-start. This exists with all justify-content options below.
Align items
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, or baseline. For small and large screens add sm or md, for example .al-sm-start, .al-md-start. This exists with all align-items options below.
Align self
Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline. For small and large screens add sm or md, for example .als-sm-start, .als-md-start. This exists with all align-self options below.
Flex grow
Use .grow-1,.grow-2,.grow-3 utilities to toggle a flex item’s ability to grow to fill available space (and .sm-grow-1, .sm-grow-2,.sm-grow-3 or .md-grow-1, .md-grow-2,.md-grow-3). In the example below, all elements use equally space with grow-1 parameter.
Box in the middle has parameter .grow-3, while others have parameter .grow-1:
Flex wrap
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .fl-nowrap, wrapping with .fl-wrap. (for small screens use .fl-sm-nowrap, .fl-sm-wrap, for large screens use .fl-md-nowrap, .fl-md-wrap,
Example for .fl-wrap:
Change the items order. Order takes any integer value from 0 to 2. Default order is 0. In example, we reverse order with .order0, .order1, .order2 classes. For small screens use .sm-order*, for large screens use .md-order* (* - 0, 1, 2)
Colors for background
Use background utility classes to change the appearance of box.
Available options for small and large screens - .c-*-night, .c-*-day, .c-*-sun, .c-*-nature (* - sm or md)
Borders
Use border utilities to quickly style the border and border color of an element.
Available options for small and large screens - .b-*-none, .b-*-dot, .b-*-grey, .b-*-big (* - sm or md).
Display
Quickly and responsively toggle the display value of components and more with our display utilities.
Display:flex and display:inline examples are above. Other commonly used value is display:none to hide and show elements without deleting and recreating them. We create three elements, second element has class .d-none(available and .d-sm-none and .d-md-none):
Opacity
The opacity property sets the opacity level for an element.
The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent. Available options for small and large screens - .op-*-20, .op-*-50, .op-*-100 (* - sm or md)
Shadow
You can add shadow to element: .sh-none - none shadow, .sh-medium - medium shadow and .sh-big - wide shadow (available and .sh-*-none,.sh-*-medium, .sh-*-big (* - sm or md).
Padding
Padding is used to create space around an element's content, inside of any defined borders.
.p-none - none padding at all
.pl-5 - 5px padding from left
.p-10 - 10px padding from all sides
.pt-5 - 5px padding from top
.pt-10 - 10px padding from top
Available small and large screens versions: .p-*-none, .pl-*-5, .p-*-10, .pt-*-5, .pt-*-10 (* - sm or md).
Margin
Margins are used to create space around elements, outside of any defined borders.
.m-none - none margin at all
.m-auto - margin auto - centered
.m-10 - 10px margin from all sides
.mt-5 - 5px margin from top
.ml-10 - 10px margin from left
Available small and large screens versions: .m-*-none, .m-*-auto, .m-*-10, .mt-*-5, .ml-*-10 (* - sm or md).