Responsive Modifiers & Color
- Responsive modifiers
- Color Utilities
- Light Greys
- Dark Greys
- Purples
- Blues
- Greens
- Yellows
- Reds
Responsive modifiers
Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes.
| Modifier | Screen size |
|---|
| (none) | All screens until the next modifier |
xs | 320px (20rem) and up |
sm | 500px (31.25rem) and up |
md | 740px (46.25rem) and up |
lg | 1120px (70rem) and up |
xl | 1400px (87.5rem) and up |
Color Utilities
All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
Light Greys
| Color value | Font color utility | Background color utility |
|---|
grey-lt-000 | .text-grey-lt-000 | .bg-grey-lt-000 |
grey-lt-100 | .text-grey-lt-100 | .bg-grey-lt-100 |
grey-lt-200 | .text-grey-lt-200 | .bg-grey-lt-200 |
grey-lt-300 | .text-grey-lt-300 | .bg-grey-lt-300 |
Dark Greys
| Color value | Font color utility | Background color utility |
|---|
grey-dk-000 | .text-grey-dk-000 | .bg-grey-dk-000 |
grey-dk-100 | .text-grey-dk-100 | .bg-grey-dk-100 |
grey-dk-200 | .text-grey-dk-200 | .bg-grey-dk-200 |
grey-dk-250 | .text-grey-dk-250 | .bg-grey-dk-250 |
grey-dk-300 | .text-grey-dk-300 | .bg-grey-dk-300 |
Purples
| Color value | Font color utility | Background color utility |
|---|
purple-000 | .text-purple-000 | .bg-purple-000 |
purple-100 | .text-purple-100 | .bg-purple-100 |
purple-200 | .text-purple-200 | .bg-purple-200 |
purple-300 | .text-purple-300 | .bg-purple-300 |
Blues
| Color value | Font color utility | Background color utility |
|---|
blue-000 | .text-blue-000 | .bg-blue-000 |
blue-100 | .text-blue-100 | .bg-blue-100 |
blue-200 | .text-blue-200 | .bg-blue-200 |
blue-300 | .text-blue-300 | .bg-blue-300 |
Greens
| Color value | Font color utility | Background color utility |
|---|
green-000 | .text-green-000 | .bg-green-000 |
green-100 | .text-green-100 | .bg-green-100 |
green-200 | .text-green-200 | .bg-green-200 |
green-300 | .text-green-300 | .bg-green-300 |
Yellows
| Color value | Font color utility | Background color utility |
|---|
yellow-000 | .text-yellow-000 | .bg-yellow-000 |
yellow-100 | .text-yellow-100 | .bg-yellow-100 |
yellow-200 | .text-yellow-200 | .bg-yellow-200 |
yellow-300 | .text-yellow-300 | .bg-yellow-300 |
Reds
| Color value | Font color utility | Background color utility |
|---|
red-000 | .text-red-000 | .bg-red-000 |
red-100 | .text-red-100 | .bg-red-100 |
red-200 | .text-red-200 | .bg-red-200 |
red-300 | .text-red-300 | .bg-red-300 |