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/
<p>to be full width
- Uncommented dark mode
<section>to handle overflow content
<article><img>to with within their containers by default
- Added a showcase section to README
[hidden]styling to hide hidden elements
- Updated alternate table rows to use
--color-accentfor a more branded look
display: blockand removed
<samp>styling to have proper padding and recognize indented content
line-heightto be a number instead of a percentage
- Updated multi-word dropdown menu titles to render on a single line
- Added browser default
:focusstyling back in for better tabbed navigation
<a>styling to use
display: inline-blockfor better focus outlines on buttons
- Added striped
<pre>styling to use
pre-linefor better line breaks
- Added hover styling to
- Added a
- Added dropdown menus
- Updated code blocks to use
- Added light styling for
prefers-color-scheme: darkmedia query (commented out by default)
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.
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?
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
Meaning, how would I allow for either a
background-imageto span the entire width of the browser window (and height of the
In case it helps, here's a potential article that might explain better what I'm trying to accomplish.
Thanks in advance for all your help and creating this fantastic classless css bundle.
<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 the
class=cardis 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.
FORMdon't create newlines after their block.
Here is an example code
Notice how "The all-in-one" isn't on a newline from the h1 of "Todo Platform..."
Or how the
FORMis being smashed with he
Or notice how the
h2of "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
overflow-x: scrollallows 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.)
<pre>for block preformatted text instead, ideally supporting
<pre><samp>…</samp></pre>also for optimal semantic nuance.