Schedule a demo

Blog

The latest updates about Superdesk

BACK TO BLOG OVERVIEW

Why We Made A User Interface Framework for Superdesk

Superdesk UI Framework
Superdesk UI Framework

HTML and CSS is not everyone’s strong point, not even for front-end developers.

But for developers working on our digital newsroom Superdesk, that’s not a problem anymore, thanks to a dedicated user interface (UI) framework, an integral part of the Superdesk Design System.

The need to be HTML-free  

“Very often people are taking different approaches on how to solve the same or similar problems,” said Vladmir Stefanovic, Head of Design at Sourcefabric. “But for us it’s important to maintain a consistent look and feel of Superdesk as an application. The UI framework solves that.”

The UI framework is a library of pre-built components that can just be dropped in rather than having to be coded in HTML. Built in React, these components span a range of complexity, from simple labels and badges to more complex drop-down menus and date pickers. Some were built from scratch while others were borrowed from other frameworks and adapted for Superdesk.

Together, all of these elements not only help developers to code and implement faster, but also give the front-end team more control over the design. 

A playground of possibilities

The UI framework has its own home, as a subdomain of Superdesk.org. The page provides design guidelines and best practices for developers. In addition to the individual framework elements, there is also a playground that shows examples and sketches of more complicated layouts and full-page views.

The UI framework has not only benefited developers. Since the  project began several years ago, it has inaugurated a shift in mindset for the design team as a whole. “Now when we’re working on new designs, we always think about components we already have, working with existing building blocks instead of creating new ones,” said Stefanovic.  

How the UI framework is evolving  

The effort started with decoupling the CSS from Superdesk core, by creating an external dependency that gradually became the framework. 

After that, the team started creating components in Angular; however this was superseded by an overall shift to React for Superdesk code.

“It took some time to gain momentum with React but we have done a lot in the last year,” said Stefanovic. 

Also, the framework as a whole has been updated to address accessibility. All of the React components now have accessibility features built in. A special effort has been made to enable screen-reader and keyboard support. Currently the team is working on a dark mode version as well as a high-contrast theme.

Want to see Superdesk in action? Sign up for a free demo here

BACK TO TOP

Latest Articles

Making Superdesk Accessible

Making Superdesk Accessible

by Anna Rohleder 14.06.2021

By making our digital newsroom software more accessible to partially sighted as well as fully blind journalists, we hope to help newsrooms around the world to become more inclusive.

Sign up for free to our monthly newsletter to receive Software updates and news about Superdesk

Demo request

Before you go

See Superdesk in action with a no-obligation demo for your organisation.

Schedule a demo