# Specs & Info for Designers

## Introduction to the CMS <a href="#introduction-to-the-cms" id="introduction-to-the-cms"></a>

The [We.Publish CMS](https://github.com/wepublish/wepublish) has a few different content types that behave slightly differently.

The different content types are:

* Articles
* Pages
* Events
* Comments
* Navigations
* Polls

### Navigations <a href="#navigations" id="navigations"></a>

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.

&#x20;

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FYBknshTWWf8DXkKqeXSj%2Fimage-20241028-121636.png?alt=media&#x26;token=30abc735-12a5-4afd-9901-14a79ed4825d" alt=""><figcaption></figcaption></figure>

&#x20;

### Events <a href="#events" id="events"></a>

Events are

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FYodgtVvmfDcfeMgPVaCB%2Fimage-20241028-142556%20(1).png?alt=media&#x26;token=c495f232-12ed-4254-b403-a4687406bd54" alt=""><figcaption></figcaption></figure>

### Polls <a href="#polls" id="polls"></a>

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.

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FEgFJzeamPv00t6kdbI6f%2Fimage-20241028-142708.png?alt=media&#x26;token=29edec85-7492-4f22-bd7b-891082314393" alt=""><figcaption></figcaption></figure>

### Comments <a href="#comments" id="comments"></a>

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.

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2Fd5WkCswY4FKx25aHwDbi%2Fimage-20241028-143449.png?alt=media&#x26;token=2ef9ca78-61c5-4151-86a0-38ca5a1a0c59" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FfyNah3i7YVcprIoBN4K7%2Fimage-20241028-143754.png?alt=media&#x26;token=7cc7b03c-ccb2-43e4-9097-525a05fedd1e" alt=""><figcaption></figcaption></figure>

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

### Articles & Pages <a href="#articles-and-pages" id="articles-and-pages"></a>

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**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2Ff8BqySiwpzAxI7125s9X%2Fimage-20241028-114813.png?alt=media&#x26;token=81c2f793-414c-42f7-8b42-b7a9e9da32c2" alt=""><figcaption></figcaption></figure>

#### **Richtext**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FvooVgAz0npjpH93G2i1q%2Fimage-20241028-114841.png?alt=media&#x26;token=b9ec7602-c51d-4ff8-a816-344a53d59284" alt=""><figcaption></figcaption></figure>

&#x20;

#### **Image**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FxHUakaxKbB2kyHbUBQlU%2Fimage-20241028-114914.png?alt=media&#x26;token=df08101e-c745-4fae-98a2-56c72508c784" alt=""><figcaption></figcaption></figure>

#### **Image Gallery**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2Fh76dw2pnFVVTwEtbB4TU%2Fimage-20241028-114955.png?alt=media&#x26;token=654bd91e-de0b-4f97-8133-59626893dcbf" alt=""><figcaption></figcaption></figure>

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**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FRHqmQyqo1lvbwTk4l5Tb%2Fimage-20241028-115030.png?alt=media&#x26;token=4c741b08-57d2-4b23-9dd7-2cf1ac45286f" alt=""><figcaption></figcaption></figure>

&#x20;

#### **Quote**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2F9pnNkn2KWExhcSY0xsJX%2Fimage-20241028-115102.png?alt=media&#x26;token=e7fda45d-5cd9-411d-9252-45651d8e615c" alt=""><figcaption></figcaption></figure>

&#x20;

#### **Break**

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

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FI81JFhlMGudpIkDuLRYE%2Fimage-20241028-115137%20(1).png?alt=media&#x26;token=1da3690d-3967-4c52-8605-2e19e45387e6" alt=""><figcaption></figcaption></figure>

&#x20;

#### **Embedded Content**

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

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FsyvbWFKlDIZGgDs0iKXE%2Fimage-20241028-115223.png?alt=media&#x26;token=179b8316-ffa6-46d1-971c-c32edafba613" alt=""><figcaption></figcaption></figure>

&#x20;

#### **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

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FV27hnoSMNyJj8FIuC952%2Fimage-20241028-115331.png?alt=media&#x26;token=1b0080ea-68ea-496e-9a20-56fc374518f6" alt=""><figcaption><p>As a singular full width teaser</p></figcaption></figure>

&#x20;

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FR8wEC8UmNRfD8164wbxV%2Fimage-20241028-115425.png?alt=media&#x26;token=e812cb32-27b8-4e74-bff7-0d017499e9f0" alt=""><figcaption><p>3-column grid with 2 rows for a total of 6 teasers</p></figcaption></figure>

&#x20;

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FPZSJhCRc400H6f18UBHW%2Fimage-20241028-115527.png?alt=media&#x26;token=f0c65afe-ab12-432b-b844-3997eed0077d" alt=""><figcaption><p>A flexible grid where the editors can choose the layout and the amount shown</p></figcaption></figure>

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2F6woDQSk90EBayoXW8GVH%2Fimage-20241028-115700.png?alt=media&#x26;token=ae87af94-4823-4b35-a3cb-d1dd29507974" alt=""><figcaption><p>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.</p></figcaption></figure>

#### **HTML**

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2Fqft6q2zk07sWkYWF9aB5%2Fimage-20241028-120953.png?alt=media&#x26;token=8d660643-564f-4e32-8251-68016da8f8c6" alt=""><figcaption></figcaption></figure>

Included for completeness sake but does not need a design.

#### **Poll**

Allows to include a poll in the content

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FMGYBGa0O4hKfCoknnKkP%2Fimage-20241028-121028.png?alt=media&#x26;token=29e34e59-bce2-4ec8-b049-a816088aa049" alt=""><figcaption></figcaption></figure>

#### **Comments**

Allows to include one or more comments in the content

<figure><img src="https://2849746287-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI94kSPjKj4zHlecmyik1%2Fuploads%2FT5lyPOpl1Jnc3NQlHzC4%2Fimage-20241028-145353.png?alt=media&#x26;token=4629a0e5-1f05-4db1-a444-b117b65c9c24" alt=""><figcaption></figcaption></figure>

## Limitations <a href="#limitations" id="limitations"></a>

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

## ![laptop computer](https://pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net/standard/caa27a19-fc09-4452-b2b4-a301552fd69c/32x32/1f4bb.png) Default Tech specs <a href="#default-tech-specs" id="default-tech-specs"></a>

### Fonts <a href="#fonts" id="fonts"></a>

We use [Hanken Grotesk ](https://fonts.google.com/specimen/Hanken+Grotesk)as the default font

### Grid size <a href="#grid-size" id="grid-size"></a>

We work in increments of 4px generally

### Breakpoints <a href="#breakpoints" id="breakpoints"></a>

We currently have set these breakpoints as the defaults:

* xs: 0px
* sm: 600px
* md: 900px
* lg: 1333px
* xl: 1536px

## ![blue book](https://pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net/standard/caa27a19-fc09-4452-b2b4-a301552fd69c/32x32/1f4d8.png) What a design should include <a href="#ud83d-udcd8-what-do-we-need-from-a-design" id="ud83d-udcd8-what-do-we-need-from-a-design"></a>

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  <a href="#colors" id="colors"></a>

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 <a href="#fonts.1" id="fonts.1"></a>

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 <a href="#breakpoints.1" id="breakpoints.1"></a>

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.

## ![clipboard](https://pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net/standard/caa27a19-fc09-4452-b2b4-a301552fd69c/32x32/1f4cb.png) We.Publish specific glossary <a href="#ud83d-udccb-we.publish-specific-glossary" id="ud83d-udccb-we.publish-specific-glossary"></a>

* **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.
