Utility classes arre very useful to avoid the repition of the code. Bermuda provides several useful utility classes.
Utility Classes In Bermuda
Utility Classes For Text
| Classname | CSS Property |
|---|---|
| text-center | text-align: center |
| text-end | text-align: end |
| text-start | text-align: start |
| text-justify | text-align: justify; |
| text-highlight |
background-color: var(--secondary-color); border-radius: 2.5rem; font-weight: 600; padding: 0 0.5rem; |
| active |
font-weight: 700; color: var(--active-color); |
Utility Classes For Border-radius
| Classname | CSS Property |
|---|---|
| border-rounded-sm | border-radius: 0.5rem; |
| border-rounded-md | border-radius: 1rem; |
| border-rounded-lg | border-radius: 2rem; |
| border-rounded-full | border-radius: 50%; |
Utility Classes For dark, light background and Shadows.
| Classname | CSS Property |
|---|---|
| bg-dark |
background-color: var(--dark-color); color: var(--light-color); |
| bg-light |
background-color: var(--light-color); color: var(--dark-color); |
| shadow-sm | box-shadow: 0px 0px 3px 0px var(--shadow-color); |
| shadow-md | box-shadow: 0px 0px 9px 0px var(--shadow-color); |
| shadow-lg | box-shadow: var(--shadow-color) 0px 5px 15px; |
Utility Classes Positioning
| Classname | CSS Property |
|---|---|
| flex-center |
align-items: center; display: flex; justify-content: center; |
| center |
top: 50%; left: 50%; transform: translate(-50%, -50%); |
| center-x |
left: 50%; transform: translateX(-50%); |
| center-y |
top: 50%; transform: translateY(-50%); |