Welcome to the Junior Dev Struggle Bus Website
This is a Struggle Bus community driven project
Log issues, make pull requests. Let's build something that benefits the community as a whole, whether that's provide educational resources, a feeling of community involvement, or some new portfolio pieces.
Happy Hacking :-)
This project was bootstrapped with Create React App.
Style Guide
Colors
| Color (variable name) |
Hex |
RGB |
| --primary-color (pink) |
#E45064 |
rgb(228, 80, 100) |
| --black |
#404040 |
rgb(64, 64, 64) |
| --white |
#FFFFFF |
rgb(255, 255, 255) |
| --background-color (off-white) |
#F4F4F4 |
rgb(244, 244, 244) |
Font Families
| Text Elements |
Default Family |
Fallbacks |
| Headings |
Ubuntu |
serif |
| All other text elements |
Ubuntu Mono |
monospace |
Ubuntu and Ubuntu Mono are availbale at fonts.google.com
Font Sizes
| Font Size (variable name) |
Desktop + Tablet |
| --font-size-sm |
0.75rem (12px) |
| --font-size-md |
1rem (16px) |
| --font-size-lg |
1.25rem (20px) |
| --title-1 |
1.5rem (24px) |
| --title-2 |
2rem (32px) |
| --title-3 |
2.5rem (40px) |
| --title-4 |
3rem (48px) |
| --title-5 |
4rem (64px) |
Breakpoints
| Breakpoint (variable name) |
Value (pixels) |
| --breakpoint-sm |
576px |
| --breakpoint-md |
768px |
| --breakpoint-lg |
992px |
| --breakpoint-xl |
1200px |
Spacing (margin and padding values)
| Space (variable name) |
Value (rems/pixels) |
| --space-xxs |
.5rem (8px) |
| --space-xs |
1rem (16px) |
| --space-sm |
1.5rem (24px) |
| --space-md |
2rem (32px) |
| --space-lg |
3rem (48px) |
| --space-xl |
4rem (64px) |
| --space-xxl |
6rem (96px) |