layout#

A responsive Holy Grail layout for NodeDK projects.

Install#

npm i @nodedk/layout

Usage#

Copy the stylesheet into a NodeDK application's assets:

cp node_modules/@nodedk/layout/layout.css app/assets/css/layout.css

Add /css/layout.css to css in app/config/bundle.js. In a plain HTML page, load the served file with <link rel="stylesheet" href="/css/layout.css">.

Use this structure:

<div class="layout">
  <div class="header">
    <div class="container"></div>
  </div>
  <div class="main">
    <div class="container">
      <div class="sidebar"></div>
      <div class="content">
        <div class="section"></div>
      </div>
      <div class="aside"></div>
    </div>
  </div>
  <div class="footer">
    <div class="container"></div>
  </div>
</div>

The module exports the absolute path to layout.css:

var layout = require('@nodedk/layout')

Empty .sidebar and .aside elements are hidden. Non-empty elements activate the corresponding columns. Below 992px, all columns stack vertically.

Development#

npm run dev

Open http://localhost:24946/.

Created by Vidar Eldøy