MVP.css — Minimalist stylesheet for HTML elements
Out of the box CSS styling for HTML elements. No class names, no framework to learn.
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
Live demo: https://andybrewer.github.io/mvp/
Unpkg: https://unpkg.com/mvp.css
NPM: https://www.npmjs.com/package/mvp.css
Versions
v1.8
- Updated
<p>
to be full width - Added
--color-link
and--color-table
variables - Added
--active-brightness
variable plusa:active
andbutton:active
styles - Uncommented dark mode
v1.7
- Updated
<a>
to use--color
(primary color) - Updated
<section>
to handle overflow content - Updated
<section><img>
and<article><img>
to with within their containers by default - Added a showcase section to README
v1.6
- Added
[hidden]
styling to hide hidden elements - Updated alternate table rows to use
--color-accent
for a more branded look - Updated
<table>
to usedisplay: block
and removedoverflow
styling - Updated
font
variable tofont-family
- Updated
<pre>
,<code>
and<samp>
styling to have proper padding and recognize indented content - Updated
line-height
to be a number instead of a percentage - Updated multi-word dropdown menu titles to render on a single line
v1.5
- Added browser default
:focus
styling back in for better tabbed navigation - Updated
<a>
styling to usedisplay: inline-block
for better focus outlines on buttons - Added
<label>
styling forcheckbox
andradio
elements - Added striped
<table>
v1.4
- Updated
<pre>
styling to usepre-line
for better line breaks - Added hover styling to
<details><summary>
tags
v1.3
- Updated
<button>
line-height
andfont
to match<a><b>
button styles - Added a
--font
variable - Added dropdown menus
v1.2
- Added
checkbox
andradio
styling for<input>
fields - Added
disabled
andreadonly
styling
v1.1
- Updated code blocks to use
<pre><code>
instead of<samp>
- Added light styling for
<select>
fields - Added
<details>
and<summary>
tags - Added
prefers-color-scheme: dark
media query (commented out by default) - Updated
<table>
styling
Contributors
- andybrewer
- aembleton
- afeld
- cfv1984
- coolaj86
- ctp52
- DiemenDesign
- edlinkiii
- ericwbailey
- GrosSacASac
- hongsw
- irfaardy
- martin-v
- michaelp-coder
- nikolai-cc
- ruudud
- ScottGuthart
- simonw
- thedamon
Showcase
- https://bliss.js.org/
- http://nextvita.vercel.app/
- https://searchcode.com/
- https://www.thebearontheroof.com/
To submit your site built with MVP.css create a pull request or an issue. For pull requests, please keep sites in alphabetical order.
hr tag inside section tag is not visible (version 1.7.1)
<section> <hr style="background-color:black"> </section>
Use of style above is just to increase contrast of line from background. What to do?
Some elements not styled
Hi Andy, I noticed that some elements are not covered, as in styled. Is this intentional to leave that up to the browser, or you've just not gotten too yet?
I guess if others see this issue, and are wondering what elements are available I suggest http://html5doctor.com/ as an easy to lookup site for the elements.
Do you need more help to do these Andy? I'm happy to contribute as time permits to add to your great repo. I've seen other minimalist css repo's similar to this one, but I didn't like the styling they used.
In Sections, justify-content: center clips content on small screens
In sections, using
justify-content: center;
will clip content if your screen isn't wide enough.Andy, I'm not sure if this is necessarily an issue given the MVP ethos of this project but I just wanted to mention it.
It came up for me when placing a code block in a section and then loading up the page on my phone.
Make dropdowns look like other inputs
This PR makes it so that dropdowns look like every other input. It also includes a janky chevron image I'm very inclined to changing but which served well for illustrative purposes.
Any feedback is well received.
Before:
After:
Why is dark/light mode not part of the package?
I wanted to make my page have light mode, just like the MVP.css landing page - but was surprised to see that the dark/light mode toggle is some custom code on top of the page and not part of MVP.css itself.
It's a little misleading if the page has light and dark mode but that is nowhere in the docs and can't actually be reproduced 😄
The styles look simple enough:
so why aren't these just part of the CSS?
How to create a full-bleed for a section?
Hi
I love mvp.css and am not certain if this is the appropriate forum for this question but here I go...
How would I perform a "full bleed" for a
section
?Meaning, how would I allow for either a
background-color
orbackground-image
to span the entire width of the browser window (and height of thesection
)?In case it helps, here's a potential article that might explain better what I'm trying to accomplish.
https://www.joshwcomeau.com/css/full-bleed/
Thanks in advance for all your help and creating this fantastic classless css bundle.
Use of
Using
<aside>
for cards is problematic.<aside>
semantics are for optional extras, and tooling may be inclined to skip it altogether, or suggest to users that they can just skip it and go on to something else.<section><section>
would be tolerable to indicate this, if you’re really averse to theclass
attribute. Butclass=card
is quite warranted, I’d say.Headings & Forms don't create a newline after them
It appears that only h1 headings create a newline after them.
H2
-H6
&FORM
don't create newlines after their block.Here is an example code
https://codepen.io/michealp/pen/dyvNNzb
Notice how "The all-in-one" isn't on a newline from the h1 of "Todo Platform..."
Or how the
FORM
is being smashed with heP
content.Or notice how the
h2
of "An h2 headlines goes here on the page." doesn't create a newline and instead the link is on the same line.W3C validations and Responsive images
Hi there.. Love this. Nice and Simple. Thanks! I made some W3C validation corrections like alt tags, nested ULs etc. in the HTML files and also added a new class so we could get responsive images in figure without adding widths on the img element. Also added a changelog :). Consider a pull request? https://github.com/badcat/mvp
Fix tables on small (iPhone SE) screen sizes.
Lovely little project! Had a bit of trouble reading the table on my iPhone SE.
Displaying the table as
block
and addingoverflow-x: scroll
allows users on small screens to horizontally scroll the full table (even when they get bigger than four columns).is used incorrectly
<samp>
is an inline element with particular semantics. It should not be used for block preformatted text, because otherwise it will appear quite incorrectly if mvp.css doesn’t load. (Quite apart from any differences screen readers might perceive—I’m not sure if there are any.)Use
<pre>
for block preformatted text instead, ideally supporting<pre><code>…</code></pre>
and<pre><samp>…</samp></pre>
also for optimal semantic nuance.