Latis

Latis is a small Javascript library which spreads given elements into rows, creating a nice looking layout with horizontal priority.

Notice

The library is in an early stage of development. Although it is not fully optimized, feel free to try it, use it or give a feedback. Be aware that, until the script reaches stable release, any interface element may change in next versions without backward compatibility.

All images used in previews are taken from pexels.com, a free stock photos library.

Installation

$ npm install --save latis

Usage

Latis is designed to work nearly out of the box, without diving into available settings. However you need to follow some basic rules to initialize the process.

Let's build a simple container-items structure with some Javasciript.

HTML (example):

<div class="latis">
  <div class="latis-item">
    <a href="#">
      <img class="latis-image" src="default.jpg" />
    </a>
  </div>
  <div class="latis-item">
    <a href="#">
      <img class="latis-image" src="image.jpg" />
    </a>
  </div>
  <!-- more latis-items -->
</div>

JS:

import Latis from 'latis';

const container = document.getElementById('latis');

const lts = Latis(container);
lts.layout();

Basic settings

To make changes in layout look and behaviour, use some basic settings. For clarity, from this point examples are stripped from checking if document is ready.

lts.layout({
  maxRowHeight: 300,
  gutter: 15,
  overloadBehaviour: 'hide',
});

You can find more details about settings in the end of documentation.

Callback function

If for any reason you need to know when the script has finished, use callback.

const callback = function() {
  console.log('Latis has finished');
}
const lts = Latis(container, callback);
lts.layout();

Settings and advanced usage

Full documentation has been published here: Latis Documentation

License

Latis is MIT licensed.