Oh-Flex Docs
Layout
8 Layout #Layout

Structure pages with headers, footers, asides and more.

Header and footer will always be at their respective locations (top and bottom) f-content will be rubbery and flex with the allowed space. It also is responsible for handling scrolling of the main content.

Source: _layout.scss, line 3
8.1 Side Menu Layout #Layout.aside-menu
Header
Content
Footer
<div f-layout f-layout-aside>
  <aside f-w-10>Menu 1</aside>
  <aside f-w-20>Menu 2</aside>
  <main>
    <header f-header>Header</header>
    <main f-content>Content</main>
    <footer f-footer>Footer</footer>
  </main>
</div>
Source: _layout.scss, line 137
8.2 Header Content Footer Layout #Layout.atypical
Header
Content
Footer
  <div f-layout>
    <header f-header>Header</header>
    <main f-content>Content</main>
    <footer f-footer>Footer</footer>
  </div>
Source: _layout.scss, line 30
8.3 Containing a View #Layout.site-contain

Oh-Flex offers 6 different widths to contain your content. When content is "contained", it will never be larger than the specified size, and will automatically center in the available space.

f-contain-700px
f-contain-800px
f-contain-900px
f-contain-1024px
f-contain-1080px
f-contain-1180px
Source: _layout.scss, line 221
8.4 Layout Only CSS #Layout.xtra

Only want the layout features of Oh-flex?

<link href="https://unpkg.com/oh-flex/lib/chunks/_layout.css" rel="stylesheet" />
Source: _layout.scss, line 328