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:
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".
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.
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.
The code is freely available open source under GPL.
Loading...