diff --git a/_src/layout.md b/_src/layout.md index 6ddcb24..8ed7d0f 100644 --- a/_src/layout.md +++ b/_src/layout.md @@ -158,9 +158,11 @@ You can place the `container` class on e.g.: * Nested within other `container` elements (e.g. so you can have sidebars or arrays of cards within your `
`) * And more. -_What if you want to use Baselayer’s `flex`, `grid` and `hidden` clases but you really prefer media queries, or if you need to support pre-container query browsers?_ +### Supporting older browsers -Then you can find every instance of `@container` in `layout.css` and replace it with `@media`, and this will convert everything to media queries. (And then the `container` class will be redundant — you won't need it.) +What if you want to use Baselayer’s `flex`, `grid` and `hidden` clases but you really prefer media queries, or if you need to support pre-container query browsers? + +Then all you need to do is find every instance of `@container` in `layout.css` and replace it with `@media`, and this will convert everything to media queries. (And then the `container` class will be redundant — you won’t need it.) ### Container query demos diff --git a/docs/layout/index.html b/docs/layout/index.html index 3490448..761ec4d 100644 --- a/docs/layout/index.html +++ b/docs/layout/index.html @@ -309,7 +309,7 @@

Layout

Contents

@@ -434,8 +434,9 @@

Container query powered l
  • Nested within other container elements (e.g. so you can have sidebars or arrays of cards within your <main>)
  • And more.
    • -

    What if you want to use Baselayer’s flex, grid and hidden clases but you really prefer media queries, or if you need to support pre-container query browsers?

    -

    Then you can find every instance of @container in layout.css and replace it with @media, and this will convert everything to media queries. (And then the container class will be redundant — you won't need it.)

    +

    Supporting older browsers

    +

    What if you want to use Baselayer’s flex, grid and hidden clases but you really prefer media queries, or if you need to support pre-container query browsers?

    +

    Then all you need to do is find every instance of @container in layout.css and replace it with @media, and this will convert everything to media queries. (And then the container class will be redundant — you won’t need it.)

    Container query demos

    This entire documentation template is built using a full-width container query powered grid that takes effect when the viewport is at or above Baselayer’s md container query breakpoint (default ≥ 960px). Above md, the top navigation bar becomes the sidebar in column 1, with everything else in column 2.

    The “everything else” area is organized in another grid within the same container context as the outer grid above, that becomes a two column grid when that container’s width is at lg or above (≥ 1280px). Then the table of contents (TOC) block is placed in column 2 of this inner grid (that appear to be the third column in the overall page layout).