The layout you currently see is integrated in Framelix. It has a dark mode support (Click at the right top corner icon). The layout is self-made. It do not use external libraries like Bootstrap, Vue, or whatever. It's all bare-metal and is just made to serve the things that are really required. This reduce unused code and upgrade incompatibilites, as we are self responsible to keep the layout nice and robust.

Even if this layout is the default, you can make pages without any default layout and starting from scratch. This is often used to build a nice landing pages and frontend for the product and keep all specific data management in the default layout.

The Framelix - A rich featured, Docker ready, Full-Stack PHP Framework landing page is an example for this.

All the features in the sidebar are made and displayed with the default layout.

Web Components - Custom Tags

We have some custom web-components, all starting with <framelix- for the most common tasks, like displaying a button that do things on-click.

A list of all web-components an there available attributes is in Framelix/dev/web-types/web-types.json

Here are a few examples.

Alert Box

Alert boxes. A container with a specific background color, to stand out from normal textual content. For something interesting. Also it can be hidden by the user, if enabled.

Smart Buttons

A default button. When you click it, it will load a Modal Window with some backend response in it. But before, you must accept.

Smart Images

A special image tag with lazy loading by default and multiple size attributes to fit in the best matching image depending on the container size. If you do decrease your browser window size, you will notice that it does pick lower resolution images, while the original is 2MB large.

Icons (Microns)

Framelix have a small icons font integrated, for the most commonly used icons. It is small (7kb) compared to, for example, Material Icons (>150kb). The icon set we use is called  Microns and is also Open-Source. Thanks to the creator of this slick small icon set.

You can use that icons with our handy custom tag <framelix-icon icon="CODE"></framelix-icon>.

Here are all icons (164 in total)

Local times in frontend

A simple time tag, that display an internal DateTime in a user local time. You will probably notice the visible timezone difference, if you are not in a UTC timezone.