digitopia.js
A framework for building modern responsive web sites.
A client-side UI framework which allows you to quickly and easily associate JavaScript functionality with HTML elements to control their geometry, position, visibility & behavior.
TL;DR Work your way across the top nav from left to right to see what the various components do - each comes with one or more examples.
You want:
- To build a responsive website which needs to be able to accomodate some or all of the various modern devices: phones, phablets, tablets - all with landscape and portrait modes - and the desktop. And you want the pages to recognize when the browser geometry around them has changed.
- The site to be visually appealing while being maximally visible to search engines.
- The client to only to download needed and necessary content: e.g. phones don't need to download huge graphics which they can't display or waste the bandwidth & time they suck up to download.
- Images to be properly displayed and automatically sized, aligned and/or cropped if needed to lay out on a particular platform.
- Page transitions to be seamless and smooth and you don't want the time taken to recompose the page every time you click on a link.
- To build page elements that are visually and/or functionally related to one another to remain in height & width proportion to each other.
With digitopia.js creating responsive elements can be as simple or as complicated as needed, with automated geometry, lazy loading, & hijax functionality. This site itself is built on the framework - as you work through this documentation take note of the ability of the site to respond to changes in the geometry of the browser window and the smooth transitions as you move from page to page.
Key Concepts
Controllers are Javascript objects that are associated with HTML elements which listen for and respond to external events, such as those generated by window resizing, scrolling and page transitions.
Search Engine Optimization is often layered in at the end of the design & engineering process almost as an afterthought and while "mobile first" - creating the mobile layout for the site as the starting point - is now a popular approach, we believe there is an even more fundamental origin in the engineering of modern websites: "search engine first".
Search engines can be thought of as the dumbest of clients, paying attention mostly to the text on a page. digitopia.js is designed to allow the site to be engineered from the search-engine visible layer first and adding features and content as the capabilities of the consuming device increase. In this way, SEO is significantly enhanced as it is one of the core functions of the site to deliver to the search engines that which they most need.
Breakpoints define the transition markers between display width - for example, you could define as "tiny" any screen width from 0 to 480px, your breakpoint would be 480. Once the design decisions have been made for each width range you intend to support, you can use the geometry framework to define and execute the layout - digitopia.js will notify all of the appropriate controllers of this transition allowing them to take whatever actions they need in response.
Hijax is a term for the application of progressive enhancement to AJAX for loading server content. By declaring components on a page to be "hijaxable" the digitopia.js framework allows you to transition between pages, only replacing those components that have been modified and leaving the static elements alone. This leads to a much faster and smoother user experience. When JavaScript is not enabled or present (search engines) the system gracefully degrades to a traditional page loading model - with those user agents unware of the hijax capabilities.
Standard browser behavior when it encounters an <img> tag in markup is to request that image be transferred from the server. However, since many images on a page will not be visible at any given point, being outside - above or below, left or right - of the current viewport onto the image, this behavior unnecessarily wastes bandwidth and computation time. These considerations become even more important when mobile platforms are considered. Instead it is much more efficient to load the images only when they become visible. digitopia.js makes implementing this technique, known as lazy loading simple. It also allows one to selectively specify different images depending on the breakpoint that is currently active - there is, for example, no need to deliver desktop-appropriate graphics to many mobile devices, so one could create an image for the "tiny" bracket, another for "small" & "medium" and one for "large".
Putting it all together
Extending the standard bootstrap carousel component.
This is a complex example of what the various components of the digitopia.js framework can do working together to extend the functionality of the Twitter Boostrap carousel component.
- AJAX: The carousel slide data is lazy loaded via AJAX only when it scrolls into view.
- Container: The width of the carousel follows the width of the container but the height follows the height of this text block so the columns remain balanced.
- Viewport: The images within the carousel scale and center to best fill the available space.
- Lazy: The images are lazy-loaded only when needed.
- HIJAX: The carousel controller cooperates with AJAX page loading and unloading.
To see the code for this look at the example.
All of the components of the digitopia.js framework play well with each other and with JQuery, the Twitter Boostrap and the other components listed here to provide a robust, easily maintainable codebase for responsive, hijaxed enabled sites.
This site will go through each controller in turn, to provide examples and to build a base on which the above relatively complex example can be created.
Status In Production
The code is freely available open source under GPL.
About Us
Michael Rhodes architecture, code
In production
- UN Foundation
- DataLounge
- Booklife
- GourmetLabs
- Venture Crush
- Publishers Weekly
- "Water investing" iOS & Android cordova app.
