We are pleased to announce that the frontend for the CMS in version 3.1 has gone through a major frontend cleanup. You can take a look at http://demo.bundles.kunstmaan.be/en/admin/ or read on to learn more about the updates ...

Why?

Improving maintainability

Let’s say you wanted to fix a frontend issue in the CMS, what did you do? You just wrote more code because adjusting code was too dangerous. You never knew whether it would break something else, and you didn’t want to risk wrecking a good piece of code.

We also do all the work on the open-source content management system in between client work, which obviously has priority. That means that work on the CMS is done in small increments. The consequence? We needed to be able to split up the tasks and todo's for the CMS so we can handle updates in the time available and limit the risk of having to put branch full of large code changes on the backburner. 

Improving usability

Working in your CMS on your 27 inch monitor to adjust a typo in your page should be as easy as doing it on your 5 inch phone. There’s just no reason why this shouldn’t be the case. Your CMS should be easily accessible wherever you are, whichever device you are using. After all, isn’t that what “web app’s” are all about?

As preparation

This project is continuously expanding … new features, a new design … they’re all in the pipeline.
The frontend should be prepared for this. Features should be easy to adjust or add.
A new design shouldn’t require a full rewrite of the base-code and/or styles.

Main features

Responsive

So you want to adjust some embarrassing typo on your page that is online and visible for the whole of humanity? But you’re stuck in the train, with only your phone to save you from major humiliation?

Relax, the new frontend of our CMS is ready to serve and will adjust to your screen, not the other way around. Whether you have a 27 inch or 5 inch screen, the CMS will be easily accessible and perfectly usable. Some of the biggest features here are the sidebar, hidden on smaller screens, and responsive tabs behaviour and responsive actions buttons.

Bootstrap 3

From now on, Bootstrap 3 is completely included. Want to add your own feature or adjust something? You have the full Bootstrap library to your disposal. This results in a better expandability without the need of extended frontend knowledge. Developers can now properly add features without the use of inline styles or javascript.

Our CMS now works nicely together with Bootstrap. There will be way less of our own styles and Bootstrap overwrites. Writing less code of our own and using Bootstrap as much as possible, reduces the code base and makes it possible to update more easily to a future Bootstrap version.

Font Awesome

Adding an icon for your new functionality or feature? All the icons from Font-Awesome are now included, meaning you have 519 icons at your disposal. Take a look at the library’s docs and just include the correct html.

jQuery 2.2

Because we only support IE9 and up, jQuery 2 is the best companion. The absence of legacy code for IE8 and down reduces file size, which is always welcome.

No inline javascript

Maintainability

Getting all the javascript and inline styles out of the twigs and into their own files, gives you an nice overview of all the code and existing functionalities. Duplicate code has been removed. So if you need to adjust something, it only has to be done in one place.

The use of "js-…” classes now tells you that this class has no style, but has some Javascript behaviour linked to it.

Reusability

Reusing features is getting easier ... If you want to use an existing functionality somewhere else, there is no need to copy the javascript. Just add the right classes or data attributes and you’re good to go.

UI-folder

Keeping the public folder clean

By adding the UI folder we are keeping the public folder clean. Only what actually needs to be publicly available should be put in the public folder. This improves the users’ experience.

Readable folder structure

By putting everything in a more readable folder structure, we improve the maintainability.

Full assetic

Adjustments to make but feeling reluctant to complicate matters? No worries: you can now easily adjust any styles or javascript without the need of installing other dependencies. Assetic is all you need. 

Updated look and feel for Filter

A small update to the filters' look and feel should improve the usability.

filter

Updated look for Login

Admit it: you like the fuzzy feeling of belonging as much as we do! A fresh and flatter look for the login screen gives you a warm welcome. The brand color is used as the background color.

login

Updated Tree

The tree has been completely rewritten with the use of jsTree 3 and icons from the icon font. New features will be added shortly … Stay tuned!

toggle

Updated behaviour and place for sidebar toggle

To preserve maximal space, we did some work on the sidebar toggle. The new place for the toggle ensures that you don’t lose any of our precious vertical space. Also, the toggle now remembers his state in the session storage.

Clean up of the dashboard

Start spring cleaning, tidy up your CMS! Code clean up and responsive behaviour have been added to the dashboard bundle. By removing the unnecessary dashboard title, the data you actually want to see is now right in sight.

Updated drag and drop for PageParts

Building pages gets even more comfortable. With the new library for drag and drop we now have a some extra nice features:

  • It supports Touch
  • It is built using native HTML5 drag and drop API

Updated behaviour for image-chooser and url-chooser

No more new windows and/or tabs while opening the image-chooser or url-chooser. The image-chooser and url-chooser now opens in a full-sized modal.

Image-chooser

Drag-and-drop for media

A new awesome look and feel for dropping media files into your media-folder. Just grab your images from the desktop and drag them on the media-folder. Easy-peasy.

How to upgrade?

Make sure to check out the full changelog and read the upgrade guide thoroughly, then change your composer.json to match the StandardEditon.

To be continued ...

Of course, this is a project that is constantly being tweaked. With the improved usability and maintainability, all is set for a continuous growth process. Definitely keep an eye on our milestones to learn more about upcoming changes. Feel free to create bugs/issues at github … Pull requests are welcome too!