less-border-layout

LessCSS mixins for doing border layouts in web pages

npm install less-border-layout
1 downloads in the last day
11 downloads in the last week
23 downloads in the last month

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

npm loves you