Working with EasyStyle CSS

Quickly target HTML without side effects using CSS classes starting with es_ like:

es_portal,  es_list_row,  es_item_desc, etc.

Vueocity's HTML includes a rich mix of these EasyStyle classes for application states, responsive sizing, selecting structural elements, certain pages, specific content items, etc. 

For a few tweaks, use Add CSS and HTML. Or create a new look with Modify themes style, color, and font options. If we are missing an EasyStyle class that would make your life easier, just let us know!

Global Classes

Prefix any CSS selectors with the following classes to target:

.es_user_authorized / anonymous   The user is logged in / out

.es_width_small / medium / large / xlarge   Updates with screen width.

.es_height_small / medium / large   Updates with screen height.

.es_horizontal / .es_vertical   Updates with responsive flex layouts.

.es_portal / .es_page  Content portal vs. non-portal pages like login, etc.

.es_user_staff / customer   The user has staff vs. customer privileges

.es_page_staff / customer  Staff vs. customer facing page

.es_slug_wxyz   Target elements only on specific non-portal pages by url

Content Classes

Target classes of content or specific content items with:

.es_locked / .es_available   Does the user have a current license for the item.

.es_started / .es_completed   Progress for completable items.

.es_accessed   Progress for items that are not completable.

.es_coming_soon   Items marked as 'coming soon'.

.es_id_12345   A unique, stable tag for each individual content item.

.es_code_xyz   The catalog code entered for one or more item(s)

.es_content_xyz   The type of content the element represents.

.es_action_xyz   The access action for the item (view, download, new tab).

.es_workflow_xyz   The workflow of the item (e.g., highlight beta items). 

Theme Classes

Behavior-driven classes (like conditional highlighting) and other global classes used to customize theme behavior are prefixed with es_theme:

.es_theme_default   The default color, font, layout state for an element.

.es_theme_highlight   The add highlighting (usually due to hover/focus/touch)

.es_theme_active   A selected item (like current tab).

.es_theme_overlay   Areas shown above other elements (usually over background images).

.es_theme_panel   Elements that wrap content display (usually used to adjust spacing).

Internal Platform Classes

You may notice CSS classes starting with mp_ like:

mp_flex  mp_staff_control

These are Vueocity's Mesa Platform classes used for internal Javascript behavior and styling. Targeting these classes may cause side effects; use an EasyStyle class if possible.

All Vueocity CSS classes are prefixed with es or mp to avoid collision with your names.