Elements

HTML elements are, if you don't already know, the building blocks of web pages.

Overview

Elements are simply object representations of HTML.

Elements

In Stellify, elements are categorised based upon their attributes, the following categories currently exist:

• Layout
• Input
• Form
• Svg
• Shape
• Media
• Frame

Super Elements

Stellify also has a number of what we call "Super Elements". These are elements that have a special purpose and are not part of the standard HTML specification. They are used to create more complex layouts. The Super Elements currently available are:

• Loop - renders elements by iterating over data
• Stream - streams elements and files from the server for rendering/ execution
• Motion - provides an API to allow use of MotionJS in your projects
• Transition - provides an API to allow use of VueJS Transitions
• Freestyle - provides an API to make use of styles rather than classes, useful for animation

Layouts

Stellify gives you absolute flexibility in how you structure your views. Here are some strategies for displaying content:

Dynamically accessing elements via route parameters

Elements can be accessed dynamically using the element function which, when used in Stellify, replaces the global view helper function in Laravel (outside of Stellify it will revert to the view helper function). This function takes a string as an argument, which is the name of the element you want to access. For example:

return element($name);
        

Once you have the element (and descendents should it have them) you can merge them into the elements data that is passed to the view. This allows you to dynamically access elements based on route parameters or other conditions.

Templates

Stellify also supports templates, which are a way to define reusable elements that can be used in multiple places. Templates are defined on the page you wish to request and then using the anchorName and anchorTarget attributes, you can reference them in your elements. For example, here is a page object that references a template:

{
    type: "layout",
    uuid: "3973cbe4-ad11-461a-b36a-edd91d979621",
    data: ["8003275d-c171-4297-b034-76ca9e4646a7"]
    name: "New Page",
    type: "web",
    method: "GET",
    public: true,
    templates: ["98f5acc0-51bc-435e-abc7-f332af02430d"],
}

Here is the element object that I wish to use as a template on the page above (notice its uuid is not in the data array for the page):

{
    type: "layout",
    tag: "div",
    uuid: "98f5acc0-51bc-435e-abc7-f332af02430d",
    parentRoute: "b00d4336-1898-4b10-b5f6-aa210ed97bc3",
    anchorName: "main",
    children: [
        "4efa4c77-5602-4372-8cf9-3419ada0cf6cm", 
        "71067e7b-7a61-43d0-97c5-1cb51c3ea262"
    ]
}

Now, if I wish to use this element as a template, or put another way, if I want this element to become the parent element that points to the existing page element, then all I need to do as add the attribute anchorTarget and reference the anchorName attribute value:

{
    type: "layout",
    tag: "div",
    uuid: "8003275d-c171-4297-b034-76ca9e4646a7",
    parentRoute: "3973cbe4-ad11-461a-b36a-edd91d979621",
    anchorTarget: "main"
}

Whilst this may seem a little complex, it's actually quite simple. All that happens now is:

• The page is requested.
• Stellify will notice the page includes a template, so it will fetch the template element (and any associated child elements).
• Stellify will then cycle through the elements and should it find an anchorTarget, it will switch the ids so that the root (template) element becomes the new parent.
• Stellify will then render the page as normal, only the template element is the parent of the page element.

You can review the full Elements API specification here.