This is a WIP of the 2015 revision of Ghost's admin UI. It's not set in stone, but rather the starting point for testing and experimentation.
Where we were before
The UI frame of Ghost admin was designed as a paged-serverside CMS application. Not a native-like single page responsive platform that it really is. It was also only designed with a very narrow use-case of “it should do X” - rather than “it should do X now, Y in 6 months and Z in a year”.
The best similar example that I can think of that speaks to this is the post settings menu. The old menu was a glorified dropdown with a couple of options. There was no way to extend it or do more with it, and it worked horrendously on mobile. It blocked us, for a long time, on being able to add new things to Ghost because there was simply nowhere to put them.
The new menu is a wonderful, fully fledged Ember component. It’s extensible, fast, and it is build with patterns instead of a fixed design. It leaves room for any number of things to be added to it, and it works beautifully on mobile - because it was designed based on mobile design conventions.
Where we are now
This is a move in the same direction for the rest of the Ghost Admin UI. The biggest goals are to make it more extensible, more easily navigable, more Ember-friendly, easier to scale down for mobile usage, and - of course - to feel more like an "app" and less like a website.
In addition - after a very long 2 years with many problems - this PR removes Sass entirely from the Ghost codebase and replaces it with Myth for pre-processing. You can think of this kind of like switching from CoffeeScript to Babel. Myth is a polyfill for the future (real) CSS specification (rather than an arbitrary set of syntax tools which become increasingly more complicated the more you use them).
The plan - pending any major problems - is to get this into master relatively soon and iterate on it quickly, with an emphasis on testing the relative ease of use compared to the previous version. There are lots of elements of the layout architecture which are in flux, and my hope is that usage will slowly start to determine what's working well (and what's not).
This is an early mockup from when I started playing with this concept - feel free to pull down this PR and have a play with it. This is a Work-in-Progress PR - so expect plenty of bugs and unfinished bits - I'll be pushing updates relatively regularly for the next few days to get it into a usable state.
Ember help wanted:
- toggles the persistent sidenav under the open-nav class - adds a toggle/hover bar to the side of the sidenav that shows the nav on hover