15 ms·
Mvp.css – build your landing page with only semantic HTML
- keyle 6y agoKinda 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>...
- gcatalfamo 6y agoIn the FAQ he states that if the point is to build an mvp you shouldn’t be trying to optimize for speed
- mixmastamyk 6y agoIf you want a button, use a button not a link.
- mattbgates 6y agoOne of my favorite templates! Always in love with minimalism :)
- sdan 6y agoRepo of a bunch of other drop-in stylesheets: https://github.com/dohliam/dropin-minimal-css https://github.com/dohliam/dropin-minimal-css You can try them all out here as well: https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/
- mixmastamyk 6y agoYeah! Was just thinking this is what I really wanted in the recent Tailwind thread.
- IceWreck 6y agoThis 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 6y agoDiscussion from 8 months ago: https://news.ycombinator.com/item?id=22681270 https://news.ycombinator.com/item?id=22681270
- chrismorgan 6y agoThe 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 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_aria 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 -.
- rileymat2 6y agoWhen 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?
- httpsterio 6y agoNo, 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.
- larsga 6y agoThe 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.
- SimeVidas 6y agoAccessibility issue: The “Logo” image link at the top should have alt text that describes the link destination, not the image itself.
- bladegash 6y agoWouldn’t you need to do both to be compliant with WCAG 1.1.1, as well as 2.4.4?
- SimeVidas 6y agoI’m not sure what the rule is for describing logos.
- uallo 6y agoSpecification: https://html.spec.whatwg.org/multipage/images.html#a-link-or-button-containing-nothing-but-the-image https://html.spec.whatwg.org/multipage/images.html#a-link-or...
- blooalien 6y agoI 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/ https://newcss.net/ is my current favorite, but it's nice to have so many options now to play with. :)
- sdan 6y agoHaha np, I actually posted newcss on HN as well (and use it on my personal site)!
- brtkdotse 6y agoAs 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/ https://watercss.kognise.dev/
- adriangrigore 6y agoShameless plug: If you're interested in quickly getting something online, you might also take a look at my static site generator https://mkws.sh/ https://mkws.sh/.
- unlikelymordant 6y agoI get an internal server error
- mixmastamyk 6y agoComic sans no less :rofl:
- adriangrigore 6y agoFavorite font of the OpenBSD guys. :)
- adriangrigore 6y agoFixed! Thanks!
- scrollaway 6y agoYou 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.
- adriangrigore 6y agoI was considering doing that for a while. Done now. :) Thanks!
- z3t4 6y agoYou 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.
- owlbynight 6y agoI'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.
- timvdalen 6y agoI 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/ https://penelopeaffiliate.co/
- ecmascript 6y agoLooks 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!
- robbiejs 6y agoI 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 https://andybrewer.github.io/mvp/mvp.html It makes the entire page have a horizontal scrollbar.
- can16358p 6y agoRegardless 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.
- thescribbblr 6y agoI personally like Water.css!
- timdaub 6y agoWhile 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/ http://classless.de/. It made building the website really effortless and I'm quite happy with the look of the result: https://rugpullindex.com/ https://rugpullindex.com/ (The only thing that I dislike is that the table is not centered on desktop. But whatevs...)
- maille 6y agoAnyone 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)
- wiradikusuma 6y agoDoes 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.
- dilpreetsio 6y agoThis is simple & looks great!
- DanielKehoe 6y agoThis (Mvp.css) is one of 16 different "classless" one-page "tiny sites" on display at https://sites.yax.com/ 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!).
- windthrown 6y agoThis 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.
- DanielKehoe 6y agoThanks 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.
- bufferoverflow 6y agoSo 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.
- spicybright 6y agoLol yes. I can't think of many reasons to use IDs.
- davnicwil 6y agoA 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!
- MR4D 6y agoMaybe this is what we should be using to counter Google’s AMP.
- deleted 6y ago[deleted]
- ausjke 6y agohttps://htmx.org/ https://htmx.org/ can do even more(ajax, modal ,etc)
- swyx 6y agoif 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#serious-css-frameworks https://github.com/sw-yx/spark-joy/blob/master/README.md#ser...
- mirkodrummer 6y agoThe 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
- batt4good 6y agoMy 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)