Getting started

Source: introduction.md

When you develop an extension for Dynamic Content, it's important to ensure that your extension matches the general style of the Dynamic Content app and the built in UI controls in the content editing form.

This document provides some guidelines to help ensure a consistent experience for your users.

This guide focuses on the styling used by your extension. To find out more about developing extensions, follow the links below.

Useful links

Buttons

Source: components/buttons.md

Buttons can be used with <a> and <button> elements.

Types of buttons:

.ampx-button Default: can be used for links, toolbars or secondary buttons
.ampx-button .ampx-button__primary Primary: used for call to actions
.ampx-button .ampx-button__disabled Disabled: used to provide a visual cue to indicate an action is disabled

Example

<button class="ampx-button">Default</button>
<button class="ampx-button ampx-button__primary">Primary</button>
<button class="ampx-button ampx-button__disabled">Disabled</button>

.ampx-button {
  cursor: pointer;
  border: 0;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 0 10px;
  margin: 0 8px;
  background-color: transparent;
  transition: 0.3s;
  color: #333333;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 3px;
}

.ampx-button:hover {
  color: #1ab0f9;
}

.ampx-button__primary {
  background-color: #039be5;
  color: #fff;
}

.ampx-button__primary:hover {
  background-color: #1ab0f9;
  color: #fff;
}

.ampx-button__disabled:hover,
.ampx-button__disabled {
  background-color: #e5e5e5;
  color: #bfbfbf;
}

Inputs

Source: components/inputs.md

If your extension includes input controls, then you can follow our styling by specifying a solid border and by using color to indicate:

an invalid value has been entered
the item is disabled and cannot be used to input data

States:

.ampx-input__container Default: displays focus.
.ampx-input__container .ampx-input__container--error Error: indicates an error by setting the border color and showing error text
.ampx-input__container .ampx-input__container--disabled Disabled: makes the item slightly less visible to indicate that it is disabled and cannot be used to input data

An input item requires a title but the description is optional. It can be used with [type=text] and [type=number].

Example

<div class="ampx-input__container">
  <label class="ampx-input__label">Default number input</label>
  <input class="ampx-input" type="number"/>
  <label class="ampx-input__description">description</label>
</div>

<div class="ampx-input__container ampx-input__container--disabled">
  <label class="ampx-input__label">Input disabled</label>
  <input class="ampx-input" type="text"/>
  <label class="ampx-input__description">description</label>
</div>

<div class="ampx-input__container ampx-input__container--error">
  <label class="ampx-input__label">Input with error</label>
  <input class="ampx-input" type="text"/>
  <label class="ampx-input__description">description</label>
</div>

.ampx-input__container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 18px;
}

.ampx-input {
  outline: none;
  border: 0;
  border-bottom: 1px solid #808080;
  height: 30px;
  flex: 1;
  display: block;
  margin-top: 0;
  padding: 2px 2px 1px 2px;
  line-height: 26px;
  font-size: 14px;
  height: 30px;
  background: none;
  width: 100%;
}

.ampx-input__label,
.ampx-input__description {
  font-size: 11px;
  color: #808080;
}

.ampx-input__description {
  margin: 4px 0 0 0;
}

.ampx-input:focus {
  outline: none;
  border-bottom: 2px solid #039be5;
}

.ampx-input__container--error .ampx-input__description {
  color: #ff3366;
}

.ampx-input:invalid {
  border-color: #ff3366;
  box-shadow: none;
  -moz-box-shadow: none;
}

.ampx-input__container--error .ampx-input {
  border-color: #ff3366;
}

.ampx-input__container--disabled {
  opacity: 0.8;
  pointer-events: none;
}

Colors

Source: varibles/colours.md

Dynamic Content follows a blue color scheme #039be5 with bright green & pink for validation colors. Text, backgrounds and figures within the app use a range of black and greys. Colors used within the app are shown below. We have included some CSS variables for you to use in your own projects.

--color-primary: primarily be used for call to actions, and grabbing attention for an action.
--color-primary-light: normally used to accent the primary color in cases such as hover actions.
--color-valid-green: used to denote that an action has been successful or an item is valid.
--color-error-red: used mostly to indicate that items are invalid or that an action has failed

Usage is as follows:

:root {
  --color-primary: #039be5;
}

.example-class {
  background-color: var(--color-primary);
}

Example

:root {
  --color-primary: #039be5;
  --font-family: 'Roboto', sans-serif;
  --color-primary-light: #1ab0f9;
  --color-rolling-stone: #808080;
  --color-grey-disabled: #e5e5e5;
  --color-grey-background: #f5f5f5;
  --color-black-background: rgba(33,33,33,0.6);
  --color-grey-text-disabled: #bfbfbf;
  --color-valid-green: #7ed900;
  --color-error-red: #ff3366;
  --color-default-text: #333333;
  --color-black: #17202c;
  --color-white: #fff;
}

Typography

Source: varibles/typography.md

Dynamic Content uses Roboto and you can include it in your project as follows:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700&amp;display=swap">

The text color for standard text should be --color-default-black / #333333.

Usage in the content editing form:

.ampx-heading: the main header in an extension.
.ampx-subheading-large: the main heading in a sub list or section
.ampx-subheading: a heading in a sub list in a section
.ampx-body: used for copy.
.ampx-link: used for external links.
.ampx-label: used for adding contextual information to an entity.
.ampx-error: used for adding contextual information to an entity in an error state.

Example

.ampx-heading-extra-large {
  font-size: 56px;
  font-weight: 400;
}

.ampx-heading {
  font-size: 24px;
  font-weight: 400;
}

.ampx-subheading-large {
  font-size: 20px;
  font-weight: 500;
}

.ampx-subheading {
  font-size: 16px;
  font-weight: 400;
}

.ampx-body,
.ampx-link {
  font-size: 13px;
}

.ampx-link:hover {
  color: #1ab0f9;
  cursor: pointer;
}

.ampx-label,
.ampx-error {
  font-size: 11px;
  color: #808080;
}

.ampx-error {
  color: #ff3366;
}

Usage examples:

Example

.ampx-heading-extra-large {
  font-size: 56px;
  font-weight: 400;
}

.ampx-heading {
  font-size: 24px;
  font-weight: 400;
}

.ampx-subheading-large {
  font-size: 20px;
  font-weight: 500;
}

.ampx-subheading {
  font-size: 16px;
  font-weight: 400;
}

.ampx-body,
.ampx-link {
  font-size: 13px;
}

.ampx-link:hover {
  color: #1ab0f9;
  cursor: pointer;
}

.ampx-label,
.ampx-error {
  font-size: 11px;
  color: #808080;
}

.ampx-error {
  color: #ff3366;
}

Getting started

Useful links

Contents

Buttons

Example

Inputs

States:

Example

Colors

Usage is as follows:

Example

Typography

Usage in the content editing form:

Example

Usage examples:

Example

Extensions Style Guide

Introduction

Components

Variables