
Show HN: Basic.css – Classless CSS Starter File - vladocar
https://github.com/vladocar/Basic.css
======
chrismorgan
One thing I consistently dislike in these efforts is the misappropriation of
HTML tags with certain semantics.

In this instance, the <article> elements should not be articles: they’re not
complete, standalone items. To be sure, as
[https://html.spec.whatwg.org/multipage/sections.html#article...](https://html.spec.whatwg.org/multipage/sections.html#article-
or-section) says, there’s subjectivity in deciding whether to use <section> or
<article>, but I’m content to say that <article> is wrong here.

(Last time I looked into one of these classless CSS starter files, it was
<aside> being used for cards, which was _very_ wrong.)

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.

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
_doesn’t have_ 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? _Here, have an article within a
section._ … what? That ain’t semantic. How’s an author supposed to guess that
those tags will present like _that_? That’s what classes or autonomous custom
elements are good for, indicating _intent_.

~~~
parhamn
> One thing I consistently dislike in these efforts is the misappropriation of
> HTML tags with certain semantics.

As a counterpoint, I don't understand people pushing strict semantics in html
elements where they're not really strictly defined or generally useful.
Because of how loose the spec with how these things can be used (it it weren't
it'd be like schema.org meets html) scraper and other UI tools don't really
look for these things and are very flexible in parsing and identifying
structure. It'd be foolish to implement a html parser for the general web that
strictly expects articles to be in article tags.

Browser default CSS for these things mostly suck and are rarely used, in this
case they're overriding them anyway. So why stay pseudo-semantic?

Besides general accessibility (which is tag attribute based mostly), its not
obvious to me how this critique is repeated so often with such little value.

~~~
smichel17
> Besides general accessibility (which is tag attribute based mostly)

I was under the impression that semantic html elements imply certain aria tags
(I read some mdn pages on this recently so I'm pretty confident in this
impression, unless I confused proposed and actual specs). So, they can help
with the ease of writing accessible UI.

~~~
extra88
Yes, the first rule of ARIA is if you _can_ use HTML instead of ARIA
attributes, do so; e.g. use <button>, not <div role="button">.

Some roles inherent to HTML elements are only conditionally exposed; e.g. the
<section> element has the ARIA landmark role of "region" but assistive
technologies that list landmarks should not include such section elements
unless it has also been given an accessible name, e.g. <section aria-
labelledby="contact-info"><h2 id="contact-info">Contact Info</h2> ...
</section>. I've read that the <aside> element is not really an ARIA
"complementary" landmark if it's the child of another landmark but in practice
it still seems to be treated that way.

------
rsoto
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?

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.

It's a nice effort, but what I'd look for in a starter file might not be a
uncontrollable grid.

~~~
torstenvl
Seems like it would be awesome if HTML allowed you to set a default element

    
    
        <meta default-element="div">
    

and then use

    
    
        <.card>
    

as a shorthand for

    
    
        <div class="card">
    

You could be "classless" to the extent of being semantic and succinct but
without having to misappropriate elements.

~~~
VWWHFSfQ
why not just write <div class="card">

~~~
airstrike
<s>Not nearly as cool as <.card>, sorry</s>

------
tmvnty
Existing collections of "classless" CSS libraries:

\- [https://github.com/dohliam/dropin-minimal-
css](https://github.com/dohliam/dropin-minimal-css)

\- [https://github.com/dbohdan/classless-
css](https://github.com/dbohdan/classless-css)

\-
[https://github.com/ubershmekel/cssbed](https://github.com/ubershmekel/cssbed)

------
chrismorgan
In the examples, form labels are used badly in a few places. The textarea
label lacks its _for_ 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>.

------
marvinblum
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).

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.

[1] [https://marvinblum.de/](https://marvinblum.de/)

[2] [https://concrete.style/](https://concrete.style/)

~~~
reaperducer
_and has a page load of 125kb (including my picture)_

Imagine what you could get it down to if you just wrote CSS instead of using a
framework.

~~~
chrismorgan
11.5KB of CSS, looks like you could probably take it to under 1KB. But the
biggest weight is the 93KB 460×460 avatar image which is used in a 100×100
circle. That can be reduced to an decent JPEG of about 10KB without even
shrinking it to 100×100. At 100×100 (low-DPI displays), it’s under 5KB. I’d
probably go for a single 200×200 image weighing about 8KB.

If you wanted to make that page _really_ fast, you’d inline all the CSS and
the avatar image, and get it under 14KB so that the entire HTTP message could
be transmitted in one TCP packet.

~~~
tln
What network are you on that gives you 14kb packets from the internet?

My loopback has MTU of 16kb, everything else is 1500 or less

~~~
chrismorgan
Oops, off by an order of magnitude, sorry. It’s been a while since I’ve
seriously optimised anything in this sort of way (purely for fun).

------
duopixel
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.

~~~
elicash
Another advantage is speed.

I did a proof-of-concept last week with MVP.css and it was so quickly put
together that it was almost as convenient as from writing the content in a
Google Doc (where I use borderless tables for the columns). Google Docs are
usually my second step in the process, as I don't like to get feedback on
sketches, but this might be it now. (My first step is that I sketch on receipt
paper, it's the perfect width for mobile, super cheap, and can be as tall as
you'd like for your design. Highly rec.)

~~~
awb
Author of MVP.css here. Glad you liked it! If you'd like to share the site you
built I'd love to take a look.

------
chiefofgxbxl
Quick recommendation: add a focused style on form inputs so it's easy to see
which input is active. A bright border color would help.

~~~
lemonberry
I am currently building my first website in Laravel. In the past I've just
done WordPress. I was surprised at how much work went into styling the forms,
both of general aesthetics and accessibility.

A great tip was to use an appropriately colored shadow for focus and errors in
the forms. It improved legibity a lot.

------
thiscatis
I'm really liking this classless movement. Looks like a nice basic template by
itself for docs or a blog post in HTML too.

------
kitd
OT, but I was entertained by Google asking me if I wanted to translate from
Latin to English.

------
hidiegomariani
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

[1] [https://golang.cafe](https://golang.cafe) [2]
[https://github.com/yegor256/tacit](https://github.com/yegor256/tacit) [3]
[https://tailwindcss.com](https://tailwindcss.com)

~~~
awb
> i've been trying to find a well structured, well designed css framework with
> no classes - I haven't found one of my liking

Give MVP.css a try:
[https://andybrewer.github.io/mvp/](https://andybrewer.github.io/mvp/)

It had some good community support (2.5k stargazers and about a dozen
contributes).

(disclaimer: I'm the author)

------
simonw
The way this offers a grid without using any CSS classes based on nesting
section elements is really neat - very clever trick.

------
jsiarto
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:
[https://caniuse.com/#feat=css-variables](https://caniuse.com/#feat=css-
variables)

~~~
czechdeveloper
Based on your link, unless you support IE11, you should be fine with
variables.

~~~
jsiarto
Good point. I just checked our company's web analytics and IE makes up about
2% of web traffic. So it's not dead yet, but I guess you can make a case for
not supporting it.

------
nwsm
There is some leftover lorem ipsum on the demo [0]. Under "Basic Forms"\-
"Vivamus non leo magna, quis imperdiet risus."

[0]
[https://vladocar.github.io/Basic.css/](https://vladocar.github.io/Basic.css/)

------
wishinghand
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.

------
g105b
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.

------
Ayesh
Nice work. I personally find the way grid is implemented a bit weird, but I
like the opinionated rounded corners, typography, spacing, etc.

------
ashconnor
There's also [https://github.com/mblode/marx](https://github.com/mblode/marx)

------
nicc
WOW! This is awesome.

Congratulations on releasing this!

