Skip to content
A Houdini module for an alternative overflow/layout mode for column based design allowing columns to be dynamically added in the inline direction upon text overflow.
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
dist
media
src
.gitignore
LICENSE
README.md
package-lock.json
package.json
rollup.config.ts
tsconfig.json

README.md

x-columns

x-columns attempts to add an alternative overflow/layout mode for column based design.

Where the content overflows the element, instead of forcing the user to scroll up and down the page on column break, add more columns.

Diagram detailing how x-columns changes the overflow of CSS columns

Getting Started

  1. Either install the package from npm by running:
    $ npm install --save x-columns
    or download a release.
  2. Then load the package whenever it is required, through:
    import "x-columns";
    or linking the apropriate bundle for your use (from the dist/ directory):
    <script src="{pathToPackage}/dist/x-columns.umd.js" defer></script>

Usage

Set the styles of the elements you want x-columns to handle to:

.column-layout {
  --x-columns:  auto;
  height:       {anything except auto};
  column-width: {anything except auto};
}

or for a vertical writing mode:

.column-layout {
  --x-columns:  auto;
  width:        {anything except auto};
  column-width: {anything except auto};
  writing-mode: {any vertical writing mode};
}

plus any other styles of your choosing.

For dynamic addition of elements, ensure the elements are styled as above, and either inform x-columns of the particular element:

import { xColumns } from 'x-columns';
xColumns(element);

or for multiple elements, trigger a rescan of the document:

import { xColumnsAll } from 'x-columns';
xColumnsAll();

MIT © Ashley Wright

You can’t perform that action at this time.