Layout elements that work with CSS flexbox.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
es6
lib
.gitignore
README.md
index.js
license.txt
package-lock.json
package.json

README.md

Easy-Layout

Layout elements that work with CSS flexbox.

There are three elements, namely a horizontal and a vertical draggable splitter and a sizeable element that dragging the splitters will cause to be resized. All the elements are closely tied to CSS. For example, the sizeable element will check the values of its 'min-width', 'max-width', 'min-height' and 'max-height' CSS properties and stick to them. Layouts created with these elements can also be nested easily.

JSX support

There is now support for JSX in the form of Juxtapose. JSX brings with it several benefits. So although you will always be able to call constructors directly if you wish, creating Easy elements by way of JSX is highly recommended. The contents of this readme file will stay as a reference, however a much better place to start from now on is the online documentation for Juxtapose. The section dealing directly with this project is here:

From there you can easily navigate to get an overview of Juxtapose.

Related projects

  • Easy Elements that abstract away from the DOM.
  • Easy-DragAndDrop Drag and drop elements including an explorer and a rubbish bin.
  • Easy-RichTextarea A textarea element that handles and hands off events well.

Installation

You can install Easy-Layout with npm:

npm install easy-layout

You can also clone the repository with Git...

git clone https://github.com/djalbat/Easy-Layout.git

...and then install the necessary modules with npm from within the project's root directory:

npm install

Usage

Only building with Node.js (or equivalent) is supported, there is no support for the browser anymore. The usage is as follows:

const easylayout = require('lib/easy-layout'),
      { VerticalSplitter, SizeableElement } = easylayout;

const container =

        <div className="columns">
          <SizeableElement>
          ...
          </SizeableElement>
          <VerticalSplitter afterSizeableElement
                            onDrag={(height) => {
                                ...
                            }}
          />
          <div className="column">
          ...
          </div>
        </div>

      ;

Note the mandatory column and columns classes.

CSS

There is a small amount of CSS needed to make the elements work. This can be found in the easy-layout.css file in the css directory.

Compiling from source

Automation is done with npm scripts, have a look at the package.json file. The pertinent commands are:

npm run build-debug
npm run watch-debug

Contact