Nightly Procrastination Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    less-border-layout

    0.1.1 • Public • Published

    Less border layout example

    This example shows how to do border layouts using Less mixins.

    Border layout

    You can see the example here.

    index.html:

        <!DOCTYPE html>
        <html>
          <head>
            <link rel="stylesheet/less" type="text/css" href="style.less">
            <script src="less.js" type="text/javascript"></script> 
          </head>
          <body>
            <div class="layout main">
              <div class="layout top"></div> 
              <div class="layout left"></div> 
              <div class="layout center content">
                <div class="layout top"></div> 
                <div class="layout center"></div> 
                <div class="layout right"></div> 
              </div> 
              <div class="layout right"></div> 
              <div class="layout bottom"></div> 
            </div>
          </body>
        </html>

    Style.less:

    @import "../layouts.less";
    @import "../border-layout.less";
    
    .layout.main {
        min-width: 600px;
        min-height: 400px;
        
        .border-layout-top(100px);
        .border-layout-left(150px);
        .border-layout-right(200px);
        .border-layout-bottom(50px);
    
        .content {
            .border-layout-top(40px);
            .border-layout-right(60px);
        }
    }
    

    Advanced example

    Click here to open the advanced example

    Border layout example

    Keywords

    none

    Install

    npm i less-border-layout

    DownloadsWeekly Downloads

    14

    Version

    0.1.1

    License

    none

    Last publish

    Collaborators

    • avatar