Specs & Info for Designers

This document should contain all the information needed to create a design that the We.Publish team can efficiently implement for newsrooms.

Introduction to the CMS

The We.Publish CMS has a few different content types that behave slightly differently.

The different content types are:

• Articles

• Pages

• Events

• Comments

• Navigations

• Polls

Navigations

Navigations as the name already suggests allow the editor to set up different types of navigations inside the page. For example the header, hamburger menu drawer, footers, social media links, etc.

These are essential to make pages easily accessible to a user inside a page.

Events

Events are

Polls

Polls can have just 1 answer and can also have more than 2, they can be scheduled ahead of time and close at some point which will disable voting. Anonymous voting can also be configured. Logged in users could change their vote but we generally don’t allow that.

Comments

A comment can have a title, lead, and the comment itself. We generally do not give the users a possibility to write a lead and this is just for the editor to add one. Comment nesting depth can be configured & so can anonymous commenting.

Comments can also be (anonymously) rated and multiple different rating categories are possible.

Articles & Pages

Articles & Pages use something we call the block editor, which allows an editor to place various content on a page.

The block editor is the heart of the CMS and allows users to place different types of content. Blocks are similar to Lego blocks but are always taking up a whole row. It supports various types of content that an editor can fill a page or an article with.

While a block is always taking up a full row, the content inside that row can be re-arranged based on what the design specifies. To differentiate the same content but displayed in a different fashion, blocks support to give them a styling.

Title

Richtext

Image

Image Gallery

The image gallery block comes with 2 different stylings out of the box:

1. An image gallery just like your phone has (default)

2. A slider element styling

Listicle

Quote

Break

A break block is content that breaks out of the current context and displays meta call to actions, information etc.

Embedded Content

These usually contain iframes, for example: YouTube, Instagram Posts, Vimeo, SoundCloud etc.

Teaser

A teaser is a reference to another piece of content, showing a small glimpse of what it is about. It is either another Article, Page, Event in the CMS, or an Article from another We.Publish media or any 3rd-party content. It is usually the main content type of a media’s homepage.

Which comes in 4 different forms

As a singular full width teaser

3-column grid with 2 rows for a total of 6 teasers

A flexible grid where the editors can choose the layout and the amount shown

A list of teasers that are automatically filled based on what's available based on the parameters given. It does not make any assumptions about the layout.

HTML

Included for completeness sake but does not need a design.

Poll

Allows to include a poll in the content

Comments

Allows to include one or more comments in the content

Limitations

There are a few big limitations in the CMS that are not possible right now without extra implementation from the CMS:

1. Each block is its own row which means we can not place blocks next to each other in the CMS or create a layout with it.

2. Blocks can not have a background color set via a color picker but would need a block style implemented.

3. The teaser flex grid only configures the layout for the desktop view

4. Not all text can contain rich text

5. Events do not use the block editor

Fonts

We use Hanken Grotesk as the default font

Grid size

We work in increments of 4px generally

Breakpoints

We currently have set these breakpoints as the defaults:

• xs: 0px

• sm: 600px

• md: 900px

• lg: 1333px

• xl: 1536px

What a design should include

We will need a design in Figma that either displays a full page/article etc with all the changed elements, or every single element.

Colors

We will need at least the following colors:

• Primary (Navigation bar, links, buttons etc)

• Secondary (Buttons)

• Accent (Highlights within content)

• Accent Light (Highlights within content)

Also good colors to include:

• Error, Info, Warning, Success etc.

• Divider/Gray scales

• Foreground colors for Primary, Secondary, Accents (else one will be calculated based on contrast).

If there are more colors, we will incorporate them as needed from the design

Fonts

We will need a link to the Google font, font file etc depending on the source of the font.

If multiple fonts will be used, we need to know the logic how they are used (like a different font should be used for headings, or article vs pages, etc.)

Breakpoints

While a mobile-first would be nice to have, it is not required, but we would need some pointers how ideally we should break down a component on smaller screens. Else they will be assumed.

• Block: Similar to a Lego block but is always taking up a whole row. It supports various types of content that an editor can fill a page or an article with.

• Teaser: A reference to another piece of content, showing a small glimpse of what it is about. Is either another Article, Page, Event in the CMS, an Article from another We.Publish media or any 3rd-party content. It is usually the main content type of a media’s homepage.