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.

1. 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>

2. 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.

3. 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.

1. Install it with:

npm install --save fluffy.js

2. 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.

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

2. 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>

3. 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.