Danvas

Danvas is a simple CSS Framework developed by Marvin Roßkothen. It is a utility first framework; so no components or any Bells and whistles.

At the moment there are for example shadows, margins / paddings, colors, borders and much more.

Currently there isn't an official documentation yet so we recommend you to use this framework only if you know how to find out the needed classes yourself by searching through the css files.

Below you can see a temporary, provisional mini-documentation with some of the most important classes:

Get started

You have two possible ways of getting started; either using a cdn or downloading the framework via GitHub or NPM

Get started using CDN

Simply implement the framework by linking the CDN in the head of your html file.

Get started by downloading the framework via GitHub or NPM

Via GitHub

Visit the GitHub Repository, download it and paste its content into your project folder. Then simply link it like you would any other css file.

Via NPM

Download the repository by typing npm install @mrvinrsk/danvas into your terminal, then move it into your project folder and link it like any other css file.

Spacing (Margin / Padding)

Margin

<div class="m-0"></div>
<div class="m-1"></div>
---------------------------
<div class="m-10"></div>
<div class="m-lg-20"></div>

Padding

<div class="p-0"></div>
<div class="p-1"></div>
---------------------------
<div class="p-10"></div>
<div class="p-lg-20"></div>

Display

<div class="d-none"></div>
<div class="d-block"></div>
<div class="d-flex"></div>
---------------------------
<div class="d-none d-lg-block"></div> <!-- Invisible on mobile -->
<div class="d-block d-lg-none"></div> <!-- Only visible on mobile -->

Colors

<div class="bg-red-10"></div>
<div class="bg-blue-120"></div>
---------------------------
<div class="bg-cyan-100 fg-pink-200">
    <p>This is a text.</p>
</div>