MVP.css — Minimalist stylesheet for HTML elements

  • By Andy Brewer
  • Last update: Jan 2, 2023
  • Comments: 11

MVP.css

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 plus a:active and button: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 use display: block and removed overflow styling
  • Updated font variable to font-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 use display: inline-block for better focus outlines on buttons
  • Added <label> styling for checkbox and radio elements
  • Added striped <table>

v1.4

  • Updated <pre> styling to use pre-line for better line breaks
  • Added hover styling to <details><summary> tags

v1.3

  • Updated <button> line-height and font to match <a><b> button styles
  • Added a --font variable
  • Added dropdown menus

v1.2

  • Added checkbox and radio styling for <input> fields
  • Added disabled and readonly 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

Showcase

To submit your site built with MVP.css create a pull request or an issue. For pull requests, please keep sites in alphabetical order.

Github

https://github.com/andybrewer/mvp/

Comments(11)

  • 1

    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?

  • 2

    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.

  • 3

    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.

  • 4

    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:

    Dropdowns before my change

    After:

    image

  • 5

    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:

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

  • 6

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

  • 7

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

  • 8

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

  • 9

    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

  • 10

    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 adding overflow-x: scroll allows users on small screens to horizontally scroll the full table (even when they get bigger than four columns).

  • 11

    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.