Hi, do you mean that the underline appears under the highlighted text? No, that's not expected, I will see what I could do to fix it. However, the underline is indeed supposed to grow slightly thicker on hover.
Yes, looked a bit weird. I do have an outdated web browser so there's that but I would assume this should work well even on older ones (due to the overall simplicity).
Sorry for nitpicking, this is obviously a very minor issue. I always welcome smaller and lighter libraries!
Many phishing lists don't treat github.io as a pseudo-TLD which leads to the entirety of *.github.io being blacklisted when someone uses Github Pages to host phishing or malware.
Firstly, let me say that this looks great. I really like the classless approach. One minor question/nitpick:
> To make a button primary, add the data-primary attribute to it.
For things like this, I feel like a class would be ok while still calling the library "classless". Is there some advantage to using a data-* attribute here or is it just to retain "purity" of the classless tagline?
It's mainly the latter. I did consider just using a class, but ultimately settled on this solution. This approach might facilitate usage with additional CSS compilers/tooling.
I like the distinction. It separates effects applied by the library from affects applied by your custom class, since you can still add a class if you like. At a glance, I know where the effects are coming from.
That caught my attention immediately. It just seems like a hacky, roundabout way to avoid using classes for different button styles, which to be clear, are an example of exactly why classes exist.
I'm not against classes at all. I believe they are essential to constructing a well structured website, especially for creating layouts. However, I also believe that as frontend developers we should embrace native and semantic HTML elements instead of reinventing the wheel and rolling our own solutions. Going classless for basic elements results in cleaner HTML markup and avoids "class pollution".
I think it's not about going completely classless, but about having sane defaults and only use classes for specific components and/or elements that really need a custom style.
The more traditional CSS libraries provide ton of classes, and your html is filled with classes for the basic styling.
Exactly! You shouldn't need to remember classes for styling native HTML elements, and neither should you be forced to type out <button class="button"></button>, where you would be repeating yourself.
Looks great! Working on something similar, but couldn't go through the nuances of managing every gnarly inputs. What do you think of a PR for <section> stacking any children as equal width columns.
Nice work! I like that you have included support for prefers-color-scheme, which is one of the more highly-requested features for these kinds of frameworks.
I've added Lissom to the big list of minimal CSS frameworks [0] which aims to collect all of these types of projects (more or less) in one place for ease of discoverability and comparison. You can preview the CSS on some HTML5 boilerplate here [1].
Thank you for adding Lissom.CSS to the list. Indeed, I think that all modern websites should account for `prefers-color-scheme`, now that it has been supported by virtually every browser for several years.
47 comments
[ 2.9 ms ] story [ 93.8 ms ] threadhttps://i.imgur.com/aHTJfcn.png
Sorry for nitpicking, this is obviously a very minor issue. I always welcome smaller and lighter libraries!
> To make a button primary, add the data-primary attribute to it.
For things like this, I feel like a class would be ok while still calling the library "classless". Is there some advantage to using a data-* attribute here or is it just to retain "purity" of the classless tagline?
The more traditional CSS libraries provide ton of classes, and your html is filled with classes for the basic styling.
Also, why not use "gap" instead of "margin-right-but-not-last-child"?
Marx, The classless CSS reset (perfect for Communists).
https://github.com/mblode/marx
Some kind of containers that can use 1/2 1/4 of width and look good on mobile would probably be nice.
I would also add nav with mobile switch, I saw one fully in css.
My go to classless CSS is MVP.css
Note: the link below is built entirely with MVP.css (including multiple columns, which is something most classless frameworks lack)
https://andybrewer.github.io/mvp/
Example sites using MVP.css include
https://www.mondage.com
https://searchcode.com
I've added Lissom to the big list of minimal CSS frameworks [0] which aims to collect all of these types of projects (more or less) in one place for ease of discoverability and comparison. You can preview the CSS on some HTML5 boilerplate here [1].
[0]: https://github.com/dohliam/dropin-minimal-css
[1]: https://dohliam.github.io/dropin-minimal-css/?lissom
Really nice in general though!