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: -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.
