ECV COMPONENT

What it is:

It is a set of Web Componentes created using the Lit Element library, aiming to reuse, speed up, and standardize project development for the sector.

Case Study

For about a month, several studies and tests were carried out to find a way to streamline the development process for creating layouts. Various templates and web layout types were analyzed, and some were selected to be reconstructed using the ECV Component structure.

Why use ECV Component?

It became evident that with every new project created, everything had to be rebuilt, including recreating some components that had already been developed in past projects. To solve this problem, the ECV Component library was developed. The name originated from the abbreviated letters (E C V) which stand for Visual Componentization Elements — A name that highlights the creation of reusable visual components.

Installation

npm install ecv-component

Import

//importing the entire library
import 'ecv-component' 
// Or import a specific type
import type {BoxDecorationStyle} from 'ecv-component';

Using ECV Component

Basics of Layout Construction

You can create layouts using ECV Component, simply by adding the components to your project. However, it is recommended to use three specific components for this purpose:

• ECV Row - Layout with horizontal positioning.
• ECV Column - Layout with vertical positioning.
• ECV Grid - Grid layout.

Layout focusing on horizontal positioning

To create a layout with horizontal positioning, use the ECV Row component. See below the same scenario using just HTML structure and another using the ECV Component structure.

Example using HTML

    <style>
      /*CSS*/
      .container{
        display: flex;
      }

    </style>
    <!-- HTML -->
    <div class="container">
        <p>A</p>
        <p>B</p>
        <p>C</p>
    </div>

Example using ECV Component

    /*other code*/
    ...

    render(): TemplateResult {

        return html`
            <ecv-flex-row>
                <ecv-text>A</ecv-text>
                <ecv-text>B</ecv-text>
                <ecv-text>C</ecv-text>
            </ecv-flex-row>
        `;
    }
    

Documentation

The complete documentation, including usage examples, installation instructions, and detailed explanations of each component of the ECV Component library, is available on our official GitHub repository.

Access it here:

https://github.com/LeonardoLAraujo/ecv-component

Documentation Website

https://leonardolaraujo.github.io/ecv-component/

There you will find:

Step-by-step installation guide

Practical usage examples

Detailed explanation of each component

How to contribute to the project

Common troubleshooting

We highly recommend consulting the GitHub documentation to take full advantage of all the library's features.

I recorded building a small layout using ecv components

https://www.youtube.com/watch?v=tPBbeszlIXw

ECV Component — Simplifying layout creation with web components.