Skip to main content

Foundation

We provide a neat <Foundation> utility component to setup a modern web app layout.

Example use in NextJS app Layout Component:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Foundation>
          {children}
        </Foundation>
      </body>
    </html>
  )
}

We describe its features next:

  • normalize
  • border box
  • fill body
  • provide flex root

Normalize​

Unifies the user agent style sheets (the browser default styles), so that they are consistent using modern-normalize. This allows you to test your code in one browser and be fairly confident that it will look the same in the other browsers 💜

Border Box​

Browsers can be confused about whether or not the border is a part of the width. We remove this confusion (provided as a part of modern-normalize) to provide a simple (and intutive) meaning of width = content+padding+border across all browsers 💚

borderbox

Fill body​

By default browsers come with a nasty margin around the body element. This means there is an aweful unmanaged background around your markup. You can remove this of course, and that is what we do. We also make the body 100% of the page so you get complete control of what is on screen 💙

Provide flex root​

We fill the entire body with a single div {display:flex}. This means you can start with flex=1 in your application and have complete access to the entire body ❤️