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 ...
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.
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?
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.
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.
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.
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.
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.
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.
Updated look and feel for Filter
A small update to the filters' look and feel should improve the usability.
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.
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!
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.
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?
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!