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
<dialog>— popup windows<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-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
