---

Typography

The nova.css default font is Inter UI with Fira Code for the monospaced parts.

You can write some simple paragraphs but also some link to other pages, obviously all the typography common featured are styled: like the strong words or the fancy emphatized text. Even the underline case is provided. You know what I'm talking about!

• Thi is a simple unordered list
• So simple
• So smart!

and...

1. This is an ordered list
2. With numbers
3. Like the unordered
4. But with numbers

and last but not least

Description list item 1

Description list item 1.1

Description list item 2

Description list item 2.1

Buttons

We provide three different buttons:

Default button Outline button Ghost button

First of all you may use the .btn class. And you can add the btn-outline or the btn-ghost.

Code

This CSS is specialy made for code pages:

// Mixin for responsive
@mixin responsive($size) {
    @if $size == large {
        @media (min-width: $breakpoint) {
            @content;
        }
    } @else {
        @media (max-width: $breakpoint) {
            @content;
        }
    }
}

Card

This is a card:

Table

#	Name	Age	Location
1	Andrea	31	Rome
2	Tim	52	New York
3	Nick	19	London

Forms

Name

Age range 0-13 14-17 18-23 24+

Comment

Send a copy to yourself

Responsive

Nova has only one breakpoint at 768px: below this size we have a "small" device; above we have the "large" one.

Grid

Nova.css has a simple grid system... not much options but it works!

Every coloumn works with a width of 50% on large devices and with a 100% on small devices. Use these classes:

• .row to make a row to contain coloumns;
• .col to make a coloumn inside a row;
• .row.row-vertical-center to align coloumns vertically centered;

and... that's all folks!

---

Kudos

• https://raw.githack.com/
• https://milligram.io/
• https://kbrsh.github.io/wing/
• https://getbootstrap.com/