UI guidelines for component’s output
You are not required to use these style guidelines, but if you want your component to fit the overall style of Fliplet’s components we recommend you use them.
We always include Bootstrap, as the framework to build responsive interfaces, as a dependency in our component’s, but you are not required to do the same, it’s optional. (Learn more about dependencies here)
Basic styles
Our component’s output use the following basic styles:
Primary color: #337ab7
Secondary color: #d2d2d2
Text: #333333
Buttons
We use Bootstrap’s button classes but we tweak the styles to make them look our own.
Primary button
Primary button classes: .btn.btn-primary
We use some CSS to make the buttons look a bit different from Bootstrap’s ones:
.btn-primary {
display: block;
clear: both;
width: 100%;
padding: 10px 16px;
font-size: 18px;
line-height: 24px;
border: none;
text-align: center;
cursor: pointer;
border-radius: 6px;
white-space: initial;
}
.btn-primary:focus,
.btn-primary:hover,
.btn:active:focus {
outline: none;
}
@media (min-width:640px) {
.btn-primary {
clear: none;
display: inline-block;
width: auto;
max-width: 100%;
}
}
Secondary button
Secondary button classes: .btn.btn-secondary
We use some CSS to make the buttons look a bit different from Bootstrap’s ones:
.btn-secondary {
display: block;
clear: both;
width: 100%;
padding: 10px 16px;
font-size: 18px;
line-height: 24px;
border: none;
border-radius: 6px;
text-align: center;
cursor: pointer;
background-color: #c0c0c0;
white-space: initial;
}
.btn-secondary:focus,
.btn-secondary:hover,
.btn:active:focus {
outline: none;
}
@media (min-width:640px) {
.btn-secondary {
clear: none;
display: inline-block;
width: auto;
max-width: 100%;
}
}
Link text button
Link text button classes: .btn.btn-link
a,
.btn.btn-link {
color: #337ab7;
text-decoration: none;
}
Loading animation
If you need to use a loading animation in you component’s output here is how you can achieve it:
<!-- Hidden loading animation -->
<div class="spinner-holder">
<div class="spinner-overlay">Loading...</div>
</div>
<!-- Show loading animation -->
<div class="spinner-holder animated">
<div class="spinner-overlay">Loading...</div>
</div>
Use the following CSS to make it look like ours:
.spinner-holder {
overflow: hidden;
}
.spinner-overlay {
display: none;
}
.spinner-holder.animated .spinner-overlay {
display: block;
}
.spinner-overlay,
.spinner-overlay:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.spinner-overlay {
margin: 2px auto;
font-size: 2px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(138, 138, 138, 0.2);
border-right: 1.1em solid rgba(138, 138, 138, 0.2);
border-bottom: 1.1em solid rgba(138, 138, 138, 0.2);
border-left: 1.1em solid #337ab7; /* color of the rotating section */
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: loadRotate 1.1s infinite linear;
animation: loadRotate 1.1s infinite linear;
}
We use the following custom animation to make it spin:
@-webkit-keyframes loadRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Tables
Large tables can sometimes create unexpected behaviors in your apps across different screen sizes. Tables could be considered large if there are too many columns or column(s) that include large amounts of content.
In Fliplet, tables can be displayed in 3 display types: Responsive, Scrollable and Hybrid.
Small tables | Large tables | |
---|---|---|
Responsive | Occupies 100% of container width | Visible beyond the container |
Scrollable | Occupy as much of the container width as necessary | Scrollable horizontally |
Hybrid | Occupies 100% of container width | Scrollable horizontally |
Regardless of the table display type, column widths are automatically adjusted depending on the content.
By default, all tables are displayed in the Responsive display type.
Scrollable tables
To use tables in the Scrollable display type, use .table-scrollable
or .table-*-scrollable
on each <table></table>
element as outlined below depending on the amount of content in the table.
Extra-small devices Phones (<640px) |
Small devices Tablets (≥640px) |
Medium devices Tablets/Desktops (≥992px) |
Large devices Tablets/Desktops (≥1200px) |
|
---|---|---|---|---|
.table-scrollable |
Scrollable | Scrollable | Scrollable | Scrollable |
.table-md-scrollable |
Scrollable | Scrollable | Scrollable | Responsive |
.table-sm-scrollable |
Scrollable | Scrollable | Responsive | Responsive |
.table-xs-scrollable |
Scrollable | Responsive | Responsive | Responsive |
For example:
<table class="table-scrollable">
[...]
</table>
Hybrid tables
To use tables in the Hybrid display type, add a <div class="table-hybrid-container"></div>
around the table.
For example:
<div class="table-hybrid-container">
<table>
[...]
</table>
</div>