A minimalist stylesheet for HTML elements

No class names, no frameworks, just semantic HTML and you're done.


Download HTML ↗Download MVP.css (10kb) ↗



PRO TIP Add this code to a new HTML file:

<link rel="stylesheet" href="https://unpkg.com/mvp.css">


Simple, reusable components

For a clean looking design that doesn't get in the way


Quote
"By far the easiest stylesheet I've ever used. It integrates easily into one all of my startup projects."
MVP.css

- Andy Brewer, Author of MVP.css

Flexibility without complexity

A few, clean styling options without all the bells and whistles

MVP.css No CSS Custom CSS
Mobile friendly
Works out of the box
Easy to customize
Only semantic HTML
No class names
Perfect for an MVP

A decent MVP in no time

More building and less designing with "set and forget" styling.

Stock photo
"Uber for X" brainstorming session

Docs

HTML Reference


MVP.css works with the following HTML elements:


Modifying the CSS variables

MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.

                
:root {
    --active-brightness: 0.85;
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color-accent: #118bee15;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-link: #118bee;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-table: #118bee;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}
                
            

Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file


Frequently Asked Questions

Why would I use this?

If you just want to launch already.

PRO TIP An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.

What skills will I need?

Mostly HTML, maybe a hint of CSS if you want to get fancy.

CSS        5

Design   0

HTML     100

Is there a minified version?

No, you don't need one for an MVP.

How can I improve my design?

Here are some helpful resources:

How do I handle a user's dark mode preference?

By default <html> will force users into light mode. By using <html color-mode="user"> MVP.css will respect the user's dark mode preferences. The original concept and additional tips can be found in this article: https://ryanfeigenbaum.com/dark-mode/

What if I don't like the default styles?

Most styles are editable through CSS variables. You can also add your own styles inline, at the end of MVP.css or in a new stylesheet.

PRO TIP If there are two conflicting CSS styles, the last one will take precedence.

                    
:root {
    --color-bg: #fff;
}

/* Lower in the CSS, or in a 2nd stylesheet */

:root {
    --color-bg: #000; /* This will take precedence */
}
                    
                
What if I still don't like it?

That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you feel slightly less embarrased about it.

👉 If you want a CSS framework with more features check out Bulma ↗ or Tailwind ↗.


Idea

What can you build with MVP.css?

Free ideas below ↓

MVP.css

Hello, I am a header of the modal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam.