Meet Castos Sign In 14-Day Free Trial
Who we are
What we stand for️Our PurposeOur VisionOur MissionOur ValuesDesign System
Design PrinciplesColorsTypographyImagesContent Guide
What is a Content GuideWriting goals and principlesTips for writing at CastosComponent Library
About our ComponentsButtonLogos & Assets
CastosCastos ProductionsCastos AcademyAudience Podcast3 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.