136 | Docs
142 |HTML Reference
143 | 146 |147 |
MVP.css works with the following HTML elements:
148 |-
149 |
-
150 |
<a>— text links 151 |-
152 |
<a><b>,<a><strong>— solid link buttons
153 | <a><em>,<a><i>— outlined link buttons
154 |
156 | -
157 |
<article>— content area with normal styling 158 |-
159 |
<article><aside>— text callout
160 |
162 | -
163 |
<blockquote>— quote callout 164 |-
165 |
<blockquote><footer>— quote attribution
166 |
168 | <body>— default parent element
169 | <button>— form buttons
170 | <code>— inline code highlighting
171 | -
172 |
<details>— default expandable content section 173 |-
174 |
<details><summary>— expandable heading
175 |
177 | <dialog>— popup windows
178 | <div>— unstyled element
179 | -
180 |
<figure>— image callouts 181 |-
182 |
<figure><figcaption>— image callout captions
183 |
185 | <footer>— footer area
186 | -
187 |
<form>— small form area 188 |-
189 |
<form><input>— short input field
190 | <form><label>— form field labels
191 | -
192 |
<form><select>— dropdown options container 193 |-
194 |
<form><select><option>— dropdown option items
195 |
197 | <form><textarea>— large input field
198 |
200 | <header>— content area with centered styling
201 | <h1>,<h2>,<h3>,<h4>,<h5>,<h6>— headings
202 | <hr>— horizontal rule (divider)
203 | <main>— main content area
204 | <mark>— text highlighting
205 | -
206 |
<nav>— top navigation 207 |-
208 |
<nav><ul>— nav links container
209 | <nav><ul><li>— nav link items
210 | <nav><ul><li><ul>— nav dropdown container
211 | <nav><ul><li><ul><li>— nav dropdown link items
212 |
214 | -
215 |
<ol>— numbered list container 216 |-
217 |
<ol><li>— numbered list items
218 |
220 | <p>— paragraph tag
221 | -
222 |
<pre>— preformatted text 223 |-
224 |
<pre><code>— code block
225 | <pre><samp>— computer output block
226 |
228 | <samp>— inline computer output
229 | -
230 |
<section>— content area for centered / special content 231 |-
232 |
<section><aside>— content card
233 |
235 | <small>— smaller text
236 | <sup>— raised text (notification bubbles)
237 | -
238 |
<table>— data table 239 |-
240 |
<table><td>— data table cell
241 | <table><th>— data table header cell
242 | <table><thead>— data table header section
243 | <table><tr>— data table row
244 |
246 | -
247 |
<ul>— unordered list container 248 |-
249 |
<ul><li>— unordered list item
250 |
252 |
254 |
Modifying the CSS variables
255 |MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.
256 |
257 |
258 | :root {
259 | --active-brightness: 0.85;
260 | --border-radius: 5px;
261 | --box-shadow: 2px 2px 10px;
262 | --color-accent: #118bee15;
263 | --color-bg: #fff;
264 | --color-bg-secondary: #e9e9e9;
265 | --color-link: #118bee;
266 | --color-secondary: #920de9;
267 | --color-secondary-accent: #920de90b;
268 | --color-shadow: #f4f4f4;
269 | --color-table: #118bee;
270 | --color-text: #000;
271 | --color-text-secondary: #999;
272 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
273 | --hover-brightness: 1.2;
274 | --justify-important: center;
275 | --justify-normal: left;
276 | --line-height: 1.5;
277 | --width-card: 285px;
278 | --width-card-medium: 460px;
279 | --width-card-wide: 800px;
280 | --width-content: 1080px;
281 | }
282 |
283 |
284 |
285 | Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file
359 |