Skip to content

tomcon/boxxy

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

boxxy

A layout manager for web apps. See it in action here.

Installation

npm install boxxy

Usage

Include Boxxy.js in your project - it works as a standalone script, or as an AMD module - along with Boxxy.css. Then,

var boxxy = new Boxxy({
    el: container, // this is a reference to the container DOM element
    columns: [     // or you can have rows instead
        'left',
        'right'
    ]
});

This will create two columns inside container, with left and right as their IDs. They will be separated by a vertical control, which you can drag to resize the two columns.

You can easily retrieve references to the two columns (for the purposes of rendering the rest of your UI, for example):

boxxy.blocks.left === document.getElementById( 'left' ); // true
boxxy.blocks.right === document.getElementById( 'right' ); // true

That's not very exciting

Yeah, it's not. But you can also nest blocks inside each other, specify constraints (minimum and maximum width, etc), set an initial layout (which is fluid, and will keep its proportions when the window resizes, subject to any other specified constraints), and so on.

All will be documented soon! For now, I have to get back to work.

License

MIT

Contact

@rich_harris

About

Layout manager for web apps.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%