Show HN: MVP.css – Minimalist stylesheet for HTML elements

Might be fun to take all the w3 core styles rebuild them with modern CSS features. Maybe add some HTML5 elements to the test docs as well.

  (function() {
    const sheets = [
      'https://www.w3.org/StyleSheets/Core/Oldstyle.css',
      'https://www.w3.org/StyleSheets/Core/Modernist.css',
      'https://www.w3.org/StyleSheets/Core/Midnight.css',
      'https://www.w3.org/StyleSheets/Core/Ultramarine.css',
      'https://www.w3.org/StyleSheets/Core/Swiss.css',
      'https://www.w3.org/StyleSheets/Core/Chocolate.css',
      'https://www.w3.org/StyleSheets/Core/Traditional.css',
      'https://www.w3.org/StyleSheets/Core/Steely.css',
      './mvp.css',
    ];

    const div = document.createElement('div');
    const head = document.querySelector('head');
    sheets.forEach(url => {
      let button = document.createElement('button');
      button.onclick = () => {
        // Remove all stylesheets
        let stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
        stylesheets.forEach(el => el.parentNode.removeChild(el));

        // Insert our new sheet (<link rel="stylesheet" href="file.css">)
        let link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', url);
        head.appendChild(link);
      };

      button.innerText =
        url === './mvp.css'
          ? 'Original MVP.css'
          : url.replace('https://www.w3.org/StyleSheets/Core/', '');
      button.setAttribute('style', 'cursor: pointer');
      div.appendChild(button);
      div.appendChild(document.createTextNode(' '));
    });

    // Insert buttons into DOM
    document.body.insertAdjacentElement('afterbegin', div);
  })();

[1]: https://www.w3.org/StyleSheets/Core/preview.html

Now that of course depends heavily on what you consider to be minimally viable but there's generally not an expectation of professional design work.

If you're the kind of person who reached for bootstrap or material UI or other not semantic, boilerplate frameworks this might be appealing.

I can see how that doesn't come across the way I worded it though. I'll try to wordsmith that line. Thanks for the feedback!

That sentence made me consider Poe's Law for a while, considering the weird fruits HustleSpeak is bearing quite often. Going by the author's bio, I'm most likely wrong.

I wanted to solve a similar problem when creating sakura.css [0], but I decided to not implement it and keep it even simpler.

[0]: https://github.com/oxalorg/sakura

https://wmeredith.github.io/MercuryCSS/

EDIT: Ha! I should have checked first. It was added in Feb 2018 :)

However, it seriously looks like this could be pretty useful. I’m lazy, and the idea of just writing some semantic markup and have it look great out of the box is very appealing. Especially for a random toy project, where I want to put as little effort into the front end design as possible.

> you could consider using custom HTML tags to allow for inserting new tags in the mix for better positioning/layout, typography and more.

That might work for another stylesheet project, but I'm trying to keep MVP.css as "add and forget" as possible without having to learn anything unique.

I was even more surprised to see it in the HTML 4.01 spec, but if you look it makes more sense. I'll quote every mention of it here but the table of contents line:

    9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
    
    <!ENTITY % phrase "EM | STRONG | DFN | CODE |
                       SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
    
    SAMP:
        Designates sample output from programs, scripts, etc.

> The other phrase elements have particular significance in technical documents

HTML never ceases to amaze me. This also explains why I still prefer <pre> even though I can never remember why it's <pre> and not <code>.

Almost forgot the link: https://www.w3.org/TR/html401/struct/text.html#h-9.2.1

(I’ve filed https://github.com/andybrewer/mvp/issues/1 about this now.)

https://chrismorgan.info/blog/rust-fizzbuzz/ demonstrates use of <pre><code>, <pre><samp> and <code>, though not just <samp> or <pre>. (I use bare <pre> elsewhere on my site, but haven’t had cause to use bare <samp> yet.) What can I say? I’m a snob. Also there are subtle differences in style between the two. (I have <samp> be truly monospaced, because terminal output is more typically visually aligned, but <code> be only mostly monospaced, because it’s seldom visually aligned and I find Triplicate’s Poly variant generally nicer for code reading.)

Also potentially of interest to you: <output>. Plenty of other interesting semantic tags to use or not, as well. I like to use <var> carefully.

(this is a jest of course, you can have a fast and pleasing website, but pure HTML only gives one)

It's more to help you launch quickly so you can test an idea, like a hackathon, side project or MVP.

That said I have had to defend non-framework CSS to other front end developers in the wild, who insist that material design, bootstrap or whatever is worth writing all this CSS your self.