DEV Community

Moataz Aldawood
Moataz Aldawood

Posted on

This tool for all HTML template creators

#html #modeling #jsf

Hi,
I would introduce this tool for you. It is a brilliant and simple tool to create reusable Component/ Layouts / Page templates with Zero Dependencies. Use only HTML! and No server!

an-dalina

Simple Example:
Here we defined a USER-CARD component which receives 2 attributes: username, and role.

<an-component-def>
    <an-attributes>
        <!-- define components attributes that will be passed from the caller -->
        <an-attribute name="username" mandatory="true" />
        <an-attribute name="role" default-value="Member" />
    </an-attributes>

    <an-body>
        <!-- defining component code structure -->
        <div class="card">
            <h2>{{username}}</h2>
            <p>Role: {{role}}</p>
        </div>
    </an-body>
</an-component-def>
Enter fullscreen mode Exit fullscreen mode

calling the component and passing attributes values:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="andalina.js" defer> </script>
</head>
<body>

    <!-- call a component using src attribute -->
    <an-component src="user-card.html" username="Alice" role="Admin"/>

    <!-- call a component and use default value of role -->
    <an-component src="user-card.html" username="Bob"/>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This will be rendered in client side as:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="andalina.js" defer> </script>
</head>
<body>
    <div class="card">
        <h2>Alice</h2>
        <p>Role: Admin</p>
    </div>

    <div class="card">
        <h2>Bob</h2>
        <p>Role: Member</p>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Andalina provide 6 tags only. with them you can do everything without repeating your codes.

the tags are:
an-include: use it to include and inject any part of code. almost, use it for include list of CSS and JS files inside header.
an-component: use it to define component and reuse it anywhere.
an-layout: use it to define layout and reuse it anywhere
an-template: use it to render a predefined tempalte.

an-repeat: use it to repeat part of your code X times.
an-code: use it to inject Java, C#, Json, XML,.... or any code from external file. this help to keep your page clean.

Try it and let me know your feedback.
an-dalina

Top comments (0)