📌 About

This is a Vanilla JavaScript `Non-Autonomous Elements Collection` focused on behavior with a minimalistic approach. Each element has a single purpose, extends a Standard HTML Element and has a basic API.

📌 Examples & List

Click HERE to see the built-in elements list, examples and more.

📌 Getting Started

Add the `dist/{element-name}.js` element file to your page, or add `dist/all-elements.js ` to load all the elements. Now you are ready to go.

📌 Polyfill

🚧 Safari didn't implemented built-in elements. But there's no problem, you can find a polyfill on project's "vendor" directory. The polyfill was written by Andrea Giammarchi, and Here is an article about how it works.

📌 Usage

You must add the element HTML `tag` setting the `is` attribute to the desired element

Example:

    
        <div is="el-accordion" data-summary="Accordion Summary">
            <p>Hello World</p>
        </div>

Note the `is` attribute determine that the div will have the "accordion" behavior. That could be an image so, like ``. See the docs for a complete list and proper usage of each element

📌 Documentation

Click HERE to go to the github elements folder and click on the element folder that you want to read the doc.

Every element has its own README.

📌 Styling

As the elements are focused on Behavior, they have a simple and minimalistic built-in style. The idea is keep the user free to add its own visual identity. As the elements are add on the root context, there is no hassle to style it. You just add your styles. A cool thing about it is that you can also use the `[is]` attribute to target the elements on css. For example:

    [is="el-accordion"] {
        color: #ffffff;
        background-color: #000000;
    }

📌 Footprint

👾 Web Elements Collection by Felippe Regazio

If you want to buy me a coffee, make critics or just send me something, you can send an e-mail to:

felippe.moraes [at] zoho.com

---

Web Elements Collections is under GNU License