MVP.css - Minimalist stylesheet for HTML elements
source link: https://andybrewer.github.io/mvp/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Minimalist stylesheet for HTML elements
A minimalist stylesheet for HTML elements
No class names, no frameworks, just semantic HTML and you're done.
Download HTML ↗Download MVP.css (8kb) ↗
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
HTML and You're Done
MVP styles your root HTML elements, so you don't need to learn a new CSS framework or naming conventions.
Mobile-friendly UI
MVP is designed to look great on all browsers and devices out of the box for rapid prototyping.
It's like an amped up CSS reset that you can toss into any project to get decent styling.
MIT License
MVP is released under the permissive MIT license so you can freely use it however you'd like.
That means personal projects, commercial ventures, remixes and more are all welcome.
"By far the easiest stylesheet I've ever used. It integrates easily into one all of my startup projects."
- 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.
HTML Reference
For a showcase of each styled element, check out the quickstart template ↗.
MVP.css works with the following HTML elements:
<a>— text links<a><b>,<a><strong>— solid link buttons<a><em>,<a><i>— outlined link buttons
<article>— content area with normal styling<article><aside>— text callout
<blockquote>— quote callout<blockquote><footer>— quote attribution
<body>— default parent element<button>— form buttons<code>— inline code highlighting<details>— default expandable content section<details><summary>— expandable heading
<div>— unstyled element<figure>— image callouts<figure><figcaption>— image callout captions
<footer>— footer area<form>— small form area<form><input>— short input field<form><label>— form field labels<form><select>— dropdown options container<form><select><option>— dropdown option items
<form><textarea>— large input field
<header>— content area with centered styling<h1>,<h2>,<h3>,<h4>,<h5>,<h6>— headings<hr>— horizontal rule (divider)<main>— main content area<mark>— text highlighting<nav>— top navigation<nav><ul>— nav links container<nav><ul><li>— nav link items<nav><ul><li><ul>— nav dropdown container<nav><ul><li><ul><li>— nav dropdown link items
<ol>— numbered list container<ol><li>— numbered list items
<p>— paragraph tag<pre>— preformatted text<pre><code>— code block<pre><samp>— computer output block
<samp>— inline computer output<section>— content area for centered / special content<section><aside>— content card
<small>— smaller text<sup>— raised text (notification bubbles)<table>— data table<table><td>— data table cell<table><th>— data table header cell<table><thead>— data table header section<table><tr>— data table row
<ul>— unordered list container<ul><li>— unordered list item
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: #118bee;
--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: #118bee;
}
/* Lower in the CSS, or in a 2nd stylesheet */
:root {
--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 ↗.
What can you build with MVP.css?
Free ideas below ↓
A company you like:
A hobby you like:
Business Model:
Team Size:
Solo
Co-founders
Focus:
Price
Service
Features
Valuation:
Made by Andy Brewer ↗
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK