Responsive design

Responsive design in Codebase is accomplished by containers, flexbox and grid layouts, and various utility classes all controlled by media query breakpoint widths, plus a few utilities controlled by CSS clamp().

Layouts

Layouts in Codebase follow the familiar responsive “from small screens up” design methodology. For controlling layouts on increasingly wider viewports, Codebase has several containers and max-width wrappers:

• Containers have a max-width that will be either 2rem less than 100%, or a set max width (in the defaults), thereby preventing legibility problems), and x-axis margin-auto-centering.
• Codebase also has max-width wrappers that simply have set max widths.

Widths and breakpoint tiers

Codebase has several layout widths built in, that are used in containers, max-width wrappers, offcanvas panel overrides, and several typographic styles.

These pre-set widths are in increments of 256px. Some are used in other web frameworks (e.g. Bootstrap), but in Codebase series is extended. You may also recognise some of these dimensions from Apple devices (e.g. the classic iPad has viewport size 1024px × 768px, and the 16 inch Macbook pro has viewport width 1792px).

Many of Codebase’s CSS utility classes have media query width variants. Four variants are available for each, indicated by a colon-separated prefix that indicates the media query width at which the utility style takes effect. Therefore, there five tiers are available:

Width suffix	Breakpoint tier prefix	Default width value
-xxs	—	256px
-xs	xs:	512px
-sm	sm:	768px
-md	md:	1024px
-lg	lg:	1280px
-xl	—	1536px
-xxl	—	1792px

Codebase CSS classes that have media query width variants:

1. Block utilities
2. Flexbox layouts
3. Grid layouts
4. Block positions
5. Floats
6. Spacing (margins and paddings) and borders
7. Invisibility utilities
8. Offcanvas panel components, powered by AlpineJS

There are also some and viewport-height based heights utilities

Typography

Codebase typography is also responsive to viewport width (device size):

• Headings <h1> to <h6> have a slight upsize for tablet devices and up. At 768px (same as sm: default), headings become ×1.125 their base size
• Utilities for making text bigger:
  • Heading sizes h1 to h6
  • t-lg wrapper to simply increase text size by ×1.25
  • t-display wrapper CSS clamp() ramp responsively increases text size by ×1.25 up to ×2 if viewport width allows
  • t-long-read wrapper CSS clamp() ramp responsively increases text size by ×1 up to ×1.25 if viewport width allows
• Responsive text alignment utilities

Infographic: Responsive CSS classes in Codebase