Less imports, Device Previewer, JSON Editor

Enhancements released - Week 3

Summary

Three exciting enhancements were released this week.

1. Less imports

Currently our css files has a less mode, when this is switched on, less code can be entered and is automatically compiled to css on save. This give a transparent user experience with using less, there is no off line set up or build script, just edit, save and go.

What was missing, was ability to use the less @import function, to break up a large file logically or to bring in reusable components. This release fixes this by adding a less virtual folder.  These files are available and served via /less, however, this is not how they would usually be accessed. When using the @import instruction in a less enabled css file, the system will automatically look in the less virtual folder for the file and bring it in as part of the compile.

2. Device Previewer

To help check responsiveness of pages we've added this fantastic responsive test project by Nguyen Huu Phuoc. Click on the Device Preview icon, to see your page in various device sizes.

3. JSON Editor

Dynamic data serving is often required even for the simplest of sites, with the plethora of JSON manipulating Javascript components this can often be done using a JSON file instead of a full blown database. But when that JSON file becomes large an easier way of editing is required, this is where an JSON editor is useful.

The one we've chosen to integrate is this editor by Jos de Jong. It gives code, tree and form views to help make editing a large JSON file easier.