Skip to main content

Codebase 6 Layouts

Blocks

  • block — make an inline element behave as a block element.
  • inline-block — to enable block-like settings on an inline element (width, height, margins, paddings)
  • inline-flex, flex — see flexbox layouts
  • grid — see grid layouts

Each of these can receive a “T-shirt size” prefix with a colon (4 tiers available: xs: / sm: / md: / lg:) that sets the media query width at which the block styling takes effect. See responsive layouts.

Dimensions

Containers

Codebase container classes add a constrained layout width, inline margin (x-axis) auto centering, and side edge whitespace when the viewport width is at or narrower then the container width.

Container right- and left-side (“x-axis”) spacing is supplied when the viewport width is less than the variable maximum width, --w-max. This adds some negative space (commonly known as whitespace, though it is not always white) eitherside of the container, to prevent any text being difficult to read when up against the sides of the viewport.

There are several container utilities, with maximum widths same as the width utilities (see below).

Widths

256px intervals. w- classes will have widths 100% until their max width. container- classes will have widths (100% minus side space) until their --w-max.

The difference between width utilities and container utilities is that containers have x-axis side padding and x-axis centering (see above).

  • w-xxs — maximum width 256px
  • container-xs / w-xs — maximum width 512px
  • container-sm / w-sm — maximum width 768px
  • container-content / w-content — maximum width 66ch
  • container-md / w-md — maximum width 1024px
  • container-lg / w-lg — maximum width 1280px
  • container-xl / w-xl — maximum width 1536px
  • container / container-xxl / w-xxl — maximum width 1792px

Four more:

  • w-100% — width expands to 100% of available space
  • w-100vw — width expands to 100vw (percentage of viewport width)
  • w-max-100vw — width is constrained to 100vw; use this to prevent horizontal scrolling
  • w-fit-content — width is constrained to the max-width of its content (used for “shrink wrapping”)

Heights

  • h-100% — height expands to 100%, e.g. for making cards equal to the height of their container
  • h-100dvh — height expands to 100dvh, e.g. for making “full cover” panels
  • h-max-100dvh — height is constrained to 100dvh, e.g. for tall sidebars (use this in conjunction with overflow-y)

Codebase uses 100dvh (percentage dynamic viewport height) that gives a different viewport height for some devices — it compensates for the retracting interface toolbars on iOS Safari.

Box

  • box — expands an inner element using position: absolute; inset: 0; to fill the size of its container (use in conjunction with relative positioning on the parent element of a box). This is useful for setting up a panel (e.g. hero or card) image layer with text overlay layer.

Positions

  • relative
  • absolute
  • sticky
  • top — top: 0
  • right — right: 0
  • bottom — bottom: 0
  • left — left: 0
  • place-center — place-self: center
  • z-1 — z-index: 1 — e.g. use low value z-indices for layering in hero components
  • z-2 — z-index: 2
  • z-3 — z-index: 3
  • z-997 — z-index: 997 — e.g. use high value z-indexed for layering in modals and fixed or sticky menubars
  • z-998 — z-index: 998
  • z-999 — z-index: 999

Example:

Top
Right
Bottom
Left
Centered
and middled
<div class="relative">

  <div class="absolute top">
    Top
  </div>

  <div class="absolute right">
    Right
  </div>

  <div class="absolute bottom">
    Bottom
  </div>

  <div class="absolute left">
    Left
  </div>

  <div class="box place-center">
    Centered and middled
  </div>

</div>

Responsive layouts

There are four media query @media variants for various Codebase classes, corresponding to the following colon-separated prefix widths:

  1. [No media query prefix] takes effect at all viewport widths
  2. xs:* takes effect at 512px viewport width and above
  3. sm:* takes effect at 768px viewport width and above
  4. md:* takes effect at 1024px viewport width and above
  5. lg:* takes effect at 1280px viewport width and above

Classes with responsive query variants are:

  1. t-left, t-center, t-right — text alignment utilities
  2. block, inline-block — block container utilities
  3. flex, inline-flex, and all flex- modifiers — flexbox utilities
  4. grid, and all col- and row- modifiers — grid system utilities (using CSS Grid)
  5. hidden — invisibility utilities

Both flexbox and grid share the same optional gap classes. gap-3 and gap-4 have a responsive size increase for larger viewports, using a clamp() ramp. See decoration: spacing for more information.

Responsive blocks and inline-blocks

block and inline-block have (base), xs:, sm:, md: and lg: variants.

Use one of the container-responsive breakpoint width variants as an override when you only need some element to behave as a flex or a grid within a smaller width but not at or above a larger width.

Docs