Notion.css

Notion.css is a minimal CSS framework that resembles the aesthetic of the note taking app, Notion

You can use Notion.css if you're making a simple website and don't want to spend much time in styling, yet have a pleasing design. Heck, you can even use it to bring in all the elements you use in your Notion page to your HTML

GitHub

Installation

Import the CSS files by pasting this into the <head> of your HTML


         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fillerink/notion.css@0.1.0/src/notion.css">

Components

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Subtitles

You can add subtitles by adding the subtitle class to your headings like so


    <h1 class="subtitle">This is a subtitle</h1>


    <h2 class="subtitle">This is a smaller subtitle</h2>

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5

Subtitle 6

Typography

Welcome to Fight Club. The first rule of Fight Club is: you do not talk about Fight Club. The second rule of Fight Club is: you DO NOT talk about Fight Club! Third rule of Fight Club: if someone yells “stop!”, goes limp, or taps out, the fight is over. Fourth rule: only two guys to a fight. Fifth rule: one fight at a time, fellas. Sixth rule: the fights are bare knuckle. No shirt, no shoes, no weapons. Seventh rule: fights will go on as long as they have to. And the eighth and final rule: if this is your first time at Fight Club, you have to fight.

Man, I see in fight club the strongest and smartest men who’ve ever lived. I see all this potential, and I see squandering. God damn it, an entire generation pumping gas, waiting tables; slaves with white collars. Advertising has us chasing cars and clothes, working jobs we hate so we can buy shit we don’t need. We’re the middle children of history, man. No purpose or place. We have no Great War. No Great Depression. Our Great War’s a spiritual war… our Great Depression is our lives. We’ve all been raised on television to believe that one day we’d all be millionaires, and movie gods, and rock stars. But we won’t. And we’re slowly learning that fact. And we’re very, very pissed off.

This is some strong text, this is normal, this is bold, and this is in italics! And, here's a link.

Buttons

Here's a regular button


        <button>Click Me!</button>

And here's a primary button


            <button class="primary">Click Me!</button>

Form Elements

Here's a form

Code

You can add blocks of code in your page like so

 
        
    <pre> 

        <code> 

             // your code here
        </code>
    </pre>

Navigation

Put up a navigation bar easily
(Here the navbar is only wide as the body of the HTML of this page is)

 
    
    <div class="nav"> 
         <div class="nav-left">
         
         </div>
         <div class="nav-right">
               <a class="active" href="#home"> Home </a> 
               <a href="#news"> News </a>
               <a href="#contact"> Contact </a>
               <a href="#about"> About </a>
         </div>
    </div>

Home News Contact About

The Notion navbar recreated with Notion.css

Notion

Product Download Enterprise Resources

Others

Here's a list

With
some
list
items

This is what a normal HTML table looks like with Notion.css

Name	Age	Coolness
Vegeta	48	> 9000
Elon Musk	49	1000
Sreeram	21	100

Images

Here's a cute pic of a cat while we're at it

Quotes

You can add blockquotes in your page like so

 
        
    <blockquote>
      I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere.
      — Anakin Skywalker 
    </blockquote>

I don't like sand. It's coarse, and rough, and irritating, and it gets everywhere
— Anakin Skywalker

Inspiration

Blocks.css by @thesephist
Water.css by @kognise

Projects using Notion.css

Messier Dex, an encyclopedia and viewing guide for the Messier Objects

Notion.css is made by @fillerInk.