7 ms·
Show HN: Lissom.CSS - A classless, minimalist, and themeable CSS library
This is a personal take on making a classless semantic CSS library.
- mahathu 3y agoIt looks really nice and minimal. Good for blogs. What about form elements?
- Looky1173 3y agoThank you! I haven't finished form elements yet but they are definitely in the works.
- badtension 3y agoLooks cool. Is this underline-on-hover behaviour expected? https://i.imgur.com/aHTJfcn.png https://i.imgur.com/aHTJfcn.png
- Looky1173 3y agoHi, 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.
- badtension 3y agoYes, 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!
- Looky1173 3y agoI've stretched out the line height a bit so it should look better now.
- badtension 3y agoYes! Works great.
- yawnxyz 3y agoFor some reason this site is triggering a phishing warning in Chrome? I went to the site anyway and it seems completely harmless...
- Looky1173 3y agoThat's curious. It's just a simple HTML page with CSS attached, hosted on GitHub Pages. I don't see why it would trigger such a warning.
- pavlov 3y agoThe default line height for body text is way too tight, IMO. Something like "line-height: 1.4em" on all <p> elements would be more readable.
- Looky1173 3y agoThanks for the feedback, I've just set the line height to 1.4.
- marban 3y agoSomething that doesn't address every single detail down to things like ::-webkit-credentials-auto-fill-button is not a library but an opinion.
- Looky1173 3y agoLissom.CSS is indeed opinionated. Would you prefer to call it a framework instead, or a stylesheet?
- lucideer 3y agoFirstly, 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?
- Looky1173 3y agoIt'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.
- canadiantim 3y agoI admit I become hesitant when I see "data-*" attributes as it makes me think Javascript might be necessary to use it
- Looky1173 3y ago"data-*" attributes don't require any JavaScript; their values can even be accessed from CSS with `content: attr(data-*);`
- stronglikedan 3y agoI 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.
- lucideer 3y agoThis is a good point. It also makes reasoning about classlists more clean, if all are guaranteed to be managed by your own code.
- robgibbons 3y ago
- Tagbert 3y agoI’m curious, what is the benefit from going “classless”? In my CSS usage, classes have been very useful. Why would you not want to use classes?
- Looky1173 3y agoI'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".
- gbalduzzi 3y agoI 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.
- Looky1173 3y agoExactly! 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.
- Tagbert 3y agoThanks for the feedback. That is pretty much how I have approached things but I was wondering if I was missing some “gotcha” about classes.
- oceankid 3y agoLooks 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.
- Looky1173 3y agoLike `display: flex; flex-direction: column; width: 100%;`?
- oceankid 3y agosection { display: flex; flex-wrap: wrap; } section > * { flex: 0 0 auto; } section > *:not(:last-child) { margin-right: 1rem;}
- aerio 3y agoPersonally that is a terrible idea. <section> should be used for semantic purposes, not layout. Also, why not use "gap" instead of "margin-right-but-not-last-child"?
- deleted 3y ago[deleted]
- mblode 3y agoHere’s a similar project I made when I was a teenager: Marx, The classless CSS reset (perfect for Communists). https://github.com/mblode/marx https://github.com/mblode/marx
- Looky1173 3y agoI like it, it's very minimalist and purist!
- Looky1173 3y agoI've just added basic form styles. More to come soon...
- desireco42 3y agoI was about to suggest that. 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.
- jadbox 3y agoIs it possible to apply a set of tailwind styles to base tags?
- Looky1173 3y agoIndividually, yes.
- alberth 3y agoMVP.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/ https://andybrewer.github.io/mvp/
- Looky1173 3y agoMVP.css is very complete and robust, but its styles and general feel do not resonate with me.
- alberth 3y agoYou have the ability to completely customize look & feel. Example sites using MVP.css include https://www.mondage.com https://www.mondage.com https://searchcode.com https://searchcode.com
- schemescape 3y agoDoes “themable” just mean that it uses CSS variables to make it easy to change colors?
- Looky1173 3y agoYes; there are 7 CSS variables to tweak and play with. I might add more in the future (for example, for `border-radius`).
- dohliam 3y agoNice 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]. [0]: https://github.com/dohliam/dropin-minimal-css https://github.com/dohliam/dropin-minimal-css [1]: https://dohliam.github.io/dropin-minimal-css/?lissom https://dohliam.github.io/dropin-minimal-css/?lissom
- Looky1173 3y agoThank 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.
- schemescape 3y agoOne issue: on my iPhone, the heading symbols are partially off screen. Really nice in general though!
- Looky1173 3y agoThey are partially off screen on my iPhone SE as well, I will certainly address this issue soon.