/* Add a basic data series with six labels and values */ var data = { labels: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’], series: [{ data: [1, 2, 3, 5, 8, 13] }] }; /* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic …
Tag Archives: responsive web design
Google Chrome DevTools Device Mode
Click the icon marked with the pink-ish circle to open Device Mode. Click the icon marked with the red circle to activate the Media Query Inspector. One can quickly choose a device and also throttle the network using the blue and orange dropdowns at the top. You might have to enable Devtools Experiments in Canary …
Emmet Re:View
The container model and blended content
One of the key differences between our new beta site and the current Guardian site is the way we approach content curation and presentation. From the outset we knew we wanted to create a modular system. However we were wrestling with how we could maintain a consistent hierarchy of stories across desktop, tablet and mobile …
Responsive tables with Tablesaw
Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your …
Google Developers: Web Fundamentals
Device-Agnostic
Trent Walton on the term Device-Agnostic: Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability. In my mind this approach addresses the following from the beginning: Hostile browsers, Tiny screens, Slow connection speeds, and Touch inputs Long story short, …
Responsive Deliverables: The Style Guide
Jeremy wrote a nice article on Pattern Sharing, sparked by the Code for America Style Guide. A first look at the style guide might tell you it’s just a pattern primer, yet the menu reveals that the style guide also holds a few templates to use. In order to see the code used for the …
Responsive Deliverables
During the era of Print Design, companies would approach agencies for a brand identity system. The identity work started with a simple logo and color scheme and then scaled to business cards, product packaging, vehicles and more. The sum of these components made up the physical brand. Building webpages is not so different. Be sure …