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
.