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).
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 -.
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.
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.
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?
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.
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.
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.
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.
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.
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:
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. :)
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.
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.
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)
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)
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>...
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.
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
[+] [-] chrismorgan|5 years ago|reply
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 -.
[+] [-] ehnto|5 years ago|reply
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.
[+] [-] OscarTheGrinch|5 years ago|reply
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.
[+] [-] rileymat2|5 years ago|reply
[+] [-] wishinghand|5 years ago|reply
[+] [-] adriangrigore|5 years ago|reply
[+] [-] onion2k|5 years ago|reply
[+] [-] madeofpalk|5 years ago|reply
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.
[+] [-] schwartzworld|5 years ago|reply
[+] [-] sdan|5 years ago|reply
You can try them all out here as well: https://dohliam.github.io/dropin-minimal-css/
[+] [-] nikodunk|5 years ago|reply
[+] [-] davnicwil|5 years ago|reply
> 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!
[+] [-] DanielKehoe|5 years ago|reply
[+] [-] windthrown|5 years ago|reply
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.
[+] [-] timdaub|5 years ago|reply
https://rugpullindex.com/
(The only thing that I dislike is that the table is not centered on desktop. But whatevs...)
[+] [-] blooalien|5 years ago|reply
@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. :)
[+] [-] sdan|5 years ago|reply
[+] [-] owlbynight|5 years ago|reply
[+] [-] chrismorgan|5 years ago|reply
[+] [-] bufferoverflow|5 years ago|reply
I agree that we should be as semantic, as reasonably possible. But I'd rather have reusable CSS.
[+] [-] spicybright|5 years ago|reply
[+] [-] can16358p|5 years ago|reply
[+] [-] robbiejs|5 years ago|reply
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.
[+] [-] brtkdotse|5 years ago|reply
[1] https://watercss.kognise.dev/
[+] [-] maille|5 years ago|reply
[+] [-] timvdalen|5 years ago|reply
[1]: https://penelopeaffiliate.co/
[+] [-] batt4good|5 years ago|reply
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)
[+] [-] mattbgates|5 years ago|reply
[+] [-] z3t4|5 years ago|reply
[+] [-] keyle|5 years ago|reply
I find <a class="button-solid">... easier to remember than <a><b>... vs. <a><i>...
[+] [-] gcatalfamo|5 years ago|reply
[+] [-] mixmastamyk|5 years ago|reply
[+] [-] adriangrigore|5 years ago|reply
[+] [-] scrollaway|5 years ago|reply
[+] [-] unlikelymordant|5 years ago|reply
[+] [-] mixmastamyk|5 years ago|reply
[+] [-] IceWreck|5 years ago|reply
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