Template

Blueprint semantically a page or elements in a page.
oo-templateoo-area

The component is included by default but requires you to pass your own design plan to the areas property. Use a responsive map to modify the layout between screens sizes.

//default config
template: (
  areas: (),
),

Repeat the areas' name to set the proportional size between each location.

$ooLoop: ooSet('template.areas', (
  rt: (
    "header"
    "main"
    "sidebar"
    "footer"
  ),
  sm: (
    "header header header header"// full width
    "main main main sidebar"     // main 3/4 & sidebar 1/4
    "footer footer footer footer"// full width
  ),
));

<section oo-template>
  <header oo-area="header">Header</header>
  <main oo-area="main">Main</main>
  <aside oo-area="sidebar">Sidebar</aside>
  <footer oo-area="footer">Footer</footer>
</section>

# Sized Column

The template is fluid and relies on the propotional percentage by default. By using the pipe | character after the area name, you can set the value of the column where the area is, Not the area itself.

$ooLoop: ooSet('template.areas', (
  rt: (
    "logo"
    "nav"
    "main"
    "sidebar"
    "footer"
  ),
  // 3 columns 1st of 100px, 2nd auto, 3rd of 25%
  sm: (
    "logo|100px nav nav"
    "main main sidebar|25%"
    "footer footer footer"
  ),
));

The size of 3rd column has been set with sidebar for a visual purpose as the sidebar area is the only one constrained to the third column. logo|100px nav nav|25% or footer footer footer|25% would have performed the same thing.

<section oo-template>
  <header oo-area="logo">Logo</header>
  <nav oo-area="nav"></nav>
  <main oo-area="main">Main</main>
  <aside oo-area="sidebar">Sidebar</aside>
  <footer oo-area="footer">Footer</footer>
</section>

# Multiple templates

Pass a list of named templates to the areas property.

$ooLoop: ooSet('template.areas', (
  'home': (
    rt: (
      "header"
      "main"
      "sidebar"
      "footer"
    ),
    sm: (
      "header header header header"
      "main main main sidebar"
      "footer footer footer footer"
    ),
  ),

  'abc': (
    rt: (
      "a"
      "b"
      "c"
    ),
    sm: (
      "a a"
      "c b"
      "c b"
    ),
    md: (
      "a a a"
      "b c c"
      "b c c"
    ),
    lg: (
      "a b b"
      "a c c"
      "a . ."
    ),
  )
));

<div oo-template="abc">
  <div oo-area="a">A</div>
  <div oo-area="b">B</div>
  <div oo-area="c">C</div>
</div>

# Gap

Change the horizontal and vertical space between the areas.gap-gapName vgap-gapName

// default config
template: (
  gap: (
    sizes: (),  // gap between columns and between rows
    screens: (),// responsive screens for sizes
    vsizes: (), // gap between rows only
    vscreens:(),// responsive screens for vsizes
  ),
)

$ooLoop: ooSet('template.gap', (
  sizes: (
    default: 1rem, // use default keyword to set main gap
    'less': 0, // gap-less
    'small': ( // gap-small has a responsive map
      rt: .25rem,
      sm: .5rem,
    ),
  ),
  vsizes: (
    'less': 0, // vgap-less
  ),
));

<div oo-template="home">
 <div oo-area="header">Header</div>
  <div oo-area="main">Main</div>
  <div oo-area="sidebar">Sidebar</div>
  <div oo-area="footer">Footer</div>
</div>

Responsive screens

Set reponsive gap from the screens & vscreens properties and get variants. gap-sizeName@screenName vgap-sizeName@screenName. (Variants with map value will be skipped).

$ooLoop: ooSet('template.gap', (
  sizes: (
    default: 1rem,
    'less': 0,
    'small': (
      sm: .5rem,
    ),
  ),
  vsizes: (
    'less': 0,
  ),
  screens: ('sm', 'lg'),
  vscreens: this('template.gap.screens'), //get screens value
));

/* Generating responsive variants */
// - gap-default@sm gap-default@lg gap-less@sm gap-less@lg
// - vgap-less@sm vgap-less@lg

<div oo-template="abc gap-less@sm gap-default@lg vgap-less@lg">
  <div oo-area="a">A</div>
  <div oo-area="b">B</div>
  <div oo-area="c">C</div>
</div>

Use Column << >> Use Button