Going to MVP site:
https://andybrewer.github.io/mvp/

...the light/dark mode nav option doesn't change the mode of the site. The text changes from dark-->light and back again, but nothing else.

First of all, thank you and congrats this is Awesome!!!

Do you have any plans for creating an NPM release would make updating and tracking way easier than cloning/forking?

Thanks

• Shawn

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

Hi, I am trying make the input width same width as the card container. Looking at the example: https://andybrewer.github.io/mvp/mvp.html, the input width has size="20", but if I remove it, and add style="width: 100%;", it will not aligned correctly. Is there a quick way to do this?

Thanks!

You can present inputs, textareas and selects a bit nicer by having them take full width.

input,
label,
select,
textarea {
    display: block;
    font-size: inherit;
    max-width: var(--width-card-wide);
    width: 100%;
    box-sizing: border-box;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    width: auto;
}

I have noticed that in your last release, the code responsible for the dark theme is commented-out.

/*
@media (prefers-color-scheme: dark) {
    :root {
        --color: #0097fc;
        --color-accent: #0097fc4f;
        --color-bg: #333;
        --color-bg-secondary: #555;
        --color-secondary: #e20de9;
        --color-secondary-accent: #e20de94f;
        --color-shadow: #bbbbbb20;
        --color-text: #f7f7f7;
        --color-text-secondary: #aaa;
    }
}
*/

and your commit regarding this change does not explain why it was commented.

I started to use this CSS library and I had modify it in order to enable the dark theme, I was just wondering why it was not enabled by default.

Thanks.

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.

First of all, thank you for making this project.
While using the pre-tag, it did not work correctly.

<pre>
abc
def
</pre>

expect

abc
def

but, got
abcdef

i use this CSS:

select { width: 99.7%; background-color: white; height: 40px; }

PS: Very nice class-less css framework ;-)

Rationale

One of the most important part of any modern documentation are code examples. I understand this project don't need too much code on top of normal HTML tags, but most of the target users are in need or simple used to see some code examples to copy/paste, and maybe some ready made layouts/"component" to use.

Request

• Create a better "Examples" section by adding more use cases
• Add examples with basic css style, maybe inlined, maybe using <style> tags.
• Mimic some basic layouts and components (for example Card, Dropdown, Navbar, Sidebar, etc.) using MVP.css and maybe some basic CSS in a "copy/paste" way.

Proposal

I can contribute with some code examples.

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?

Thank you for this CSS!
I like the class-less demo page :)

Could you help me with two sentences how to create a Solarized version of it?
https://github.com/altercation/solarized

@andybrewer Your approach is smart and the HTML is a breeze to read. What a fresh change from the class-itis of frameworks like Tailwind!

Although the targeting is MVPs as you also mention on the site, it could possibly evolve to a very powerful HTML/CSS framework, far more than setting up a MVP :)

What I'd like to throw in as an idea is that in a future v2 of mvp.css you could consider using custom HTML tags to allow for inserting new tags in the mix for better positioning/layout, typography and more.

A simple example could be:

<m-grid>
    <m-cell></m-cell>
    <m-cell></m-cell>
    <m-cell></m-cell>
</m-grid>

(using "m" as the prefix for mvp.css and in order to be somewhat future-proof for possible HTML tag additions, but also web component/JS friendly).

Again, this is just an idea. If anyone's to learn 200 CSS classes to use something like Tailwind (et al), they might as well learn custom (prefixed) HTML tags that potentially make more sense.

And as for search engines, technically speaking it doesn't matter to them if you use custom HTML. SEO-wise, if one wants to be Google-friendly, it's either way preferable to use structured data over semantic HTML.

(I also posted this on HN but quickly realized it'd be better to post here...)

Have you considered using .editorconfig file?

It's small file which sets editor (and github) behaviour for easier contributing in project.

Like this ( https://github.com/airbnb/javascript/blob/master/.editorconfig ). Docs -> https://editorconfig.org/

Django generate forms with submit buttons represented as <input type="submit" value="submit">. It's my understanding that this is the semantic way to represent the submit button for a form, so I expected mvp.css to style these like a <button>.

Let’s say I want to have two or three small elements inline, such as

• cancel and submit
• created and expires date

what do you think about using fieldset to put those in an inline grid?

Double word pulldown menu items break at the end of the first word.
e.g.
Contact Us
becomes

Contact
Us

unless "white-space: nowrap;" is added the menu pulldown "nav ul li ul".

<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've come up with a way to produce a collapsible menu similar to how Bootstrap does <nav/> menus between large screen and smaller mobile device screens:
I was going to do a PR for this, but I figured you might want to modify it for your needs.
All good if you can't or don't want to use it, I just remember someone asking about responsiveness, and I just built this for my own needs to incorporate mvp.css as a complete theme for my CMS, and having to add some features which I'm trying to do along the mvp style with very, very minimum classes.

<nav role="mobile-menu">
  <input type="checkbox" id="mobile-menu">
  <label for="mobile-menu" onclick>Menu</label>
  <ul>
    <li>Menu Item</li>
  </ul>
</nav>

/* Mobile Responsive Menu */
nav[role="mobile-menu"] {
  display: flex;
}

nav[role="mobile-menu"] input[type=checkbox] {
  display: none;
}

nav[role="mobile-menu"] label {
  display: none;
  cursor: pointer;
  user-select: none;
}

nav[role="mobile-menu"] {
  position: relative;
  width: 100%;
}

nav[role="mobile-menu"] ul {
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

@media screen and (max-width: 44em) {
  nav[role="mobile-menu"] {
    display: block;
    align-items: flex-start;
  }

  nav[role="mobile-menu"] ul {
    display: none;
  }

  nav[role="mobile-menu"] label {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: medium;
    font-weight: 700;
    line-height: var(--line-height);
    margin: .75rem 0 .25rem 0;
    padding: .5rem 1rem;
    font-family: var(--font);
    background-color: var(--color);
    border: 2px solid var(--color);
    color: var(--color-bg);
  }

  nav[role="mobile-menu"] label:hover {
    cursor: pointer;
    filter: brightness(var(--hover-brightness));
  }

  nav[role="mobile-menu"] input[type=checkbox]:checked ~ ul {
    display: block;
    // styles to make an animated drop can be added here.
  }

  nav[role="mobile-menu"] input[type=checkbox]:checked ~ ul li {
    width: 100%;
  }
}

It would be great if this was part of a CDN like https://cdnjs.com. I think this then makes it available to online apps like CodePen that use their API.

They have a page in their docs about how to add a library here:
https://github.com/cdnjs/cdnjs/blob/master/CONTRIBUTING.md

I'd be happy to take a look if its anything you need help with.

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.

Long pages scroll the nav menu off the top of the page. Sometimes it is preferred to fix the menu at the top of page and let content scroll past/underneath it. The following additions to the "nav" entry will enable this:

  position: fixed;
  top: 0;
  z-index: 30;

It could be left as a comment in the css rather than imposing on all naive users. The "margin-bottom : 7rem" might be revised if the menu is fixed. Other page content must start below the height of the menu or the first line(s) will be hidden.

Hi

First of all thx for this project, its pretty cool. But know I have a stupid questin. You defined color as var. But why you are using HEX Colors with 8 signs. I thougth a color definition as hex could only be 6 sign.

Whats color should be (i.e.) color-accent? The Google Chrome Dev Tools show me as color transparent

Just like to point out that very wide tables arent working nicely with the auto margin-left and margin-right. The table creeps across the page the wider it is. Example below.

The role attribute allows to have semantic markup but with greater expressiveness. For example a button can be marked with role="link" in case we want to show a link but need a form to make a POST request. Also, the role="none" or role="presentation" can be used to remove the semantic meaning of an element.

See :

• https://w3c.github.io/using-aria/
• https://www.w3.org/TR/wai-aria/#roles_categorization

Hi all, how do you make header full width? Like container-fluid in Twitter Bootstrap..

Hi @andybrewer, I was curios if you had plans to add dropdowns to the nav menu?

In the example you’re using non-semantic labels that require IDs. Why not use them in the traditional fashion?

<label>Name: 
<input type="text"></label>

This also has the benefit of allowing you to observe Fitt’s Law and control the target size of the element perfectly.

In both Chrome and Firefox checkbox and radio inputs are strangely aligned relative to their labels.

Chrome 90:

Firefox 87:

I find this framework quite cool, but I really wished there was some showcase section on the landing page or readme. It would be interesting to see how it goes out in the wild and how people customize it 😉

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.

Don't know if bug or feature, but why it's there white-space: pre-line; on pre element?

(

With that i cannot format code snippet like this:

( () =>
{
	let counter = ( a, b ) =>
	{
		return a + b;
	}
} )();

and always got only:

( () =>
{
let counter = ( a, b ) =>
{
return a + b;
}
} )();

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.

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

How to avoid having a large empty space between header and main content ?

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.

Hi all,

Thank you for sharing this great code!!

Is there any known way to make IE11 work ? Polyfills maybe ?

Thank you!

Why not use Release feature of Github repo and create a release for this wonderful piece of work!

https://andybrewer.github.io/mvp/#docs

Under HTML Reference,
For a showcase of each styled element, check out the quickstart template ↗

where quickstart template ↗ leads to 404

Shouldn't this just mean Paypal?
I mean, is still a valid idea...

Hi Andy, while I was working on building a theme around mvp, I realised that styling links as buttons changes their role, I assume your aware that when elements are used in a manner not original to their specs that we can use the role="" attribute to indicate to screen readers, and validators what the presentation is intended for that element. So, I had a look at styling anchor's used as buttons using the role="button" attribute rather than the current styling using a b or a strong (and seeing as the buttons are already having their font-weight set to bold), they look exactly the same, also, using the role attribute helps indicate in the html markup exactly what that element is doing or being used for.

a[role="button"],
button {
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: medium;
    font-weight: bold;
    line-height: var(--line-height);
    margin: 1.5rem 0 0.5rem 0;
    padding: 1rem 2rem;
}

<a href="#" role="button"><i>Italic Link Button</i></a>
<a href="#" role="button">Bold Link Button &rarr;</a>

As you can see, we can do away with the extra classes, but still use them if we wish to change the text, and using the role attributes makes sure our markup is valid and represented correctly.

Anyway, some food for thought.

I also had an idea for my own purposes and needing things like for e.g. a jumbotron (ala Bootstrap), we can use the role attribute on a section element, with it's siblings being styled accordingly without the need to add classes, plus that would also indicate what that block of code does within the markup.

First off, thanks for mvp.css.

My a tag for link looks different in different browser. Normal in Safari, but in Firefox and Chrome, the link is elevated. So in the example below, the "here" is higher than the rest of the sentence if viewed in FF/Chrome.

Click here to read about mvp.css.

Any insight to what I did wrong? Thanks.

I was looking at this issue re: HEX8 colors. #28 I wished currentColor could be used somehow...

And as much as I think HEX8 colors are cool, I can never remember the correct hex for a specific alpha percentage. Just using .8 as the % is easier for me.

So what if the HEX8 color was swapped with a variable reference Base color for RGBA allowing the color to be set in one variable and then just change the alpha?

:root {
  /* #118BEE in decimal RGB converts to... 17, 139, 238 */
    --color-secondary-base: 17, 139, 238;

  /* Call color-secondary-base as a variable  inside the rbga value, set alpha to 1 */
    --color-secondary: rgba(var(--color-secondary-base), 1);

  /* Accent color is now tied back to the base color allowing a lighter alpha value*/
    --color-secondary-accent: rgba(var(--color-secondary-base), 0.15);
 }

Kinda like this... https://codepen.io/badcat/pen/MWapwMZ
Allowing the accent color to be coupled to the secondary etc...

They are newer additions in HTML5, and provide a collapsible element. The FAQs section of the demo page would be a good fit for such element.

Thank you for this handy library. I propose having hyperlinks underlined by default.

I can make a contribution if this is a welcomed feature.

I recently discovered [https://dohliam.github.io/dropin-minimal-css/] a site that displays a standard example web page using 140 selectable no-class CSS libraries. mvp is included in the top pull-down list and misbehaves when article tags are within section tags.

The fix in version 1.8 is to change the section definition from:
section { display: flex; flex-wrap: wrap; justify-content: var(--justify-important); }
to:
section { display: block; flex-wrap: wrap; justify-content: var(--justify-important); }
I can foresee that this change might have other effects not considered during my testing but it does make a major difference on this web page.

Hi - I like the idea of mvp.css. Thanks for the work so far!

I tried using it on a test site and found a problem with the default line-heights so I thought I would let you know.

Essentially the 150% height doesn't work consistently for all font sizes. If you change the font size to something larger the line height does not scale relative to the font. If you use unitless font sizes you will get the same effect but the text will not overlap.

Swapping from 150% to 1.5 achieves the same effect but makes the text readable everywhere.

No worries if you're not interested. Just thought I'd let you know in case.

Thank you for this amazing css I love it.

There is a small issue with the html hidden attribute. When used on a form it is override by display: flex.

Temporary fix: add
[hidden] {
display: none !important;
}
in CSS