13 ms·

Show HN: Basic.css – Classless CSS Starter File

153 points by vladocar 6y ago

thiscatis 6y 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.
rsoto 6y 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 6y 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 6y 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 6y ago
    If you want to do this, look into autonomous custom elements, you can make something like `<x-card>` …no class name required!
  - VWWHFSfQ 6y ago
    why not just write <div class="card">
    - airstrike 6y ago
      <s>Not nearly as cool as <.card>, sorry</s>
  - smichel17 6y 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 6y ago
    Or use a template engine. Slim for example allows you to write just .card
  - kitd 6y ago
    A workaround might be little more than running a sed command on the html sources before bundling.
kitd 6y ago
OT, but I was entertained by Google asking me if I wanted to translate from Latin to English.
chrismorgan 6y 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-or-section 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 6y 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 6y 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.
duopixel 6y 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 6y 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.)
  - awb 6y 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.
chrismorgan 6y 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 6y 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/ https://vladocar.github.io/Basic.css/
deleted 6y ago
[deleted]
jsiarto 6y 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 https://caniuse.com/#feat=css-variables
- czechdeveloper 6y ago
  Based on your link, unless you support IE11, you should be fine with variables.
  - jsiarto 6y 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 6y ago
The way this offers a grid without using any CSS classes based on nesting section elements is really neat - very clever trick.
marvinblum 6y 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/ https://marvinblum.de/ [2] https://concrete.style/ https://concrete.style/
- reaperducer 6y 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.
  - chrismorgan 6y 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.
    - marvinblum 6y ago
      Well speed was not the main goal of my site. I just wanted to build something quick. I sometimes use the avatar on my page to upload it somewhere else and a decent resolution is good for that.
    - tln 6y ago
      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
chiefofgxbxl 6y 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 6y 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.
- tln 6y 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 6y 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 https://golang.cafe [2] https://github.com/yegor256/tacit https://github.com/yegor256/tacit [3] https://tailwindcss.com https://tailwindcss.com
- awb 6y 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/ 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 6y ago
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
g105b 6y 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 6y 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 6y 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 6y ago
WOW! This is awesome. Congratulations on releasing this!
ashconnor 6y ago
There's also https://github.com/mblode/marx https://github.com/mblode/marx

153 points by vladocar 6y 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.

rsoto 6y 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 6y 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 6y 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 6y ago
  If you want to do this, look into autonomous custom elements, you can make something like `<x-card>` …no class name required!
- VWWHFSfQ 6y ago
  why not just write <div class="card">
  - airstrike 6y ago
    <s>Not nearly as cool as <.card>, sorry</s>
- smichel17 6y 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 6y ago
  Or use a template engine. Slim for example allows you to write just .card
- kitd 6y ago
  A workaround might be little more than running a sed command on the html sources before bundling.

kitd 6y ago

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

chrismorgan 6y 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-or-section 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 6y 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 6y 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.

duopixel 6y 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 6y 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.)
- awb 6y 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.

chrismorgan 6y 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 6y 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/ https://vladocar.github.io/Basic.css/

deleted 6y ago

[deleted]

jsiarto 6y 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 https://caniuse.com/#feat=css-variables

czechdeveloper 6y ago
Based on your link, unless you support IE11, you should be fine with variables.
- jsiarto 6y 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 6y ago

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

marvinblum 6y 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/ https://marvinblum.de/ [2] https://concrete.style/ https://concrete.style/

reaperducer 6y 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.
- chrismorgan 6y 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.
  - marvinblum 6y ago
    Well speed was not the main goal of my site. I just wanted to build something quick. I sometimes use the avatar on my page to upload it somewhere else and a decent resolution is good for that.
  - tln 6y ago
    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

chiefofgxbxl 6y 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 6y 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.
tln 6y 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 6y 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 https://golang.cafe [2] https://github.com/yegor256/tacit https://github.com/yegor256/tacit [3] https://tailwindcss.com https://tailwindcss.com

awb 6y 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/ 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 6y ago

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

g105b 6y 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 6y 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 6y 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 6y ago

WOW! This is awesome. Congratulations on releasing this!

ashconnor 6y ago

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