block.js is a lightweight JavaScript web design library for designing responsive web application layouts. It generates customizable, reusable, event-driven HTML/CSS blocks which react upon receiving data, from a minimalist tag-less blended templating syntax.
block.js is used in many of my projects:
- nestor
- led-lights
- me.anuv.me
- github.anuv.me
- lancerhacks
- rubbr
- messenger
- chessroom
- slop
- pocketjs
- sfgpa
Tired of rewriting the same <html> tags? Lost and confused in a web of #css selectors?
Just want to create simple, aesthetic, responsive web pages? block.js is for you!
Website, docs, tutorials coming soon.
block.js splits web design into three main divisions:
- Layout
- Defining tree of blocks
- Presentation and Style
- Modifying block appearance
- Defining positions of blocks
- Content
- Adding text to fill blocks
- Linking images/icons for visuals
- Defining handlers for loaded or changed content
- Markup
- Binding layout and content
- Generating HTML blocks
Why block.js?
block.js's syntax is ridiculously basic, making it easy to learn, retain, and use consistently. Its minimalistic style simplifies your coding workflow, combining layout (CSS) and content (text/attributes) with event management to easily generate responsive web pages. Don't worry about markup anymore — web design has never been easier.
But what is a "block" anyway?
A "block" is a JavaScript object returned by the library's Block() function.
-
Blocks are essentially wrappers for DOM element objects
-
Blocks provide many convenience functions for manipulating the appearance and content of their elements
-
Blocks each have a name and a type, which can be either an HTML tag name (like
div) or a custom block (which can be defined using methods outlined in the documentation) -
Blocks can be created with JavaScript, like so
var exampleBlock = Block('myType', 'myName'); // a block of type 'myType' and name 'myName' var mainBlock = Block('div', 'main'); // a block that wraps a `div` element and has name 'main'
-
Blocks can also be created in the blockfile, a file with simple syntax outlining the data for creating blocks with different names, types and attributes/properties
- If blockfile syntax does not suit your needs (unthinkable!) because it is too simple and straightforward for you, all the same features can be used in JavaScript (but you will need to type more) HINT: use blockfiles!
- In addition JavaScript can be easily embedded into blockfiles (in both events, as callbacks, and as load time scripts) to create a hybrid markup/scripting language
-
Blocks can read CSS/attribute/custom data from JavaScript objects or from blockfiles
-
Blocks listen for attached DOM events, custom events, and data events (events that occur when certain data is read or loaded)
-
Custom blocks that are created (as well as normal blocks) can be instructed to react differently to different data
Get started in 5 easy steps
-
Load this code into a web server
-
Use a web server. Apache, node.js, nginx, etc. Any web server should work.
- Copy/clone the repository into your server's equivalent of a
wwworhtdocsdirectory - Example URL to access the demo with a web server:
localhost/block.js/demo/demo.html
- Copy/clone the repository into your server's equivalent of a
-
"Why do I need web server?"
-
Block content/layout data is stored in "blockfiles", and loading them with AJAX GET requests is a best practice for enhanced user experience
-
Pure JavaScript XHR (XMLHTTPRequest) and jQuery AJAX are supported
-
Example blockfile (taken from
demo/demo.block):* demo text text1 val Hello World css font 30px Helvetica, Arial, sans-serif color blue
-
-
Works with all modern and most old browsers
- See caniuse.com for more info on XHR cross-browser support (recommended that you don't worry about browser support before IE7, usage is globally low past that point)
-
-
With your favorite text editor, open
demo/demo.html- it should have following contents:<!DOCTYPE html> <html> <head> <title>block.js demo</title> <script src = '../block.js'></script> <script src = 'blocks.js'></script> <script src = 'demo.js'></script> </head> <body> <!-- blocks are placed here --> </body> </html>
A fun fact: This is all the HTML that you will ever need! goodbye,
<tags>! -
A quick rundown of the purpose of each file in the repository:
block.js- the base code for the block.js librarydemo/demo.html- the basic HTML markup that loads all scriptsdemo/blocks.js- the JavaScript for defining and loading custom blocksdemo/demo.js- the JavaScript for starting block generationdemo/demo.block- the blockfile, which contains block/content/layout data
-
See how block.js translates your blockfile into HTML/CSS
- Start your web server
- Open your favorite web browser and go to
http://(your IP/hostname+port, ie.localhost:80or127.0.0.1:8000)/block.js/demo/demo.htmlin your browser
- Open your favorite web browser and go to
- See
Hello World, a Cavalier King Charles Spaniel, and an input box on the screen! - Type in the input box for some cool stuff
- Start your web server
-
Explanation (for further explanation of the code, read the comments in each file):
demo/blocks.jstellsblock.jshow to create and load data into custom blocks- The types of custom blocks in this file:
break,text, andimage - One might not be satisfied with constructing pages with basic HTML tags
- block.js allows designers to wrap basic elements (i.e. line breaks, spans of text, or images) in reusable, customizable blocks
- A
<br/>tag creates one line break. A block of typebreak, as defined in this file, is aspantag filled with a customizable amount of line breaks. Better, right? - A
<span></span>tag creates a simple span of text/HTML. A block of typetext, as defined in this file, is aspantag filled with a customizable text node (XSS safe), rather than raw HTML (XSS unsafe). Safer, right? - An
<img/>tag creates a basic image. A block of typeimage, as defined in this file, is adivtag with a background image, and can be customized further to fade in once it has loaded. Smoother, right? - There is one block, of type
block, that is built into block.js. It is a combination of twodivtags and certain CSS display properties that centers anything placed within, both vertically and horizontally. Amazing!
- A
- The types of custom blocks in this file:
demo/demo.jstellsblock.js(when the window has loaded) to create a main block, load into it the blockfile, and add it to the pagedemo/demo.blocktellsblock.jsto not only create blocks based on markings (names) and types but also load the content/layout data (text/attributes and CSS) into the created blocks- For more information on creating and manipulating blocks, blocks of type
block, defining custom blocks, blockfile syntax, content binding, and much more, refer below to further tutorials and documentation
View this tutorial and others at github.anuv.me/block.js/tutorials
View all API docs and tutorials at github.anuv.me/block.js/docs
block.js is compatible with many libraries and frameworks, although only jQuery is integrated into block.js itself.
For more questions about compatibility, email me at [email protected]
block.js is released under the MIT License
2016