ZindaCSS

Grouping in ZindaCSS

There are cases when you have elements with similar properties, such as those in a navigation bar or list

Adding these properties can be done in two ways

<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>
<li class="color-blue bg-red">This is a list item</li>

All list items have thte common properties 'color-blue' and 'bg-red'. After writing all this code, if I want to add another property like 'border-solid' to each list item, we have to rewrite it again. This is a time consuming process

Saving the valuable time of developers being our priority, we have created a solution to this called zindagroup

First create a new element of type zindagroup and give it an id and the classes.

<zindagroup id="RandomId" class="Some classes"></zindagroup>
The classes that this Zinda group element has is the classes you want to give to the object. The id represents the single one class.
Rewriting the above example:
<zindagroup id="listItem" class="color-blue bg-red"></zindagroup>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>
<li class="listItem">This is a list item</li>

In the above code, all the lists with the class 'listItem' will have the properties 'color-blue' and 'bg-red' in them automatically. This is the magic of 'zindagroup'.
Now, by simply adding 'border-solid' class to zindagroup, the 'border-solid' class is automatically added to all the list items (with class 'listItem').

This is such an easy process and saves us the hassle of rewriting everything incase we ever need to add or remove any classes.

The zinda group element is invisible, and it only holds the information of properties. The Class of the zindagroup has the properties that are applied to every item which has the class 'listItem'.
You can choose the class the list items will have based on the id.
This example uses lists (<li>), but you can use zindagroups for any elements such as buttons(<button>), paragraphs(<p>), links(<a>), menus(<nav>) etc.
You can also add properties like :hover, custom values etc. in zindagroups