Skip to content

acaxlabs/xenon-layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ed56d28 · Jun 24, 2018
Aug 2, 2017
Jul 21, 2016
Jan 5, 2017
Feb 3, 2018
Aug 16, 2016
Oct 6, 2017
Apr 19, 2018
Oct 3, 2017
Nov 23, 2017
Nov 23, 2017
Oct 31, 2017
Mar 12, 2018
Mar 8, 2017
Mar 7, 2017
Jun 24, 2018

Repository files navigation

xenon-layout

<xenon-layout> is a polymer component that provides a simple responsive page layout following Material design guidelines. Use the special children elements <header>, <nav>, <main>, and <footer> to layout the page. Inside the nav element, the <nav-item> element can be used to make navigation links.

Example:

    <style is="custom-style">
        :root { --xenon-layout-background-color:purple; --xenon-layout-color:white; }
    </style>
    <xenon-layout title-text="This Is A Test">
        <header><iron-icon icon="add-circle"></iron-icon></header>
        <nav style="display:flex; flex-direction:column;">
            <nav-item icon="settings">Menu Item One</nav-item>    
            <nav-item icon="add">Menu Item Two</nav-item>    
            <nav-item icon="cancel">Menu Item Three</nav-item>  
            <div style="flex: 1 1 auto"></div>
            <div style="align-self:center;">bottom logo here</div>  
        </nav>
        <main style="max-width:1200px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </main>
        <footer style="text-align:right">hello footer</footer>
    </xenon-layout>