Skip to content

A small library for creating gallery grids with horizontal row priority.

Notifications You must be signed in to change notification settings

igormigas/latis

Repository files navigation

Latis

npm

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

Grid Horizontal Demo Image

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.

About

A small library for creating gallery grids with horizontal row priority.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published