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">
"By far the easiest stylesheet I've ever used. It integrates easily intooneall of my startup projects."
| 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 | ✓ | ∅ | ∅ |
Docs
HTML Reference
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 {
--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-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: 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
Design
HTML
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, 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 ↓
from Hacker News https://ift.tt/3aiCYNQ
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.