Show HN: Basic.css – Classless CSS Starter File

by vladocar • 6 years ago

153 65 6 years ago

thiscatis• 6 years ago

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

kitd2• 6 years ago

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

rsoto• 6 years ago

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.

dhagz• 6 years ago

Yeah, if there were a way to have this without the grid stuff, I'd be all for it. But as it is, if I want to use this I'm stuck either ignoring tags (which I may want to use) to avoid the grid stuff, or I'm stuck using a grid system which isn't very controllable.

It's cool, but I'll stick to just writing my own, light-on-classes CSS.

torstenvl• 6 years ago

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.

err4nt• 6 years ago

If you want to do this, look into autonomous custom elements, you can make something like `<x-card>` …no class name required!

VWWHFSfQ• 6 years ago

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

smichel173• 6 years ago

The yesod web framework's hamlet templates have this, albeit without the default as far as I know. <section .card> compiles to <section class="card">. If you omit the element, it uses div by default so you can use just <.card> if you prefer.

werdnapk• 6 years ago

Or use a template engine. Slim for example allows you to write just .card

kitd2• 6 years ago

A workaround might be little more than running a sed command on the html sources before bundling.

chrismorgan7• 6 years ago

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

yoz-y• 6 years ago

Agreed. A good classless CSS file should work as a drop-in replacement for the native browser spreadsheet, it should definitely not try to invent it's own semantics.

Not that you can't do that, but if you do you are creating a CSS framework, not a stylesheet.

vladocar• 6 years ago

My point wasn't to replace the classic class grid, just to give basic HTML5 grid if necessary. You can always add any other CSS Framework for grid formatting. About <section> and other HTML5 tags.. you can always personalise the code to your standards.

The grid is based on this: parent element {display: flex; flex-flow: row wrap} child element {flex:1}

Replace the parent element (container) with any HTML element, replace the child element with your preferred semantic element.

javajosh• 6 years ago

Great reply, Vlad. Your code is really small and tight, and it's easy to modify, just as you say. That's one of the benefit of writing in the style that you did: modern, using all of modern CSS's native goodness. Which means its small, static, no build, and easy to modify. Very nice work.

globular-toast• 6 years ago

What is a card? For me that is purely stylistic and should live in the CSS alone. What does a card mean to a blind user?

This is all very easy when you're in the business of marking up documents. It turns out that the handful of element types defined in HTML are good enough for the vast majority of documents. It's quite rare to need to introduce a new tag. The difficulty starts when you're actually trying to create a "user interface" rather than a document.

runarberg2• 6 years ago

For me, cards are usually lists of self contained items (usually summaries). So the cards parent is usually a `<ul>` or `<ol>` and the card them selfs are `<li>` with a single `<article>`, `<aside>`, or `<figure>`.

parhamn• 6 years ago

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.

detaro• 6 years ago

"you don't need CSS classes, but instead need to add aria-tags overriding the accessibility semantics" kind of invalidates the point of something like this IMHO.

FideoSpecial• 6 years ago

Creating true accessibility is very difficult in my experience and involves a lot more than tag attributes. Screen readers like JAWS can be, again, very difficult to work with - so being as semantic as possible and maintaining "flattened" HTML are often necessary to get them to work properly for blind users.

chrismorgan7• 6 years ago

The problem of semantics is two-fold: you’re abusing one thing’s semantics (built-in HTML elements, ending up with something unsemantic in name or functionality), in order to avoid using one of the two mechanisms that are designed for naming semantics in styling and potentially functionality (which are: classes and custom elements).

The effects of the semantic abuse are admittedly slight, but they are still present, so all else being equal you should care at least a little about them. Tools like screen readers do distinguish between section, article and div in their landmark handling. By abusing these things, you are making life just a little bit harder for users of screen readers.

woofie113• 6 years ago

I think <article>the</article> right way to do it is to have <article>the</article> parser figure out which words are articles rather than explicitly tagging them. There are only three of them in English, and it's not a hard NLP problem. Of course, it's harder with Chinese, where there are countless measure words. And easier in <article>a</article> language without articles.

smichel173• 6 years ago

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.

desireco42• 6 years ago

I started reading what you wrote with the complete disagreement of what I thought you are saying and finished agreeing completely. :)

I find a good starter defaults good.

runarberg2• 6 years ago

Funny enough, I often mark up grid cards as an unordered list of articles:

    <ul>
      <li>
        <article>Card 1</article>
      </li>
      <li>
        <article>Card 2</article>
      </li>
    </ul>

Since grid cards are often complete stand-alone items with their own headings, footings and body content.

ravenstine2• 6 years ago

You're not wrong, but I'll note that the definition of <article> you are referring to seems pretty useless, and I don't think it's wrong for people to generally decide what <article> should mean.

I don't see anywhere that defines <aside> as being used for cards. But <aside> should be used for cards if the card itself is an aside.

Here, have an article within a section. … what? That ain’t semantic.

What's not semantic about that? An article =/= a page. A page can have multiple articles; the idea of an "article" is pretty abstract.

awb4• 6 years ago

But <aside> should be used for cards if the card itself is an aside.

That's exactly how I treat cards with MVP.css. Note: "aside" doesn't mean it visually needs to be "on the side", just complimentary to the body content.

https://andybrewer.github.io/mvp/

divbzero• 6 years ago

Agreed with your overall point that HTML tags should not be misappropriated.

This can be a challenge for purely classless CSS because a style can correspond to different semantics in different scenarios. For example, the cards as used in Basic.css [1] are semantically <section>s. But in a different context, cards could be used for an <aside> [2] or for a social media post which would indeed be an <article> [3].

[1] https://vladocar.github.io/Basic.css/

[2] https://getbootstrap.com/docs/4.5/components/card/

[3] https://html.spec.whatwg.org/multipage/sections.html#article...

duopixel• 6 years ago

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• 6 years ago

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

awb4• 6 years ago

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.

chrismorgan7• 6 years ago

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

nwsm• 6 years ago

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/

jsiarto2• 6 years ago

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

czechdeveloper• 6 years ago

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

jsiarto2• 6 years ago

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.

simonw• 6 years ago

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

marvinblum3• 6 years ago

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/

[2] https://concrete.style/

reaperducer• 6 years ago

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.

chrismorgan7• 6 years ago

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.

louismerlin• 6 years ago

The framework he uses is actually 996 bytes minzipped :D (disclaimer : I'm the creator of https://concrete.style)

marvinblum3• 6 years ago

I updated my page, it now has a page load of 12.1 KB.

chiefofgxbxl• 6 years ago

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• 6 years ago

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.

tln2• 6 years ago

User agents usually do this. This Basic.css demo does show an outline for Chrome and Safari, but not Firefox... odd, because that does appear if I remove Basic.css stylesheet.

hidiegomariani• 6 years ago

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 [2] https://github.com/yegor256/tacit [3] https://tailwindcss.com

awb4• 6 years ago

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/

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

(disclaimer: I'm the author)

tmvnty• 6 years ago

Existing collections of "classless" CSS libraries:

- https://github.com/dohliam/dropin-minimal-css

- https://github.com/dbohdan/classless-css

- https://github.com/ubershmekel/cssbed

g105b• 6 years ago

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• 6 years ago

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

wishinghand• 6 years ago

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.

nicc• 6 years ago

WOW! This is awesome.

Congratulations on releasing this!

ashconnor• 6 years ago

There's also https://github.com/mblode/marx

Show HN: Basic.css – Classless CSS Starter File

Related Stories