Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

MVP.css – Minimalist stylesheet for HTML elements

andybrewer.github.io

Post reply on HN
Print view View original

111–120 of 122 posts

Re: MVP.css – Minimalist stylesheet for HTML elements

#111

Post by [deleted] »

chrismorgan wrote: post #44
patates wrote: post #36

Earlier quoted context omitted.

> the author has declined to change these things despite acknowledging that they’re wrong I mean, if they already have projects running with this, it makes sense. If I learned one thing in my professional life is that while being a perfectionist already is not the best way to approach the vast majority of the problems, it's especially true when it comes to HTML. Also, I hate to be that guy, but seriously, this thing…

I enjoy reviewing things like this and pointing out the problems in the hopes of improving them, or at least teaching others who will hear—when I post detailed reviews, I normally get positive reviews on the reviews (whether from the original author or from others), and feel I have helped people. But I don’t actually use things like this; I’m far too strongly opinionated and will do my own thing every time. (And for…

[deleted]

Re: MVP.css – Minimalist stylesheet for HTML elements

#112

Post by svnpenn »

chrismorgan wrote: post #34

Previous discussions: • https://news.ycombinator.com/item?id=25167928 (21 November 2020, 82 comments) • https://news.ycombinator.com/item?id=22681270 (25 March 2020, 91 comments) —⁂— > No class names, no frameworks, just semantic HTML and you're done. The trouble with this claim is that MVP.css abuses semantic HTML badly, using completely inappropriate elements all over the place (e.g. aside for cards, and b/strong/i…

> The trouble with this claim is that MVP.css abuses semantic HTML badly

It seems you are not in a position to be making these claims, since by your own admission you don't even use the project:

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

Re: MVP.css – Minimalist stylesheet for HTML elements

#113

Post by jszymborski »

doodlesdev wrote: post #7

Quite a lot of stylesheets in this simillar vein [0]. Basically doing CSS by using HTML5 semantic elements instead of classes. My personal favorite is Water.css [1], because it looks good and makes very good use of HTML5 semantics. Tacit [2] is also amazing. [0]: https://css-tricks.com/no-class-css-frameworks/ [1]: https://watercss.kognise.dev/ [2]: https://yegor256.github.io/tacit/

I'm surprised nobody has mentioned simple.css [0] yet, it's by far my favourite and has been discussed on HN before.

[0] https://simplecss.org/

Re: MVP.css – Minimalist stylesheet for HTML elements

#114

Post by awb »

zichy wrote: post #108
awb wrote: post #98

Earlier quoted context omitted.

Hi, author of MVP.css here. For those interested in the discussions around this, please refer to: https://github.com/andybrewer/mvp/issues/26 https://github.com/andybrewer/mvp/issues/2 I would concede that the use of ‘a strong’, ‘section aside’, etc. does require some learning and the styling is perhaps unique, but I don’t think it’s invalid in any way. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/st...…

Hey, thanks for commenting! * I think everything regarding the `aside` elements has already been said in the GitHub issue: It's context specific and you can't determine in advance if a certain (card) element is part of the main content or not. Therefore, `aside` should only be used if needed. (The top three cards on the MVP.css homepage definitely are part of the main content for example.) * Your `a i` and `a strong`…

> you can't determine in advance if a certain (card) element is part of the main content or not. Therefore, `aside` should only be used if needed

Good point, I agree.

> Your `a i` and `a strong` solutions are pretty unusual and they show the limit of what is possible using a classless CSS

100% agree. This was a loose interpretation of semantic HTML IMO.

> I would have preferred staying even more minimalist and simply pass on button-like links.

Sure, from a purist perspective, but from a productivity one, the vast majority of product / service sites have a button somewhere, so I thought it was important to include it even if I had to abandon a strict-constructionist view of semantic HTML and go with a more progressive, interpretative one.

> You could think about adding the underlining for links in continuous text. See https://www.w3.org/TR/WCAG20-TECHS/F73.html.

I agree. I think it's a strong candidate to implement this in a v2 if that happens down the road.

> I associate MVPs (products) and rapid prototyping with more extensive and interactive interfaces than the typical text-based onepager

Sure, modern day MVPs look far more polished and interactive, but this was kind of in response to that. I was working through YC's Startup School (https://www.startupschool.org/) at the time and they were pushing the definition of an MVP as something that just barely works so you can test out a specific idea. So, while it won't work for an AirTable MVP, I think it should work for an API MVP, or most single-form MVPs. Beyond that, I agree it might not be a great fit for the project.

Re: MVP.css – Minimalist stylesheet for HTML elements

#115

Post by jiggywiggy »

zichy wrote: post #69
jiggywiggy wrote: post #65

Earlier quoted context omitted.

Aside, article etc hardly has any impact on accessibility. Labels, titles, contrast, tabs do have a big impact.

It is not true that they do have hardly any impact on accessibility. But if you want to go that way: MVP.css uses ` ` instead of ` `/` `. See https://www.w3.org/TR/WCAG20-TECHS/H71.html .

Nah they don't. I've had accessibility tests done and checks by Foundations for government. Even they don't care about it, it's all about: contrast, letter size, tabs and titles/labels.

Re: MVP.css – Minimalist stylesheet for HTML elements

#116

Post by Madeindjs »

catchmeifyoucan wrote: post #15

I love mvp.css This made shipping my side project so much easier. I like that it’s opinionated and gets you going fast. You’re not really spending time picking colors, and you can focus on the content. This is the landing page I built: https://figmage.com

I see an horizontal scroll because of a code block containing a non wrapped URL

Re: MVP.css – Minimalist stylesheet for HTML elements

#117

Post by d1sxeyes »

awb wrote: post #110
d1sxeyes wrote: post #106

Earlier quoted context omitted.

One thing that I think is very difficult to do in your position is to determine what benefits others and what does not. However, I think you're wrong here to be trying to defend this as 'correct', because it's not—or at least the spec doesn't support what you're doing. You should be proudly saying 'this is what I can build out of the most basic building blocks available in HTML. It's as semantic as possible, but ther…

I agree with you, that there's a 80/20 objective here for an MVP stylesheet. However, I think wether ` ` is semantic HTML or not is specific to the content inside it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/as... > The HTML element represents a portion of a document whose content is only indirectly related to the document's main content. There's nothing in the spec saying how that tangentially-relat…

Fair point that it’s dependent on usage, but I think most uses of cards are not tangential - the cards themselves are the core content (e.g. a pricing table, feature list, real estate/product listing, etc.).

I think you’re right, there’s a case that for some situations where a card contains tangentially related information, is correct, but I think the majority of cases, it won’t fit.

For example, you use cards in two places on https://andybrewer.github.io/mvp/.

I don’t think either of those uses could really be described as “tangential” to the main page content (perhaps you could argue the toss for the form with suggestions).

Re: MVP.css – Minimalist stylesheet for HTML elements

#118

Post by zagrebian »

lelandfe wrote: post #100
zagrebian wrote: post #96

On the demo page [1], the element starts with an . That doesn’t seem right. The element is meant for section breaks (where there is content both before and after the element), not for decorative horizontal lines. [1]: https://andybrewer.github.io/mvp/mvp.html

True, but soooo minor. The element has no impact on the document outline, and many sites use it decoratively today. If we're really being pedantic, all uses of elements on that page are contrary to the spec's desires. > The hr element represents a paragraph-level thematic break, e.g. a scene change in a story > There is no need for an hr element between the sections themselves, since the `section` elements and the `h…

Normally, I wouldn’t mention it, but the website lists “semantic HTML” as one of its features.

Re: MVP.css – Minimalist stylesheet for HTML elements

#119

Post by lelandfe »

zagrebian wrote: post #118
lelandfe wrote: post #100

Earlier quoted context omitted.

True, but soooo minor. The element has no impact on the document outline, and many sites use it decoratively today. If we're really being pedantic, all uses of elements on that page are contrary to the spec's desires. > The hr element represents a paragraph-level thematic break, e.g. a scene change in a story > There is no need for an hr element between the sections themselves, since the `section` elements and the `h…

Normally, I wouldn’t mention it, but the website lists “semantic HTML” as one of its features.

Yeah, that's fair enough :)

Re: MVP.css – Minimalist stylesheet for HTML elements

#120

Post by zichy »

jiggywiggy wrote: post #115
zichy wrote: post #69

Earlier quoted context omitted.

It is not true that they do have hardly any impact on accessibility. But if you want to go that way: MVP.css uses ` ` instead of ` `/` `. See https://www.w3.org/TR/WCAG20-TECHS/H71.html .

Nah they don't. I've had accessibility tests done and checks by Foundations for government. Even they don't care about it, it's all about: contrast, letter size, tabs and titles/labels.

I'm not sure why you are so insistent. Of course it is important for accessibility. I have also worked for government sites, conducted a11y tests myself, and worked with independent auditors from Canada and Germany. Semantic HTML is a very basic but critical part. See https://www.w3.org/WAI/WCAG21/Understanding/info-and-relatio....
Post reply on HN