EPiServer Front-End Style Guide

This style guide is a living document meant to assist both EPiServer and external developers explore our theme and get an overview of what classes and styles are available. It is meant to focus on the graphical and CSS aspects of the Sleek theme and as such will not contain Dojo implementation examples. If you feel there's anything missing, or find examples that do not work in your implementation - feel free to contact us at styleguide@episerver.com.

Typography

Headings

Headings are available in sizes h1 to h4, and they are also available as corresponding classes for use where h-elements are not appropriate

h1 heading

h2 heading

h3 heading

h4 heading

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>

Body

As long as the .Sleek class is applied to the <body> tag you should not have to add any CSS for default text formatting. If you need to apply styles outside of the .Sleek scope then use

color: #333;
font: 13px Verdana, Arial, Helvetica, sans-serif;

Text Colors

For explanative or supplemental strings you can use the class .epi-secondaryText or the variable @text-color-secondary.
For text on dark backgrounds we use the class .epi-invertedText .epi-text--secondary .epi-text--inverted

  • Normal body copy
  • Secondary text
    .epi-secondaryText
  • Inverted text
    .epi-invertedText

Links

Links are for the most part unstyled in order to minimize visual clutter in the interface, however this can not take precendent over the users understanding of what's clickable and not. If things feel unclear, you can re-style the link using the class .epi-visibleLink.

Additionally, there's the .epi-functionLink class that is meant to be used when triggering a function, for instance replacing a button with a link.

Colors

Color palettes have been designed to address a number of key areas: text legibility, use on light and dark backgrounds with different size elements, and to show visual feedback and hierarchy. These palettes are shared between EPiServer products, websites and marketing material.

Use these colors whenever possible. We know it isn't always applicable, and leave the use of color variations to the designers discretion.

All main palettes have a primary color and two darker/ligher stops. Please note that this section doesn't specify the exact use case for every color, but rather provides an overview. Specific instructions can be found under each section.

Primary Colors

Secondary Colors

Tertiary Colors

Recommended Gradients

Subtle gradients can be used to visualize depth and convey affordance. Gradients range from one color stop to the next. Remember to test gradients to make sure they work with the element background.

We encourage careful use of gradients and avoid overuse. Try to keep the design as clean and flat as possible.

Additional Colors

Light and dark greys for backgrounds

General

Buttons

Input Widgets

TabContainer

Menus

Dialog

Notifications

DnD

Icons

The baseline for EPiServer application icons is 16x16px in PNG 24 format. There are other formats as well but these are used infrequently and should not be viewed as standard.

You should primarily use our existing icons, but above all you need to make sure they still make sense to the user. If you can't find one that's applicable, then feel free to create a new one, in which case you should strictly adhere to the guidelines for each type of icon outlined below.

Action Icons

Action icons should be as simple as possible in their shape and structure. You should strive to use established symbols and patterns when creating new icons. Try to avoid overly complex or compound ideas.

All action icons are available in 16x16px, while only some are available in 24x24px versions as well.

Usage

Action icons are primarily used for buttons, context menus and other action elements. Note: They are not used in cases where the same type of icon is rendered repeatedly.

We encourage designers to combine icons and text if an icon is a bit complex. By doing this, users will learn to recognize icons and their functions.

Color palette

Action Icons 16x16px

Action Icons 24x24px


Object Icons

Object icons represent different object and item types within EPiServer applications. They are richer in detail and color, which makes them easier to distinguish. They boost the vividness, but at the same time increase visual clutter so use responsibility. All object icons are available in 16x16px and 32x32px versions.

Usage

Object icons are used in trees, lists, grids etc. where icons are rendered repeatedly.

Color palette

Use colors with similar hue and saturation levels (at designers discretion) when creating new object icons.

Object Icons 16x16px

Object Icons 32x32px


Notification Icons

Usage

Notification icons are commonly used in dialogs, toolbars, pop outs and other notification elements.

Color palette

Notification Icons 16x16px

Notification Icons 32x32px

Buttons

Buttons are used with some amount of caution in EPiServer's products. While we use them for clarity, we also try to keep them to a minimum to reduce visual clutter, and will often resort to using Visible Links instead.

Also note that the .is-disabled class is available for all types of buttons, but only sets transparency. If using Dojo then set disabled=true which will add the .dijitDisabled class actually disabling the button.

Standard buttons

  • .is-disabled
  • .epi-primary
  • .epi-primary.is-disabled
  • .epi-success
  • .epi-success.is-disabled
  • .epi-danger
  • .epi-danger.is-disabled
  • .epi-chromeless.epi-flat
  • .epi-chromeless.epi-flat.is-disabled
  • .epi-chromeless
  • .epi-chromeless.is-disabled

Toggle buttons

  • .epi-primary
  • .epi-success
  • .epi-danger
  • .epi-chromeless.epi-flat
  • .epi-chromeless

Drop Down buttons

  • Default button
  • Primary button
    .epi-primary
  • Success button
    .epi-success
  • Danger button
    .epi-danger
  • Flat button
    .epi-chromeless.epi-chromeless--with-arrow.epi-flat
  • Chromeless button
    .epi-chromeless.epi-chromeless--with-arrow

Combo buttons

  • Default button
  • Primary button
    .epi-primary
  • Success button
    .epi-success
  • Danger button
    .epi-danger
  • Flat button
    .epi-chromeless.epi-chromeless--with-arrow.epi-flat
  • Chromeless button
    .epi-chromeless.epi-chromeless--with-arrow

Visible Link

The default styling of links in the Sleek theme is the same as any body text, and in order to make them look like a classic link you use the .epi-visibleLink class. This is used along with .epi-chromeless on a dijit.Button or <button>.

  • epi-chromeless.epi-visibleLink

Grouped buttons

  • <div class="epi-groupedButtonContainer">

Input Elements

Text inputs

Text

  • Standard
  • With validation
  • Disabled
  • With placeholder

Textarea

  • Standard
  • Disabled
  • With placeholder
  • Auto height

Selects

Standard

  • Standard
  • Disabled

Combo Box

  • Standard
  • Disabled

Number Spinner

  • Standard
  • Disabled

Date Picker

  • Standard
  • Disabled

Time Picker

  • Standard
  • Disabled

Misc

Radio Buttons

  • Standard
  • Disabled

Checkboxes

  • Standard
  • Disabled

Tabs

  • Standard
    Lorem ipsum and all around...
    Lorem ipsum and all around - second...
    Lorem ipsum and all around - last...
  • Compact

    In cases where space is limited there is a compact class you can use to reduce tab size while still maintaining readibility.

    Lorem ipsum and all around...
    Lorem ipsum and all around - second...
    Lorem ipsum and all around - last...
    .epi-compactTabs
  • Overflow

    Overflowing tabs have the option to show either menu, slider arrows or both. We recommend using the menu as it provides the best overview and ease of navigation.

    Lorem ipsum and all around...
    Lorem ipsum and all around - second...
    Lorem ipsum and all around - last...

Lists

  • Standard

  • Auto height

    .epi-grid-height--auto
  • Set height

    .epi-grid-height--700
  • No data

  • Plain grid

    .epi-plain-grid
  • Chromeless grid

    .epi-chromeless

Grid modifiers

All modifiers are available for all grid types

.epi-grid-height--auto           // Sets the dgrids height to auto, giving you a growing grid without scrollbars
.epi-grid-height--300            // Sets the grids height to 300px
.epi-grid-height--700            // Sets the grids height to 700px
.epi-grid--with-border           // Adds a border around the entire grid
    

Column modifiers

All modifiers are available for all grid types

.epi-grid-column--centered       // Centers column text
.epi-grid-column--right          // Aligns column text to the right
.epi-grid-column--bold           // Bold column text

.epi-grid-column--positive       // Green text color
.epi-grid-column--negative       // Red text color


.epi-columnVeryNarrow            // Sets column width to 2.5em
.epi-columnNarrow                // Sets column width to 6em
.epi-columnWide                  // Sets column width to 25em
.epi-grid-column--snug           // Sets column width to 22px
.epi-grid-column--icon16x16      // Column width for 16x16 icons

.epi-grid--5                     // Sets column width to 5%
.epi-grid--10                    // Sets column width to 10%
.epi-grid--13                    // Sets column width to 12.5% or 1/8
.epi-grid--15                    // Sets column width to 15%
.epi-grid--20                    // Sets column width to 20%
.epi-grid--25                    // Sets column width to 25% or 1/4
.epi-grid--30                    // Sets column width to 30%
.epi-grid--33                    // Sets column width to 33.333% or 1/3
.epi-grid--35                    // Sets column width to 35%
.epi-grid--37                    // Sets column width to 37.5% or 3/8
.epi-grid--40                    // Sets column width to 40%
.epi-grid--45                    // Sets column width to 45%
.epi-grid--50                    // Sets column width to 50% or 1/2
.epi-grid--55                    // Sets column width to 55%
.epi-grid--60                    // Sets column width to 60%
.epi-grid--62                    // Sets column width to 62.5% or 5/8
.epi-grid--65                    // Sets column width to 65%
.epi-grid--66                    // Sets column width to 66.666% or 2/3
.epi-grid--70                    // Sets column width to 70%
.epi-grid--75                    // Sets column width to 75% or 3/4
.epi-grid--80                    // Sets column width to 80%
.epi-grid--85                    // Sets column width to 85%
.epi-grid--87                    // Sets column width to 87.5% or 7/8
.epi-grid--90                    // Sets column width to 90%
.epi-grid--95                    // Sets column width to 95%