❤
npm
Sign UpSign In

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

/less-border-layout/

    Package Sidebar

    Install

    npm i less-border-layout

    Repository

    github.com/sunesimonsen/less-border-layout

    Homepage

    github.com/sunesimonsen/less-border-layout#readme

    Weekly Downloads

    1,446

    Version

    0.1.1

    License

    none

    Last publish

    Collaborators

    • sunesimonsen
    Try on RunKit
    Report malware