Mvp.css – build your landing page with only semantic HTML | Hacker News Reader

Mvp.css – build your landing page with only semantic HTML

andybrewer.github.io

319 pointsrahimnathwani82 comments

The trouble with “only semantic HTML” (read: “HTML with no class attributes ever”) is when you try to represent things for which there are no semantic elements defined. I then observe that most projects like this then end up abusing other elements. In this case, the use of <aside> is unequivocally wrong, but https://github.com/andybrewer/mvp/issues/2 was closed in the end simply because there was no way to get what was desired without using class or similar. Other things that are also unequivocally semantically incorrect are the button links (a > b, a > i, a > strong, a > em), and raised text notification bubbles (sup).

The first rule of web accessibility is that doing nothing is better than doing the wrong thing. https://www.w3.org/TR/wai-aria-practices/#no_aria_better_bad... explains a bit.

There’s a reason why the class attribute exists. You can also validly use custom elements and attributes, which are approximately any name containing a -.

When I think of semantic html, I think of lots of classes, but they describe the content instead of the presentation. Maybe I am thinking of an out of date defintion?

No, I share your sentiment and I work in the accessibility space myself. Presentation should always follow the content, presentation is always secondary and it needs to be flexible.

In cases of (color)blindness, vision loss or cataract, deafness, vertigo etc. the presentation needs to adapt to the user needs while ideally presenting the same content.

With OP's stylesheet it is possible to create a visual representation that is flexible and robust, but the classlessness nature makes it impossible to support certain type of content altogether.

The elements defined in HTML have meanings. That's the semantics. If you use the elements according to the meanings defined in the standard, then your markup is semantic. Whether you use lots of classes is neither here nor there, although how you use the classes matters.

Honestly I'd still rather start out with a really good classless theme and then start making things like custom buttons, containers of various types, dropdowns, modals, etc.

Exactly. You can still use classes all you want. But by including this css you essentially just get good looking defaults.

This was definitely built to solve a very specific problem in a very specific way, I think you're asking too much of it.

It's just a handy shortcut for building a landing page in like 20 minutes or sprucing up your "haven't gotten around to writing the CSS yet" web app so you can kick it out the door.

The point is that the marketing is false. This CSS framework forces to you to abuse HTML semantics if you want to use it, which is exactly what it claims it doesn't do.

What's extra frustrating is that it would be so easy to fix, by just adding a few classes. But they wanted to be "semantic", so they forced their users to be unsemantic.

Or they could have just used arbitrary elements, like <myelement>. Folks forget that this is valid HTML, and it’s just treated as a div.

I don't think they forgot, because it was never true. It needs a dash `-` in it.

https://html.spec.whatwg.org/#valid-custom-element-name

It needs them now, but it wasn't always the case. In html5-20121025 User agents must treat elements and attributes that they do not understand as semantically neutral.

It was also in the grey area in HTML4.01 spec, note B.1 provides for user agents rendering any unknown elements.

Semantically neutral yes, but they are not divs -- they're "unknown elements", which have more annoying behavior (similar to pseudoelements from memory)

I think that's right. They start out life as inline-block elements.

A landing page with huge accessibility issues

I wonder how you justify your use of the word "huge" here, given that it'll most likely be far better than most landing pages out there and not everyone will use the problematic components.

I think this comment makes a pretty clear case for it:

https://news.ycombinator.com/item?id=25168303

For me personally, the accessibility issues would be with elements used out of their usual role.

For example: When I, blessed with being sighted at this time, but without a mouse, ask my browser to identify the clickable/actionable elements on the page, it mis-identifies both unclickable elements as clickable, and clickable elements as unclickable.

I would call that a serious usability issue. And if I was not sighted, using a screen-reader, I would be very confused indeed by this landing page.

I agree that whether this qualifies as a "huge" usability issue is indeed a matter of opinion. I would certainly argue that it is a huge usability issue.

Using the software you've got, would using role attributes be a sufficient workaround?

Accessibility is not something I know much about (I mostly work backend). What's the issue with this type of approach? I was tempted to use it as a starting point for a little side project, but Id rather not start with something with inherent accessibility issues.

The biggest issue I noticed right away is that it uses elements outside of their traditional use cases.

User agents rely on ``a`` elements being clickable, and ``span`` elements not being clickable, for example, to determine which actions to present to the user.

When you use them outside of these use cases, the user agent has to do extra work to figure out whether something is actionable or not, and not all can do it adequately.

Thanks, that makes sense.

The light grey text under "MVP.css works with the following HTML elements:" surely fails (WCAG2).

`section` has an `h2`, but no `h1` for some reason. Other failures like this.

Other than that what's wrong?

Is a lack of H1 a dock against accessibility?

I think it would be, because a screen reader will try to call-out the topic of the document accurately and quickly. You don't want a user to have to dig through elements to find the real title of the page they're on.

hm I've worked at plenty of places that touted accessibility, and we would often leave out h1 on a lander page (there might be a few h2 instead as the highest ranking headers)

I don't think the use of classes is forbidden in any way. This is a just a drop in css file to quickly style an HTML document, if you think it's a good idea to style some more, just add classes.

It doesn't forbid classes explicitly but website mentions "No class names" twice which doesn't portray them in a very good light.

It means that you don't have to use 'mb-1--success-large' and things like that, but if @chrismorgan's point is that they've just swapped that for meanings encoded in element names rather than class names (in many cases not the usual meaning) then I think I agree.

I agree that "No class names" may me interpreted as "you're not allowed to use classes" but the main idea is to have a CSS file that is very loosely coupled with your HTML that you can just drop in your project and style it quickly. You can add classes at any time. "No class names" may be correctly interpreted as "loosely coupled". I don't think it doesn't portray them in a good light.

I dont understand your objection. This is a lightweight starting framework aimed at rapid prototyping, there is nothing stopping you from adding your own classes to refine or override as necessary.

I agree that semantic only would be a big limitation in production, but that's always been the chasm of web dev: taking your hacky "bash it together" code and massaging it into something durable, without wasting time over engineering everything from day 1.

My issue with it is that it’s saying that only semantic HTML will be used in mvp.css. Thus, divs and spans and class attributes are forbidden (again, in mvp.css). I am not finding fault with semantic HTML elements (I choose my own markup very carefully), but with this abuse of semantic HTML elements—so that the touted “semantic HTML” is actually “HTML with incorrect (or at best convoluted and dubious) semantics”.

If you’re wanting a lightweight starting point for rapid prototyping, <div class="card"> is much nicer and more obvious than sticking an <aside> inside… hang on, was it an <article> or a <section> that I had to put it inside to make it a card?

So largely I’m saying that for something targeting the space mvp.css is targeting, rabidly avoiding classes is a bizarre and pretty much indefensible choice.

I built a site using this framework recently and that's exactly what I did.

Copied the css file into my source

    s/aside/\.card/g

Tada!

I viewed mvp.css as a starting point that'll get something looking nice enough on top of my raw html, and then I can (did) make tweaks from there.

The point of a no-class framework is not to have zero classes in your html. The point is to have something that looks good with almost no effort. Obviously if you want to further customize, you're going to have to either introduce classes or violate semantics.

They should really be using <section><div> for those cards. They're divisions in the content - there's no inherent semantic meaning to them being styled to look like cards, so they should be using the 'this has no semantic meaning' <div> tag.

> There’s a reason why the class attribute exists. You can also validly use custom elements and attributes

To hammer this home - there is nothing bad about divs when it comes to accessability which, to be honest, is the only concern that "semantic html" should be about.

> there is nothing bad about divs when it comes to accessability [sic]

There certainly is. Prefer h1 over div, button over div, etc whenever appropriate.

https://www.w3.org/WAI/tips/developing/#use-mark-up-to-conve...

Sorry, yes you're right. Use semantic elements when they are available. But otherwise, there's nothing wrong with divs. Assistive technologies mostly ignore them untill you give them meaning.

Repo of a bunch of other drop-in stylesheets: https://github.com/dohliam/dropin-minimal-css

You can try them all out here as well: https://dohliam.github.io/dropin-minimal-css/

Wow! This is an incredible collection. I need someone to pick one for me - there's too many options!

here, have even more :) https://github.com/sw-yx/spark-joy/blob/master/README.md#ser...

A hidden gem here is the FAQ

> Q: Is there a minified version? A: No, you don’t need one for an MVP

> Q: What if I [still] don’t like it? A: That’s OK, you probably shouldn’t love your MVP

Just to pick a couple. Philosophy of this is spot on!

This (Mvp.css) is one of 16 different "classless" one-page "tiny sites" on display at https://sites.yax.com/ (compare classless themes, click to create a GitHub repo, then click to deploy to Netlify, Vercel, or Render.com). It's my open source project for quickly creating tiny sites with classless themes (feedback appreciated!).

This is really cool! Your objectives are refreshing and this looks much more appealing than Wix or Squarespace. For context, I am a non-coder who can cobble together basic HTML pages by mirroring tutorials but don't know the actual basics.

I took a look at your site and have a few comments: - The "How it works" section is fantastic. Thank you for including all the intermediate steps such as Github authorization/linking.

- It was not clear to me exactly what role Mavo plays. It appears as the in-browser editor but but looks to be much more capable than I was expecting.

- I like the Worklog - it's interesting to get a peek behind the scenes.

- What sorts of topics are you planning for your tutorials? Will it get as direct as "how to add a shopping cart to your website" or focus on bigger picture topics?

- In the Limits section of the Pricing page, I recommend you make it more visible that Netlify, Render, and Vercel are under the Yax umbrella as hosting options. I know you covered it in the "i" hover text but something like an additional table header would help. Non-coders are not as familiar with these companies and how they fit into the larger system.

Thanks for the feedback! I haven't yet posted it to "Show HN" so it's great to get early feedback. Let me know what topics you'd like for tutorials and I'll put them at the top of the list. Give it a try and I'll be in touch.

While surely it's not a good fit for every project, I really like semantic css frameworks. In a recent project of mine where web design didn't matter that much yet, I ended up using http://classless.de/. It made building the website really effortless and I'm quite happy with the look of the result:

https://rugpullindex.com/

(The only thing that I dislike is that the table is not centered on desktop. But whatevs...)

I generally keep a few things like this on hand as starting points, and then build my own additional CSS rules, and maybe a few purely presentational classes on top in an additional stylesheet. The "Cascading" part of Cascading Style Sheets is a beautiful thing. ;)

@sdan: Thanks much for those links, BTW. Super-helpful stuff right there. https://newcss.net/ is my current favorite, but it's nice to have so many options now to play with. :)

Haha np, I actually posted newcss on HN as well (and use it on my personal site)!

I've been using this in conjunction with Svelte (replacing global.css) to make my life a lot easier. Most of the stuff I make is tooling for personal use or for a small team, so it's kind of perfect. I can bring simple apps up very quickly that aren't terrible to look at it.

Discussion from 8 months ago: https://news.ycombinator.com/item?id=22681270

So on his front page he is using IDs instead of classes. So no chance of reuse.

I agree that we should be as semantic, as reasonably possible. But I'd rather have reusable CSS.

Lol yes. I can't think of many reasons to use IDs.

Regardless of how it performs, I love how humble the creators are about their work and how it isn't perfect and that's all OK.

I think it looks great! Viewing it on my smartphone. I might use it for my next project.

One little error ia that the textarea is too wide, you'll see on this page (smartphone):

https://andybrewer.github.io/mvp/mvp.html

It makes the entire page have a horizontal scrollbar.

As a mostly backend developer, I’ve started using class-less CSS frameworks as the starting point of small project (specifically Water.CSS [1]). The usually go a surprisingly long way before I have to switch to Tailwind.

[1] https://watercss.kognise.dev/

Anyone has good recommendations for good-looking, static "reporting" html templates? Ie. with quite dense layout to fit a lot of information (as opposed to the current trends in web design) and potentially handling of printed size (in order to fit in a single letter/a4 page)

I used this to build a quick landing page[1] when it first came out. I have to say, it was quick and easy to do and I think it looks decent.

[1]: https://penelopeaffiliate.co/

My biggest hurdle as a mostly back end engineer with a shaky but workable knowledge of react is creating a page that doesn't entirely break moving from desktop to mobile. Like most things today, there are hundreds of "valid" ways to do this with each JS tutorial / dev seeming to have their own preferences that are seemingly completely arbitrary to me.

Excited to learn more about this! Dig the design for his page as well - wish I could hire a designer / dev hybrid for $300-400 to make a single page site like this! (inquiries welcome)

One of my favorite templates! Always in love with minimalism :)

You should not use semantic elements for styling. Your prio should be 1. Content 2. Usability/accessability 3. Styling So first add the content, then make it accessible. Then make it look good, and if that means adding a class="card" that's not the end of the world.

Kinda cool and neat... But essentially you replace CSS classes with more HTML tags, which correct me if I'm wrong, will only slow (marginally) the page rendering.

I find <a class="button-solid">... easier to remember than <a><b>... vs. <a><i>...

In the FAQ he states that if the point is to build an mvp you shouldn’t be trying to optimize for speed

If you want a button, use a button not a link.

Shameless plug: If you're interested in quickly getting something online, you might also take a look at my static site generator https://mkws.sh/.

I get an internal server error

Comic sans no less :rofl:

Favorite font of the OpenBSD guys. :)

Fixed! Thanks!

You should remove those obnoxious share buttons on the left. They look horrible on both desktop and mobile, and on top of that they cover the content in full-width.

I was considering doing that for a while. Done now. :) Thanks!

Yeah! Was just thinking this is what I really wanted in the recent Tailwind thread.

This is like the complete opposite of Tailwind. While tailwind requires tons of classes and no CSS to do everything, this requires zero classes and styles everything with just HTML. And you can add custom CSS if you want.

I kind of prefer this. When Im just throwing something quickly, this is easy and when I want proper styling, I can use proper CSS frameworks.

i don't see a usecase for Tailwind, atleast for myself

Does anyone know something like this but with a phone (Android/iPhone) frame where you can just slap some screenshot? Even better if there's App Store / Google Play icon.

The only thing that drives me nuts is that in the homepage, the "Html guide" link points to w3schools. I still don't know why people refer to it instead of MDN

Maybe this is what we should be using to counter Google’s AMP.

Accessibility issue: The “Logo” image link at the top should have alt text that describes the link destination, not the image itself.

Wouldn’t you need to do both to be compliant with WCAG 1.1.1, as well as 2.4.4?

I’m not sure what the rule is for describing logos.

Specification: https://html.spec.whatwg.org/multipage/images.html#a-link-or...

Looks nice, I will probably be using it for a project since something like this is just what I have been looking for. Good job man!

https://htmx.org/ can do even more(ajax, modal ,etc)

if you liked this, my collection of other "drop in" simple CSS frameworks is here: https://github.com/sw-yx/spark-joy/blob/master/README.md#ser...

I personally like Water.css!

This is simple & looks great!

Reply on news.ycombinator.com