This boostrap is using https://github.com/Wolox/equalizer reset the default styles of the browser and contains these sources to generalize classes of flex-box, margins and width.
| Source | Class | Equals |
|---|---|---|
| components.scss | full-width | width: 100% |
| half-width | width: 50% |
|
| quarter-width | width: 25% |
|
| margins.scss | scale: 10px | |
| m-top-x | margin-top: {x * scale}px |
|
| m-right-x | margin-right: {x * scale}px |
|
| m-bottom-x | margin-bottom: {x * scale}px |
|
| m-left-x | margin-left: {x * scale}px |
|
| layout.scss | ||
| column | display: flex flex-direction: column |
|
| column top | justify-content: flex-start |
|
| column middle | justify-content: center |
|
| column bottom | justify-content: flex-end |
|
| colum start | align-items: flex-start |
|
| colum center | align-items: center |
|
| colum end | align-items: end |
|
| colum stretch | align-items: stretch |
|
| column self-start | align-self: flex-start |
|
| column self-center | align-self: center |
|
| column self-end | align-self: flex-end |
|
| row | display: flex flex-direction: row |
|
| row top | align-items: flex-start |
|
| row middle | align-items: center |
|
| row bottom | align-items: flex-end |
|
| row start | justify-content: flex-start |
|
| row center | justify-content: center |
|
| row end | justify-content: flex-end |
|
| row wrap | flex-wrap: wrap |
|
| row reverse | flex-direction: row-reverse |
|
| row self-top | align-self: flex-start |
|
| row self-middle | align-self: center |
|
| row self-bottom | align-self: flex-end |
|
| row self-stretch | align-self: self-stretch |
|
| space-between | justify-content: space-between |
|
| space-around | justify-content: space-around |
Use it in this way:
<div className="row center middle full-width">
<Input
name={fieldName}
type="text"
className={`row center m-top-2 ${styles.input}`}
/>
</div>className="row center middle full-width"
// Is equal to this:{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}