Web frameworks

Multiple external web frameworks with predefined components are being integrated to Epyk. It is possible to extend this list and to create your own wrapper to your preferred Web library. To do so please follow the architecture guidelines: How to add another web framework.

Web framework architecture

Warning

This part of the framework is still work in progress so feel free to help.

Community

This is a collaborative and open source framework so please do not hesitate to propose changes or extend the implementation using PR. Code is fully available in Github ! More details on the way to contribute using PR

Jquery UI

Jquery and Jquery UI are fully integrated to the core components. It means that those libraries will be added automatically when they are needed by a component.

Jquery UI Components

Official website

ToastUI

Use TOAST UI to Make Your Web Delicious!. JavaScript UI library and free open source project constantly managed by NHN.

TOAST Components

Official website

Bootstrap

Build fast, responsive sites with Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Bootstrap Components

Official website

Material Design UI

Design. Create intuitive and beautiful products with Material Design.

Material Design Components

Official website

Clarity

Work in progress (depend on the Angular integration)

Evergreen

Work in progress (depend on the Angular integration)

Common Interface

class epyk.interfaces.Interface.WebComponents(page: PageModel)
property bs: Components

Add the entire Bootstrap framework as a dependency to the framework. This will enable more components to the framework.

More details on the Bootstrap property page

..note:

This will be using bootstrap 5.

Usage:

icon = page.web.bs.icons.danger()
property clr: Components

Clarity is a scalable, customizable, open source design system bolstered by the people that build with it, the people we build it for, and the community that makes us who we are.

Related Pages:

Usage:

property evr: Components

Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.

Related Pages:

property ftw: Components

Simple components that focus on appearance and styling while showing the visual language of Office.

Usage:

page.web.ftw.check(label="Test Checkbox")
page.web.ftw.check(label="Test Checkbox 2")
page.web.ftw.buttons.small("Test Checkbox 2")
page.web.ftw.icon("add")
page.web.ftw.toggle(True)
page.web.ftw.loading("add", options={"large": True})
select = page.web.ftw.lists.select(selected="value 2")
data = ["value 1", "value 2", "value 3"]
select.data = select.parsers.from_list(data)
property jqui: Components

JQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

More details on the Jquery property page

Related Pages:

property mdc: Components

Set the material components entry point. This will be available in the same way than ui is available for anything else in the core framework.

More details on the Bootstrap property page

Usage:

Related Pages:

Returns

Python HTML object

property std: Components

The internal components.

property tui: Components

Add the entire TOAST UI framework as a dependency to the framework. This will enable more components to the framework.

Related Pages:

Usage:

dt = page.web.tui.date()
cal = page.web.tui.calendar()