A minimalist stylesheet for HTML elements

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


HTML Template ↗MVP.css (7kb) ↗


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 {
  --border-radius: 5px;
  --box-shadow: 2px 2px 10px;
  --color: #118bee;
  --color-accent: #118bee0b;
  --color-bg: #fff;
  --color-bg-secondary: #e9e9e9;
  --color-secondary: #920de9;
  --color-secondary-accent: #920de90b;
  --color-shadow: #f4f4f4;
  --color-text: #000;
  --color-text-secondary: #999;
  --font: -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: 150%;
  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
}

Custom styles can be added below the /* Custom styles */ comment at the end of the 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:

What if I don't like the default styles?

Most styles are editable through CSS variables. You can also add your own styles inline or at the end of the stylesheet.

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

                    
                    body {
  color: var(--color-text); /* This will get ignored. */
}

/* Custom styles */

body {
  color: green; /* 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
Solo Co-founders Price Service Features