Pagekit Beta Released

Pagekit Beta Released

Today we are happy to introduce the first Pagekit Beta version. You guys have been very patient, but believe us when we tell you: it was worth the wait. The reason this took a while is simple: Pagekit has been revised entirely. To name just the most fundamental changes, here is a small overview:

  1. A new user interface
  2. A site tree to manage everything in one place
  3. A new default theme, called One
  4. An even more modular architecture
  5. Data-reactive components with Vue.js
  6. Package management using Composer

To us this Beta release feels more like a sort of Pagekit 2.0. We changed and reworked Pagekit, iteration by iteration to create the best possible experience for end users and developers. Now, let's take a closer look at all the new stuff.

1. Living in a material world

As work on the new site tree was going on, more and more inconsistencies in the Pagekit control panel started to bug us. We took this opportunity to reimagine the whole Pagekit control panel. The new user interface is heavily influenced by Google's Material Design - a comprehensive guide for visual, motion, and interaction design across platforms and devices.

We rethought the user workflow across the whole system with a cleaner and more intuitive interface. Particular attention was given to small details: How to filter and order lists, where does the search belong, how do action buttons work? This was a major interface overhaul and we hope you like it. We are not done yet, and we will still tweak it a lot during the beta phase.

Pagekits new user interface

2. Site Tree

The Site Tree was a highly requested feature by the community and the initial trigger to revise the whole pagekit structure. It took some time, but we're pleased with the outcome. The site tree shows a hierarchical view of all the site's pages. You can set up your menu structure, edit your pages and add widgets. All in a unified interface, with simple drag and drop. This drastically simplifies the user interface and is now the central place to manage your content.

3. One Theme to rule them all

Yes, Pagekit now comes with a beautiful default theme called One. It is modern, elegant and minimalist and separates its content into different colored blocks. One theme features a hero position that covers the entire viewport, which is ideal to present emotional images. The main navigation is a sticky navbar that appears again when scrolling up. It also turns transparent when positioned on top of a hero image. Take a look at the One theme demo page for more information.

Pagekits One Theme

4. Modular Architecture

What looks good on the interface level should also extend to a strong foundation. Since extensibility is one of the core ideas of Pagekit, we explored what 'modularity' really means. On the code level, pretty much everything is a Module object: a theme, an extension, a widget and most core functionality itself. This keeps code complexity to a minimum, as developers can work with the same concept in many different places.

5. Data-reactive components with Vue.js

Pagekit has found a new best friend, Vue.js. The JavaScript framework offers functionality to build interactive interfaces that interact with your data models. Any model changes automatically reflect in the interface. We ported pretty much every single section of the control panel over to be a Vue component. Most browser reloads are gone, making the user experience a lot better. These Vue components are not only great because they reduced a lot of Pagekit's lines of PHP code. They also offer useful functionality for extension developers, e.g. the powerful file picker that can be used from any extension.

6. Package management using Composer

Themes and extensions are the things you want to extend Pagekit's functionality and build beautiful websites. Pagekit now manages them using the power of Composer. Install packages right from the browser, using the command line or by requiring them in your project definition. You're starting a new project and want to get up and running with your favorite set of extension? No more manual labor, just throw in your favorite composer.json and let Pagekit do the rest for you.

A screencast of Pagekits user interface

As Pagekit hits the home stretch, we want to familiarize everyone with the new features, the fresh interface and the things, developers need to know. Over the course of the next few weeks, we'll release several screencast videos with quick looks at Pagekit's back-end and codebase. Here is the first one. Enjoy!

What does the future hold?

Our focus now lies on fixing bugs and small improvements. We plan to follow a quick release cycle with several beta releases, which will then followed by the final 1.0 release. We will also take time to rework the available documentation, as the existing docs have become mostly useless due to the major changes.

As you may have noticed, we relauched the Pagekit.com website. Make sure you check out the animated gifs on the features page to get a nice overview of the new features.

Please leave your suggestions and feedback in the comments. If you need help, join the Pagekit chat and start chatting with all the fellow Pagekit users and developers in the community. Many thanks to all contributors who support Pagekit and help us on our way to the final release.

And now it's time to buckle up and take Pagekit for a ride. Have fun!

Sascha
Posted by Sascha
{{ message }}

{{ 'Comments are closed.' | trans }}