One thing I consistently dislike in these efforts is the misappropriation of HTML tags with certain semantics.<p>In this instance, the <article> elements should not be articles: they’re not complete, standalone items. To be sure, as <a href="https://html.spec.whatwg.org/multipage/sections.html#article-or-section" rel="nofollow">https://html.spec.whatwg.org/multipage/sections.html#article...</a> says, there’s subjectivity in deciding whether to use <section> or <article>, but I’m content to say that <article> is wrong here.<p>(Last time I looked into one of these classless CSS starter files, it was <aside> being used for cards, which was <i>very</i> wrong.)<p>In a case like this, I’d prefer the inner elements to be <section> or <div>. Or better still, just start using custom element names which are perfectly valid, e.g. <grid-card>. There, no class. I will permit you to claim that that’s cheating and avoiding the point of classlessness; I don’t mind.<p>But the big pitfall of trying to go fully classless (if you interpret that as also meaning you can’t use your own custom element names) is when HTML just <i>doesn’t have</i> tags for the semantic concepts you’re trying to express. You want a quote, table numbered list? Yeah, we’ve got tags for those things, go knock yourself out. But you want a card? <i>Here, have an article within a section.</i> … what? That ain’t semantic. How’s an author supposed to guess that those tags will present like <i>that</i>? That’s what classes or autonomous custom elements are good for, indicating <i>intent</i>.
This feels weird. Classes exist for a reason. When I read the title, I thought about a kind of CSS reset, but what I'm seeing is also a template/grid framework?<p>The weird part is that by wrapping an article within a section now I'm designing with columns (which btw, it seems there's no way to control them). And section > article turns out to be the suggested semantics for a blog.<p>It's a nice effort, but what I'd look for in a starter file might not be a uncontrollable grid.
In the examples, form labels are used badly in a few places. The textarea label lacks its <i>for</i> attribute, and the radio buttons are done quite wrong: for best results, the entire group should be wrapped in a <fieldset>, with the prompt text (“Number:”) being a <legend>, and then each radio button’s text should be a <label>.
I do like these frameworks. Far more sites should use one of those or the principle behind them. My page [1] uses concrete [2] and has a page load of 125kb (including my picture) and loads in less than one second. I don't need all that bloat that comes with a lot of pages (checkout wired.com for a negative example).<p>The cards of this one look neat, but in case I need something like that I would add it myself to concrete. Nice place to start never the less.<p>[1] <a href="https://marvinblum.de/" rel="nofollow">https://marvinblum.de/</a><p>[2] <a href="https://concrete.style/" rel="nofollow">https://concrete.style/</a>
Thank you! Brevity in code is underappreciated. People think it is about file size (and it partially is) but it is mostly about understanding what the code does so that you can extend it in the way that you want. This looks like a true foundation, unlike the namesake framework which is building on top of an existing buildings.
another one i'm using for my site [1] is tacit[2] it's pretty basic but it works well - although i've been trying to find a well structured, well designed css framework with no classes - I haven't found one of my liking, I think the best way would be to use something very minimal like tailwindcss [3] which i still have to try<p>[1] <a href="https://golang.cafe" rel="nofollow">https://golang.cafe</a>
[2] <a href="https://github.com/yegor256/tacit" rel="nofollow">https://github.com/yegor256/tacit</a>
[3] <a href="https://tailwindcss.com" rel="nofollow">https://tailwindcss.com</a>
I thought CSS variables were still not fully supported enough to use in production. I know you can use a polyfill, but that seems to detract from the minimalist approach of these basic CSS frameworks: <a href="https://caniuse.com/#feat=css-variables" rel="nofollow">https://caniuse.com/#feat=css-variables</a>
There is some leftover lorem ipsum on the demo [0]. Under "Basic Forms"- "Vivamus non leo magna, quis imperdiet risus."<p>[0] <a href="https://vladocar.github.io/Basic.css/" rel="nofollow">https://vladocar.github.io/Basic.css/</a>
These are cool, but I'd appreciate it if they covered every HTML element- <details>, <cite>, <kbd>, etc. I guess this one calls itself Basic so maybe it's just going for the 80/20 effect of the most common HTML elements.
This is a nice take on an old problem. If your project makes HTML creation more straightforward without introducing a tonne of baggage, I'm all for it.