Meet Castos Sign In 14-Day Free Trial
Who we are
What we stand for️
Our Purpose
Our Vision
Our Mission
Our Values
Design System
Design Principles
Colors
Typography
Images
Content Guide
What is a Content Guide
Writing goals and principles
Tips for writing at Castos
Component Library
About our Components
Button
Logos & Assets
Castos
Castos Productions
Castos Academy
Audience Podcast
3 Clips Podcast
© Castos 2022 – v0.4
Responsive Design
How we make our pages responsive.
Breakpoints
We use Tailwind’s breakpoints and follow a mobile-first approach.
Breakpoint prefix | Minimum width | CSS |
sm | 640px | @media (min-width: 640px) { ... } |
md | 768px | @media (min-width: 768px) { ... } |
lg | 1024px | @media (min-width: 1024px) { ... } |
xl | 1280px | @media (min-width: 1280px) { ... } |
Our largest breakpoint is 1280px.
Container
Use the custom-container class to center the main section of a page and add 16px of horizontal padding. It sets the max-width of an element to match the min-width of the current breakpoint.
Sizing elements
Fonts should be two sizes bigger when the sm breakpoint is reached. For example:
- Breakpoints smaller than
640px, font size is14px. - Breakpoints larger than
640px, font size is16px.