ZindaCSS

List styles

list-unstyled

To remove bullets from the list: Add the class: list-unstyled
<ul class="list-unstyled">...</ul>

list-circle

<ul class="list-circle">...</ul>
Add the class: list-circle

list-alphabet-lower

<ul class="list-alphabet-lower">...</ul>
Add the class: list-alphabet-lower

list-alphabet-upper

<ul class="list-alphabet-upper">...</ul>
Add the class: list-alphabet-upper

list-roman

<ul class="list-roman">...</ul>
Add the class: list-roman

Aspect Ratio

Set either the height or width, and the aspect ratio will be maintained.

Class: square

Class: video

Opacity

To set the opacity / transparency of an object, use the opacity class.
An opacity of 100 means fully visible and 0 means invisible.

<div class="opacity-Your Number">TEST</div>
Example: An opacity of 50%.
<div class="opacity-50">TEST</div>

Boldness

You can add a boldness to your font using bold-Value between 1 and 10
Example:

<div class="bold-8">TEST</div>

Fonts

3 built in fonts are available:

  1. Class: font-serif
  2. Class: font-sans-serif
  3. Class: font-monospace
If you want to use fonts from Google Fonts or other sources, you can use <zindafont>
<zindafont url="PATH_TO_FONT_FILE" name="Name of font"></zindafont>
For example, to add the Robot font from Google:
  1. Go to the Roboto fonts tab, and click @import
  2. Take only the URL inside the brackets, for example: https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap
  3. Take note of the font name as well. This is very important
    4. <zindafont url="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" name="Roboto"></zindafont>
  4. This will reference the font in your CSS.
  5. To use this font, give the element a class: font-Name-Of-Your-Font
    Note: In case the font name has spaces, replace them with hyphen -.