<section> <hr style="background-color:black"> </section>

Use of style above is just to increase contrast of line from background. What to do?

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

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:

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:

    <style>
        body.darkMode {
            --color: #0097fc;
            --color-accent: #0097fc4f;
            --color-bg: #333;
            --color-bg-secondary: #555;
            --color-link: #0097fc;
            --color-secondary: #e20de9;
            --color-secondary-accent: #e20de94f;
            --color-shadow: #bbbbbb20;
            --color-table: #0097fc;
            --color-text: #f7f7f7;
            --color-text-secondary: #aaa;
        }

        body.lightMode {
            --color: #118bee;
            --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;
        }
    </style>

so why aren't these just part of the CSS?

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 or background-image to span the entire width of the browser window (and height of the section)?

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.

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 the class attribute. But class=card is quite warranted, I’d say.

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 he P 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.

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

Lovely little project! Had a bit of trouble reading the table on my iPhone SE.

Displaying the table as block and adding overflow-x: scroll allows users on small screens to horizontally scroll the full table (even when they get bigger than four columns).

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