Responsive Design

Responsive design in Codebase is accomplished by containers, flexbox, and grid systems controlled by media query breakpoint widths, and various utility classes breakpoints and/or CSS clamp.

Responsive Layouts

Layouts in Codebase follow the familiar responsive “from small screens up” design methodology. For controlling layouts on increasingly wider viewports, all the following are available:

• A series of containers are available for centered layouts with max-width constraints
• bleed inserts to enable to content to “burst out” wider than container columns
• Flexbox and CSS grid systems have three breakpoint width variants: sm (768px default' | url }}), md (1024px default' | url }}) and lg (1280px default' | url }})
• A seried of max-width wrappers and viewport-height based heights utilities
• Responsive floats and block positioning utilities
• Responsive y-axis spacing (margins and paddings' | url }}) using [CSS clamp(' | url }})](https://chipcullen.com/css-min-max-clamp-functions/' | url }})
• Responsive invisibility utilities
• Responsive offcanvas side panel components (powered by AlpineJS or the Codebase Activator' | url }})

Responsive Typography

Codebase typography is also responsive to viewport width (device size' | url }}):

• Headings <h1> to <h6> have a slight downsize for phones. Below 768px (default' | url }}), headings become 0.875em (87.5%' | url }}) their base size
• Large display text (using the .t-lg wrapper' | url }}) is 1.25em (125%' | url }}) the size of base headings for medium screens, and 1.5em (150%' | url }}) for large screens up
• Long read text starts as the normal size for small screens, and then base text and headings grow proportionately using [CSS clamp(' | url }})](https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/' | url }}) to a comfortable maximum. Use the .t-long-read wrapper for long read articles and blog posts
• Responsive text alignment utilities

Codebase Media Query Breakpoint Widths

There are three breakpoint widths in Codebase. These are used in CSS classes for responsive flex and grid layouts, floats, headings, display text, text alignments, offcanvas side panels and invisibility utilities.

// Small
$mq-sm: 768px !default;

// Medium
$mq-md: 1024px !default;

// Large
$mq-lg: 1280px !default;