fluffy.js

Fluffy.js

A simple, light and flexible JavaScript library that makes your content – no matter how big it is – fit in any screen!

– http://mzdr.github.io/fluffy.js/

Sebastian Prein
Copyright 2016, MIT License

Contributions are greatly appreciated. Please fork this repository and open a pull request to add features, improvements, bugfixes etc.

Usage

Markup

Now let me explain you how Fluffy works.

• Everything that is related to it gets into the Fluffy container. This helps Fluffy to correctly inject elements and classes for several states of execution.

Notice: If you don't use automatic detection, you can use any selector you like. That means you don't have to stick to the data attribute.

<div data-fluffy-container>
    …
</div>

• Your actual content is an element with the data-fluffy-content attribute.

Notice: The content element does not necessarily has to be the direct child of the container. But it's recommended to do it that way.

<div data-fluffy-container>
    <div data-fluffy-content>
        <!-- your content -->
    </div>
</div>

Your content can be anything you'd like it to be. Check out the examples to get glimpse of what possibilities you have.

• And that's it almost it!

Now depending on your setup (either as a module or plain in the browser) you have to hack a little JavaScript or just load the correct files. See below for further instructions.

Use it as a module

Since Fluffy.js is a registered NPM package (Bower too), you can use it as a module.

• Install it with:

npm install --save fluffy.js

• Now you can require it anywhere you like:

const Fluffy = require('fluffy.js');

// Prints 2.1.0
console.log(Fluffy.version);

// Start automatic detection
Fluffy.detect();

// Or provide a DOM node for single creation
const myElement = document.querySelector('#what-ever-you-like');

Fluffy.create(myElement);

Use it plain in the browser

If you just want to hit and run, this is probably the best way.

• Download the latest stable version and move all the files from the zip archive to the respective folder in your project.

• Include the two lines below somewhere in your HTML file.

<link rel="stylesheet" href="PATH/TO/fluffy.min.css">
<script src="PATH/TO/fluffy.min.js"></script>

• That's it! Open your browser and see for yourself!

Options

Since each Fluffy container is an instance on its own you're able to customize each one independently with the data-fluffy-options='…' attribute. This takes a JSON string with all of the options you want to change.

Example

Let's say you don't want to have scrollbars and a separate trigger instead. The markup then would look like this:

<div data-fluffy-container
     data-fluffy-options='{"showScrollbars": false, "triggerSelector": "#my-trigger"}'>
    <div data-fluffy-content>
        <!-- your content -->
    </div>
</div>

Available options

Below you see all the available options, their default values and it's description.

Option	Default	Description
triggerSelector	null	Defines a separate element which is used to trigger the actual interaction with the Fluffy content. If the target element doesn't exist, the container will be used as fallback/default. Allowed values: '[any valid CSS selector]' Examples: '#my-trigger', '#id > li:nth-child(8) a + img'
showScrollbars	true	Displays the current position within the scrollable content in forms of scrollbars. Allowed values: true, false
smartHeight	false	Automatically adjust the height of the content container according to the smallest, largest or the average height of all items found. Allowed values: false, 'smallest', 'average', 'largest'.
smartWidth	false	See smartHeight, just for width this time.
triggerDirection	'x'	Define which axis to trigger movement for. Allowed values: 'x', 'y', 'xy'.
mouseDamp	20	The higher the value the more lazier the reaction to the mouse movement will be. Allowed values: [any positive number]
mousePadding	60	Adds space (in pixel) to the trigger area where no action happens. Allowed values: [any positive number]