A minimal css framework.

# Viewports

As part of the vision to keep this framework as minimal as possible, we decided to use only the following viewports:

# Colors

The following colors are used in vdlcss. All colors can be edited via CSS variables.

For different color schemes, there are also the following two classes: color-scheme and color-scheme-contrast. They can be used as a replacement for black and white color classes. If the current color scheme is dark, then color-scheme will be set to black and color-scheme-contrast to white. Vice versa for light color schemes.

# Text

There are only a handful of classes to style text.

# Border

To add borders and color them, use the following classes.

You can also change the width of a border with border-2.

Note: All colors are supported.

# Lists

Adding the unstyled class to an ul or ol will remove the default list styling.

<ul class="p-1 bg-white rounded black unstyled">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>

This makes it easy to create a horizontal list for a navigation by adding the row class as well.

<ul class="p-1 bg-white rounded black unstyled row">
    <li class="mr-1">Item 1</li>
    <li class="mr-1">Item 2</li>
    <li class="mr-1">Item 3</li>
    <li class="mr-1">Item 4</li>
</ul>

# Form and Buttons

# Shadow

Adding the shadow class to an element will add a shadow to the element.

# Container

The container class is used to center an element and restrict its width according to the current viewport. It also adds padding to the sides.

Note: For more information, take a look at the viewports.

# Grid

The grid class is used to arrange elements in a grid. It is a 12-column system, which you can easily utilize with the following classes.

You can also use column-start-x and column-end-x, row-start-x and row-end-x. x ranges from 1 to 13.

# Rows and columns

Rows and columns are used to position elements using flex without too much typing.

Classes like justify-start, justify-end, align-start, align-end and center can be used to arrange your elements within columns and rows.

Note: Some classes support the viewport prefixes: row, column, cell-X, justify-X and align-X.

# Positioning

For positioning the following classes are available: relative, absolute, fixed, sticky. You can position an absolute or fixed element within a relative container with top-X, bottom-X, left-X, right-X. X ranges from 0 to 5

# Display

You can change the display type of an element with block, inline-block and inline.

# Scroll and scrollbar

Scrolling can be allowed with either scroll-x, scroll-y or with snap, scroll-x-snap, scroll-y-snap. If you do not want any overflow, then use overflow-hidden.

Scrollbars are styled by default. To change the colors, take a look at the CSS variables.

To allow smooth scroll, add scroll-smooth to the wrapper element. For smooth scroll on the whole site, you will need to add it on the html tag.

# Padding and margin

There are quite a few classes for padding and margin. They all follow the same pattern, a prefix followed by a value.

The values always range from 0 to 5, with two extra values being 025 and 05.

Valid prefixes are p, m, pt, pr, pb, pl, mt, mr, mb and ml.

p always means padding and m means margin. t means top, r means right, b means bottom and l means left.

You can also use px and py for horizontal and vertical padding and mx and my for horizontal and vertical margin.

For margin there are also the extra classes ml-auto, mr-auto and mx-auto to set the margin to auto.

Note: All of the classes support the viewport prefixes, except for margin auto.

# Width and height

You can set width and height with the w-100, h-100, w-auto and h-auto classes.

Note: All of the classes support the viewport prefixes.

# Hover effects

There are a few options to add effects when hovering over an element.

• hover-border
• hover-shadow

You can also add small animations by adding hover-zoom or hover-lift to the wrapper:

# Dialogs

<dialog id="example-dialog">
    <h3>Example dialog</h3>
    <form method="dialog">
        <button class="m-0">Close</button>
    </form>
</dialog>

<script>
function openExampleDialog() {
    document.querySelector('#example-dialog').showModal();
}
</script>

<button
    class="mt-1 outline"
    onclick="openExampleDialog()">
    Show Dialog
</button>

# CSS variables

Below you can find a complete list of all integrated CSS variables.