1.0.2 • Published 6 years ago
x-columns v1.0.2
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.
Getting Started
- Either install the package from npm by running:
or download a release.$ npm install --save x-columns
- Then load the package whenever it is required, through:
or linking the apropriate bundle for your use (from theimport "x-columns";
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