Skip to content

Latest commit

 

History

History
542 lines (451 loc) · 12.9 KB

layout.md

File metadata and controls

542 lines (451 loc) · 12.9 KB
Raw

Layout

Build basic layouts using Inkline's built-in layout components. { .lead }

The layout components are used for scaffolding the basic structure of the page:

  • <i-layout> is the main layout wrapper in which i-layout-header, i-layout-aside, i-layout-content, i-layout-footer, or i-layout itself can be nested, and can be placed in any parent container.
  • <i-layout-header> is the header area that can also serve as navigation
  • <i-layout-aside> is a container for side sections (usually a side nav).
  • <i-layout-content> is the main content container
  • <i-layout-footer> is a container for footer elements

Common Layouts

The previewed layouts are styled for documentation purposes only. When using the components, they will only provide the correct element positioning without colors and paddings.

Layouts are based on flexbox, so please make sure your browser fully supports it.

Header Content 
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>
    
    <i-layout-content>
        Content
    </i-layout-content>
</i-layout>
Header Content Footer 
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>
    
    <i-layout-content>
        Content
    </i-layout-content>
    
    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>
Header
Left Aside
Content Footer 
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>
    
    <i-layout vertical>
        <i-layout-aside>
            Left Aside
        </i-layout-aside>
        
        <i-layout-content>
            Content
        </i-layout-content>
    </i-layout>
    
    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>
.layout-aside {
    width: 16rem;
}
Header Content
Right Aside
Footer 
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>
    
    <i-layout vertical>
        <i-layout-content>
            Content
        </i-layout-content>
        
        <i-layout-aside>
            Right Aside
        </i-layout-aside>
    </i-layout>
    
    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>
.layout-aside {
    width: 16rem;
}
Header
Left Aside
Content
Right Aside
Footer 
<i-layout>
    <i-layout-header>
        Header
    </i-layout-header>
    
    <i-layout vertical>
        <i-layout-aside>
            Left Aside
        </i-layout-aside>
        
        <i-layout-content>
            Content
        </i-layout-content>
        
        <i-layout-aside>
            Right Aside
        </i-layout-aside>
    </i-layout>
    
    <i-layout-footer>
        Footer
    </i-layout-footer>
</i-layout>
.layout-aside {
    width: 16rem;
}
Left Aside
Header Content Footer 
<i-layout vertical>
    <i-layout-aside>
        Left Aside
    </i-layout-aside>
    
    <i-layout>
        <i-layout-header>
            Header
        </i-layout-header>
        
        <i-layout-content>
            Content
        </i-layout-content>
        
        <i-layout-footer>
            Footer
        </i-layout-footer>
    </i-layout>
</i-layout>
.layout-aside {
    width: 16rem;
}
Header Content Footer
Right Aside
<i-layout vertical>
    <i-layout>
        <i-layout-header>
            Header
        </i-layout-header>
        
        <i-layout-content>
            Content
        </i-layout-content>
        
        <i-layout-footer>
            Footer
        </i-layout-footer>
    </i-layout>
    
    <i-layout-aside>
        Right Aside
    </i-layout-aside>
</i-layout>
.layout-aside {
    width: 16rem;
}
Left Aside
Header Content Footer
Right Aside
<i-layout vertical>
    <i-layout-aside>
        Left Aside
    </i-layout-aside>
    
    <i-layout>
        <i-layout-header>
            Header
        </i-layout-header>
        
        <i-layout-content>
            Content
        </i-layout-content>
        
        <i-layout-footer>
            Footer
        </i-layout-footer>
    </i-layout>
    
    <i-layout-aside>
        Right Aside
    </i-layout-aside>
</i-layout>
.layout-aside {
    width: 16rem;
}

Components API

Here you can find a list of the various customization options you can use for the layout components as props, as well as available slots.

vertical Sets the orientation of the layout to vertical. Used for achieving layout columns. Boolean true, false false default Slot for layout default content. default Slot for layout header default content. default Slot for layout content default content. default Slot for layout footer default content. default Slot for layout aside default content.

Sass Variables

Here you can find a list of the Sass variables you can use for the layout components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$layout-aside-background $color-transparent $layout-aside-width auto $layout-header-background $color-transparent $layout-header-padding $spacer $layout-footer-background $color-gray-10 $layout-footer-padding $spacer