Strap - Page Layout

About

Layouts are important.

ComboStrap supports actually, three page layouts:

  • holy - the default
  • median - the main content is centered and does not take the space of the sidebar if not present.
  • landing - the main content is not centered and takes the full page width

List

Holy

The default layout is a fully responsive layout (known also as the holy grail) with:

They are all contained in a page that is:

  • centered
  • with a width adjusted by screen size (by breakpoint)

The main content width expands to the width of the page if the sidebars are not present.

Median

If there is no sidebars, the median layout centers the main content with a fix width, making the length of a line shorter and therefore more readable.

You can defined it with the following frontmatter

{
   "layout":"median"
}

Landing

In a landing page layout, the main content is not contained.

You can then create section of page with the slide component where the background will take the whole width of the page.

You can defined it with the following frontmatter

{
   "layout":"landing"
}

Then in your slide component, you can still center the content by adding a container.

<slide size="lg">
    <background color="light"></background>
    <container>
        ... Your content
    </container>
</slide>
Powered by ComboStrap