πŸ““

Responsive Design

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
⚑
Meet Castos β†’

Β© 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 is 14px.
  • Breakpoints larger than 640px, font size is 16px.
  • Responsive Design
  • Breakpoints
  • Container
  • Sizing elements