easy-layout

Layout elements that work with CSS flexbox.

Usage no npm install needed!

<script type="module">
  import easyLayout from 'https://cdn.skypack.dev/easy-layout';
</script>

README

Easy Layout

Layout elements that work with CSS flexbox.

There are several elements that can be nested. Broadly speaking there are row and column divs together with sizeable and splitter divs. Splitter divs can be dragged with a mouse in order to resize sizeable divs.

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:

Juxtapose online documentation - Easy-Layout

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

Related projects

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

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 dependencies with npm from within the project's root directory:

npm install

Usage

Below the ColumnDiv, ColumnDivs, SizeableDiv and VerticalSplitterDiv elements have been used together:

import withStyle from "easy-with-style";

import { ColumnDiv, ColumnsDiv, SizeableDiv, VerticalSplitterDiv } from "easy-layout";

const View = (properties) => {
  const { className } = properties;

  return (

    <div className={`${className} view`}>
      <ColumnsDiv>
        <SizeableDiv>

          ...

        </SizeableDiv>
        <VerticalSplitterDiv />
        <ColumnDiv>
          ...

        </ColumnDiv>
      </ColumnsDiv>
    </div>

  );
}

export default withStyle(View)`

  width: 64rem;
  height: 64rem;
  display: flex;

`;

Note that he enclosing View element has its display style set to flex.

Styles

There is a small amount of default styling. All the elements have class names, however, allowing you to override this with CSS. Or a better way is to use Easy with Style. For example:

import withStyle from "easy-with-style"; ///

export default (VerticalSplitter)`

 ...

`;

Building

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