CSS Built-Ins

  • CSS Properties.

  • CSS Classes (Catalog).

  • Effects.

  • Themes.

Core Modules

CSS Class

class epyk.core.css.styles.GrpCls.ClassPage(component: Optional[HtmlModel] = None, page: Optional[PageModel] = None)
property add_classes: Catalog

Property to get access to the catalog of CSS classes to be added to the HTML class tag component.

contenteditable() CssPageContentEditable

Set the border color of the editable content according to the selected theme.

Related Pages:

property css: Body

Property to the underlying CSS definition to be added to the style HTML tag of a component.

property css_class: CatalogDiv

The internal class used to put a custom Style to this object.

Only 1 CSS class can be added to an HTML object.

custom_class(css_attrs: dict, classname: Optional[str] = None, selector: Optional[str] = None, is_class: bool = True, important: bool = False) dict

This will create dynamic CSS class which will not be added to any component.

The class definition can then be reused in multiple components. The CSS style of the body can only be done using predefined classes or inline CSS.

TODO: Enable the important for nested css_attrs.


page.body.style.custom_class(css_attrs={"_attrs": {"fill": 'red'}}, classname='nvd3.nv-pie .nv-pie-title')
  • css_attrs – Nested dictionary with the different attributes

  • classname – Optional. The classname in the CSS definition

  • selector – Optional. The class selector (if it is not a classname using . but a strict definition)

  • is_class – Optional. Automatically transform the name to a CSS class definition by adding a dot

  • important – Optional. Specify if the style is important

property defaults

The Default CSS Attributes in the framework.

property define_classes: Catalog

Property to get access to the catalog of CSS classes to be loaded in the page.

Those classes will not be automatically added to any HTML tag and they need to be added manually.

fit_screen_height(margin_size: Optional[int] = None)

margin_size – Optional.


Returns the list of Internal and bespoke classes to be added to the class HTML table on the component.


Attach the predefined styles for the scrollbar and selection then return all the classes.

property globals: GlobalStyle

Reference for all the global setting in the page.

This should be changed in order to be the proxy to the Default CSS settings in the framework. Changing this should only impact the report default settings.

TODO: Extend to more than the font

property moz_selection: CssWebkitMozSelection

Selection predefined style (background color based on the selected theme).

Related Pages:

property scrollbar_webkit: CssWebkitScrollbar

Scrollbars predefined styles.

property scrollbar_webkit_thumb: CssWebkitScrollbarThumb

Scrollbars predefined styles.

property scrollbar_webkit_track

Scrollbars predefined styles.

property selection: CssWebkitSelection

Selection predefined style (background color based on the selected theme).

Related Pages:

CSS Style

class epyk.core.css.styles.classes.CssStyle.Style(page: PageModel, css_ovrs: Optional[dict] = None, selector_ovrs: Optional[dict] = None, html_id: Optional[str] = None, component: Optional[HtmlModel] = None)
property active: Data

Selects the active link.

Related Pages:

property after: Data

Insert something after the content of each <p> element.

Related Pages:

animation(name=None, attrs=None, duration=2, delay=None, iteration='infinite', timing_fnc=None, effect=None, fill_mode=None)

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS classes to another.


page.ui.button("Ok").style.css_class.animation('test', {
  "from": {"border-color": "white"},
  "to": {"border-color": "red"},

Related Pages:

  • effect – Effect Class.

  • name – String. Required. Defines the name of the animation.

  • attrs – String. Required. Percentage of the animation duration.

  • duration

  • delay

  • iteration

  • timing_fnc

  • fill_mode – String Specify the fill mode (whether the style should go back to its original position or

something else etc…

property before: Data

Insert something before the content of each <p> element.

Related Pages:

property checked: Data

Selects every checked <input> element.

Related Pages:

css(key: Union[str, dict], value: Optional[str] = None, important: bool = False, change: bool = True)

Add a CSS attribute to a class.

  • key (Union[str, dict]) – The CSS attribute.

  • value (str) – Optional. The CSS value.

  • important (bool) – Optional. The level of priority for this attribute.

  • change (bool) – Optional. A flag to specify the state of the CSS class.


Define for child classes to define some CSS attributes. This parent class is just there to define the structure of all the child ones, it is not used directly.

property disabled: Data

Selects every disabled <input> element.

Related Pages:

property empty: Data

Selects every <p> element that has no children (including text nodes).

Related Pages:

property enabled: Data

Selects every enabled <input> element.

Related Pages:

property focus: Data

Selects the input element which has focus.

Related Pages:

get_ref() str

Get the style class reference.

property has_changed: bool

Set an internal flag to specify if the class has changed from the creation in the framework.

If the state of the class has changed, the class will not be generic anymore so it will change the CSS class reference by adding the Component id in order to make it specific.

This is a trick in order to be able to change common CSS classes for a specific component without impacting the other ones in the page.

property hover: Data

Selects links on mouse over.

Related Pages:

property invalid: Data

Selects all input elements with an invalid value.

Related Pages:

keyframes(name: str, attrs: dict, effects=None, change: bool = True)

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.


page.style.keyframes("test", {
  "50%": {"transform": "scale(1.5, 1.5)", "opacity": 0},
  "99%": {"transform": "scale(0.001, 0.001)", "opacity": 0},
  "100%": {"transform": "scale(0.001, 0.001)", "opacity": 1},

Related Pages:

  • effects – Effect Class.

  • name (str) – Defines the name of the animation.

  • attrs (dict) – Percentage of the animation duration.

  • change (bool) – Optional. A flag to specify the state of the CSS class.

media(attrs: dict, rule=None, media_type=None, media_feature=None, change=True, this_class=False)

The @media is used in media queries to apply different styles for different media types/devices.


page.style.media({"body": {"background-color": "lightblue"}}, "only", "screen",
  {'and': [{'height': '100px'}, {'min-width': '600px'}]})

The first key of the attributes can be an Epyk html object.

Related Pages:

  • attrs (dict) – Percentage of the animation duration.

  • rule – String. Optional. not or only or and see documentation for more info.

  • media_type – String. Optional. the media to which the rule will need to be applied.

  • media_feature – String. Optional. Media features provide more specific details to media queries.

  • change – Boolean. Optional. A flag to specify the state of the CSS class.

  • this_class – Boolean. Optional. Specify if this should be applied to this class only.

transition(attribute: str, duration: int = 2, delay: Optional[int] = None, iteration=None, timing_fnc: Optional[str] = None)
  • attribute (str) –

  • duration (int) – Optional. The duration of the transition effect.

  • delay (int) – Optional. The time delay before starting the transition.

  • iteration (int) – Optional. The count of iteration.

  • timing_fnc (str) – Optional. The timing function from (“ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out”).

property valid: Data

Selects all input elements with a valid value.

Related Pages:

property visited: Data

Selects all visited links.

Related Pages:

property webkit_slider_thumb: Data


class epyk.core.css.Colors.HexColors