Blox.JS

Simple website design in blocks. Basically blocs3, but in JS form and open source!

When my friends ask me to make a website for them, I'm too lazy too program a whole new website when I can just use Blox. The Idea is simple, a website consists of cubes(blocks) and they are easy to work with.

Examples

Site examples are: Blox test site where Blox.js is showcased

Same site as the Blox.js test site, but recreated without Blox.js

How to install?

Link the raw Blox.js and Blox.css to your page. The Blox.js must be put in as an element after the rest of the page. This ensures that the whole page is loaded before Blox.js takes action.

Usage

With Blox.js, you can surround a divider element with your own stuff. The divider needs its own unique id and a class describing with block type it needs to transform into.

Block type	class name
Single block	blockSingle
Double block (page wide)	blockDouble

If you want your block to have a background, simply put in an img element with the id "background" and ofcourse a source.

Here's an exmaple of how it should look like:

Before:

<ul>
  <li>Item one</li>
  <li>Iten two</li>
</ul>
    
After:

<div class="blockDouble" id="uniqueID">
    <ul>
      <li>Item one</li>
      <li>Iten two</li>
    </ul>
    <img id="background" src="myImage.png">
</div>

For questions, please contact me. If you have issues with Blox.JS functionality, please submit a new issue.