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.
The style guide reflects the colors and styles introduced in CMS UI 11.21.0. You can find an older version here.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>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>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: #01062B;
font: 14px Barlow, sans-serif;For explanative or supplemental strings you can use the class .epi-secondaryText or the variable @text-color-secondary.
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.
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.
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 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.
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.
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.
Object icons are used in trees, lists, grids etc. where icons are rendered repeatedly.
Use colors with similar hue and saturation levels (at designers discretion) when creating new object icons.
Notification icons are commonly used in dialogs, toolbars, pop outs and other notification elements.
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
.epi-grid--no-alternating-rows // Standard grid except no alternating row colors
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%