Introducing Awesome Analytics – our gibberish analytics tool

Awesome Analytics is an HTML/CSS/JavaScript-based example website built without a JavaScript or CSS framework (but it uses a few tools to ease development as well as a few assets, such as fonts and icons).

Awesome Analytics, for now, only consists of a single page: the dashboard. An analytics dashboard is a perfect playground for our purpose. When we think of analytics tools by popular search engine companies, we first consider widgets. And often, these widgets are arranged in a grid. These widgets can be of various sizes and rarely leave gaps when they self-arrange.

Let’s look at the current layout of Awesome Analytics in the following figure.

Figure 2.1 – Awesome Analytics as it currently stands

Currently, Awesome Analytics doesn’t have any layout whatsoever. All elements stack on top of each other, which is intentional! In this chapter, we implement the grid...