_toolbox.less includes a set of useful tools that you can use on most cases
| Tool | Property | Function |
|---|---|---|
.float-left |
float: left; | Floats elements to the left |
.float-right |
float: right; | Floats elements to the right |
.float-none |
float: none; | Remove floats |
.clear |
clear: none; | Cleans both sides, making a separation from content |
.overflow |
overflow: hidden; | Wrap elements and givethem layout (better use .clearfix) |
.clearfix |
* | Wrap elements and give them layout |
<div class="clearfix">
<div class="float-left" >...</div>
<div class="float-right">...</div>
</div>
| Tool | Property | Function |
|---|---|---|
.hide |
display: none; | Hides the element |
.show |
display: block; | Shows the element |
.relative |
position: relative; | Use it as wrapper for absolute positioning |
| Tool | Property | Function |
|---|---|---|
.no-top |
margin-top: 0; | Removes the top margin of an element |
.no-bottom |
margin-bottom: 0; | Removes the bottom margin of an element |
| Tool | Property | Function |
|---|---|---|
.fit-width |
width: 100%; | Forces the width to all the container |
| Tool | Property | Function |
|---|---|---|
.align-left |
text-align: left; | Aligns the text on left |
.align-center |
text-align: center; | Centers the text |
.align-right |
text-align: right; | Aligns the text on right |
.align-top |
text-align: top; | Aligns the text on top |
.align-middle |
text-align: middle; | Centers on the middle |
.align-bottom |
text-align: bottom; | Aligns the text on bottom |
.uppercase |
text-transform: uppercase; | Set text to uppercase |
.lowercase |
text-transform: lowercase; | Set text to lowercase |
.normalcase |
text-transform: normalcase; | Set text back to normal |
.single-line |
white-space: nowrap; | Forces text to avoid line breaks |
.text-overflow |
* | Cuts every word logner than the desired width and adds an ellipsis |
| Tool | Property | Function |
|---|---|---|
.sr-only |
* | Hides the element, only will display on a screen reader |
.sr-only-focusable |
* | use with .sr-only, Shows the element only when focused |