i collect these CSS frameworks for fun! here's my list: ### Drop-in CSS Frameworks preview some of these with https://sites.yax.com/ - [Spectre.css]( https://picturepan2.github.io/spectre/getting-started/instal... ) - https://latex.vercel.app/ - https://purecss.io/ - https://picocss.com/ - https://gdcss.netlify.app/ (inspired by UK design system) - https://simplecss.org/demo - https://ajusa.github.io/lit/ - https://s…
The problem with some of these is that they are terrible for accessibility. There is extremely low contrast, missing focus styling, invalid non-semantic HTML, ... Having a list of good examples only would be much more interesting than a list of everything .
MVP.css – Minimalist stylesheet for HTML elements
101–110 of 122 posts
Re: MVP.css – Minimalist stylesheet for HTML elements
#102Previous 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…
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...…
especially with rapid prototyping, you don't want your stylesheet dictating quirky usage of html.
Re: MVP.css – Minimalist stylesheet for HTML elements
#103Not putting your page header and footer inside the element is a giant pain in the ass. Both ways are semantically correct and accessible, but putting them inside the main gives you more flexibility to control your page margins/padding for various display sizes and lets you set up a grid for the whole page.
Re: MVP.css – Minimalist stylesheet for HTML elements
#104Quite 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/
MVP: 8.52K water: 31.61K tacit: 5.49K concrete (from child): 7.15K + 5.99K for normalize.css (13.14K total)
Tacit is most appealing to me to whip something together. Hits the best look/byte ratio for me and seems to be hardly an abuse of HTML at a glance.
I normally use actual semantic HTML with classes as styling hints and minimal CSS/JS. But I don't make anything "real", am definitely not a front-end guy, and my stuff is probably ugly to most.
Re: MVP.css – Minimalist stylesheet for HTML elements
#105Previous 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…
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...…
Re: MVP.css – Minimalist stylesheet for HTML elements
#106Previous 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…
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...…
Ultimately a lot of the modern web trends don't fit perfectly into the HTML5 syntax, and cards particularly are one. They're not 'articles' because they're not 'complete, or self-contained, composition[s]'. They're not 'asides' because they're not 'tangentially related' - although callout boxes I agree are. They could potentially be considered 'sections' although I'm not sure you would list individual cards explicitly in a document's outline - plus from a technical perspective how do you differentiate a 'section' card from any other type of section.
I think it's important to understand that there's no way to make everyone happy here, and there simply isn't a good semantic way to create cards using the tags that exist. I think in most cases, cards are a presentation of an item of sorts (perhaps even a 'list' item?) but HTML doesn't have a simple 'item' tag, and the spec warns that although headings are valid inside li tags, it's probably not correct semantically.
Key is, there will be some people this helps. There will be some it doesn't. For every (completely valid) concern that people (including myself) are raising, the only fix is to add more complexity, which makes it less easy to use.
FWIW, I think you've done a great job building something usable and useful, thank you.
Re: MVP.css – Minimalist stylesheet for HTML elements
#107i collect these CSS frameworks for fun! here's my list: ### Drop-in CSS Frameworks preview some of these with https://sites.yax.com/ - [Spectre.css]( https://picturepan2.github.io/spectre/getting-started/instal... ) - https://latex.vercel.app/ - https://purecss.io/ - https://picocss.com/ - https://gdcss.netlify.app/ (inspired by UK design system) - https://simplecss.org/demo - https://ajusa.github.io/lit/ - https://s…
Re: MVP.css – Minimalist stylesheet for HTML elements
#108Previous 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…
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...…
* 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` solutions are pretty unusual and they show the limit of what is possible using a classless CSS. I would have preferred staying even more minimalist and simply pass on button-like links.
* You could think about adding the underlining for links in continuous text. See https://www.w3.org/TR/WCAG20-TECHS/F73.html.
I'm not trying to be a dick about it since it's your personal project and I am not forced to use it – but I am not sure why the framework had to be classless and usable for a MVP all at once. I absolutely love classless CSS for simple/personal websites, but I associate MVPs (products) and rapid prototyping with more extensive and interactive interfaces than the typical text-based onepager.
Re: MVP.css – Minimalist stylesheet for HTML elements
#109> [pro tip] Add this code to a new HTML file: > https://unpkg.com/mvp.css "> That’s not a "pro tip"; that’s a very bad advice: you should always use versioned URLs. What if I find this project cool; add this URL in my HTML; and then the author changes things in ways I don’t like? It’ll break my website. If I used something like ` https://unpkg.com/mvp/v2.3.45/mvp.css ` I’d be sure it wouldn’t happen.
To quote further down the page “An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.”
Re: MVP.css – Minimalist stylesheet for HTML elements
#110Earlier 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...…
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…
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-related content must be displayed. It simply says it's frequently a sidebar or call-out box.
So, if a user writes semantically correct HTML and writes tangentially related content using an `` tag, MVP.css then chooses to render that visually as a "card".
So, I think in this respect, it's up to the user to use the tag semantically correct or not. Or am I missing something?
I think it's also semantic HTML to have more than one ``, unless I missed that rule somewhere as well.
For example, in the "Little Mermaid" example (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/as...) the fact "The movie earned $87 million during its initial release." is written inside an ``. But wouldn't it also be valid to include a 2nd fact as a 2nd `` and then have those visually represented as cards or call outs?