https://github.com/helpfulscripts/hslayout

Javascript library to do client-side UI layouts using mithril. See:
https://github.com/helpfulscripts/hslayout

hsdocs layout-engine mithriljs typescript

Last synced: 10 months ago
JSON representation

Javascript library to do client-side UI layouts using mithril. See:

• Host: GitHub
• URL: https://github.com/helpfulscripts/hslayout
• Owner: HelpfulScripts
• License: mit
• Created: 2015-04-04T19:18:34.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-10-01T23:21:18.000Z (over 5 years ago)
• Last Synced: 2025-01-17T09:34:03.131Z (12 months ago)
• Topics: hsdocs, layout-engine, mithriljs, typescript
• Language: TypeScript
• Homepage: http://helpfulscripts.github.io/hsLayout/#!/api/hsLayout/0
• Size: 7.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Deprecated. Replaced by `Grid` widget in `hsWidget`.

hsLayout 

========

[![npm version](https://badge.fury.io/js/hslayout.svg)](https://badge.fury.io/js/hslayout)

[![GitHub](https://img.shields.io/badge/GitHub-hsLayout-blue.svg)](https://github.com/helpfulscripts/hslayout)

[![docs](https://img.shields.io/badge/hsDocs-hsLayout-blue.svg)](https://helpfulscripts.github.io/hsLayout/#!/api/hsLayout/0)

[![Build Status](https://travis-ci.org/HelpfulScripts/hsLayout.svg?branch=master)](https://travis-ci.org/HelpfulScripts/hsLayout)

[![Dependencies Status](https://david-dm.org/helpfulscripts/hslayout.svg)](https://david-dm.org/helpfulscripts/hslayout)

[![codecov](https://codecov.io/gh/HelpfulScripts/hsLayout/branch/master/graph/badge.svg)](https://codecov.io/gh/HelpfulScripts/hsLayout)

[![Known Vulnerabilities](https://snyk.io/test/github/HelpfulScripts/hsLayout/badge.svg?targetFile=package.json)](https://snyk.io/test/github/HelpfulScripts/hsLayout?targetFile=package.json)

[![NPM License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://www.npmjs.com/package/hslayout)

Helpful Scripts framework-independent data management functions.

**hsLayout** provides means to layout the browser window in various ways.


It uses the [mithril](https://www.npmjs.com/package/mithril) framework to create the layout.

## Installation

`npm i hslayout`

## Usage

The following snippet creates a layout that fills the provided *root* element with three rows. The first and third rows have a fixed size, while the middle row fills the remaining space. 

```

import { m, Layout } from 'hslayout';

m.mount(root, {view: () => m(Layout, {

    rows: ["50px", "fill", "20px"],

    content:['Top row: 50px', 'Middle row: fill', 'Fixed footer']

    })

});

```