11 ms·
Simple.css – A classless CSS framework
- bradley_taunt 5y agoA big fan of Simple CSS (I see a lot of personal sites using it, actually). I’ll also share my own minimal, classless CSS framework Vanilla CSS[0] [0]: https://vanillacss.com https://vanillacss.com
- AmazingTurtle 5y agoaka yet another markdown css
- baash05 5y agoI suppose you could argue it's really just a mind set.. I took from it the idea of classless. Which I've not really used. It would mean you'd have to have a deeper knowledge of the tags that are available. Which as you said, would boil down to about the same as classes.
- ziggus 5y agoYes, please. The emphasis away from semantic HTML and towards component-based frameworks with all the associated utility CSS classes has been a disaster for accessibility, and it's good to see projects that have all users in mind.
- deergomoo 5y agoI think you're conflating two points there. Component-based frameworks and utility CSS are completely orthogonal to the use of semantic/accessible HTML. Granted you do see things like divs with click handlers used as buttons by people who don't know what they're doing, but I saw plenty of that in the jQuery days too.
- emmanueloga_ 5y agoseems similar to normalize [1] 1: https://nicolasgallagher.com/about-normalize-css/ https://nicolasgallagher.com/about-normalize-css/
- 13324 5y agoAnother great classless css framework is new.css (https://newcss.net/ https://newcss.net/).
- bdn_ 5y agonew.css developer here, thank you :) Happy to see people still enjoying it. I've been meaning to update it for a very long time, but have been working through a lot of coding-based anxiety and burnout for a while. It's encouraging to see people still using new.css though, and I hope to work on upgrades soon!
- powersnail 5y agoNice. Comparing with MVP.CSS, another class-less CSS framework, this has less feature (MVP has a way to create cards), but also seems to avoid two things that I don't like about MVP: centered block quote, and links without underline.
- bingohbangoh 5y agoReminds me heavily of Water.css [0] [0]: https://watercss.kognise.dev/ https://watercss.kognise.dev/
- izietto 5y agoMy favourite one! Every side project I start includes water.css
- awb 5y agoSimilar to MVP.css: https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/ But always happy to see more classless CSS options. Disclosure: Author of MVP.css
- mblode 5y agoThis is my similar project from 2015: Marx - The classless CSS reset (perfect for Communists) https://mblode.github.io/marx/ https://mblode.github.io/marx/
- aetherspawn 5y agoI can see straight away from the home page that there isn't enough margin before h1 > p in the case of the title, and the vertical rhythm is a bit off. Aside from that, the semantic styling for `header` and `nav` is really clever and well done. Looks good.
- Xevi 5y agoIt seems intentional. H1 and paragraphs placed in headers don't have any margin. header h1, header p { margin: 0; }
- TiredGuy 5y agoI wish more designers would look at these minimalist frameworks and add helpful feedback like this. I feel like the aesthetics of a lot of them could be improved with more attention from designers.
- digisign 5y agoInterestingly, there is margin there.
- culi 5y agoResets: • https://meyerweb.com/eric/tools/css/reset/ https://meyerweb.com/eric/tools/css/reset/ • https://piccalil.li/blog/a-modern-css-reset/ https://piccalil.li/blog/a-modern-css-reset/ • https://www.joshwcomeau.com/css/custom-css-reset/ https://www.joshwcomeau.com/css/custom-css-reset/ • http://www.vcarrer.com/2010/05/css-mini-reset.html http://www.vcarrer.com/2010/05/css-mini-reset.html Normalize: • https://necolas.github.io/normalize.css/ https://necolas.github.io/normalize.css/ • https://csstools.github.io/sanitize.css/ https://csstools.github.io/sanitize.css/ Starters: • https://simplecss.org/ https://simplecss.org/ • https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/ • https://watercss.kognise.dev/ https://watercss.kognise.dev/ • https://vanillacss.com/ https://vanillacss.com/ • https://newcss.net/ https://newcss.net/
- leetrout 5y agoThank you!
- ezequiel-garzon 5y agoSome more over here: https://github.com/sw-yx/spark-joy https://github.com/sw-yx/spark-joy
- culi 5y agoAh there it is! I knew there must already be some awesome-list out there for these types of things, but I didn't know how to search for it
- deleted 5y ago[deleted]
- nickcox 5y agoHaven't seen bamboo mentioned here yet: https://rilwis.github.io/bamboo/demo/ https://rilwis.github.io/bamboo/demo/
- TiredGuy 5y agoA lot of people like the larger, more thorough frameworks because: 1. they think it makes newer devs can feel safer 2. dev teams can simply agree on an pre-made modus-operandi for all css without having to have discussions/evolutions on it. But for 1, it also gives newer devs a steeper learning curve, and it gives older devs Yet Another Framework to learn and then possibly discard in a few years. It's also often used like a crutch, where yes the newer dev may feel safer, but they're also not exposed to as many discussions or reasoning around well-organized styling, cleaner semantics, etc. And for 2, it can also add overhead to dependency audits and often for the large frameworks with pre-made components you can end up spending significant resources fighting/working around the framework components when the inevitable unforeseen use-cases come up
- glacials 5y agoI see a bit of straw man here -- thorough frameworks are often liked _because_ they're thorough. Simple.css looks fantastic and I'll reach for it next time I make a simple personal site, but for a professional website with a hundred pages and design considerations that go way beyond "it should look pleasing", I need more levers, leverage, and turnkey components.
- TiredGuy 5y agoI certainly see your point that any unsatisfactorily complete benefit-drawback list is going to seem like a strawman. I meant to point out some of the more commonly stated benefits and contrast them to the less commonly considered drawbacks, but I would also enjoy seeing this thread evolving into a more complete list. I also agree with your other point that that is a benefit for having more bells and whistles in a single branch of dependencies.
- lancesells 5y agoInstall from NPM? Seems strange to have a simple css file as a dependency. Is there a reason for this? Genuine question.
- TiredGuy 5y agoWell one advantage could be that you get the tooling around versioning in case you want automatic minor version updates or stuff like that. And I guess others might find value in inserting it using their bundler as described in the docs if they have other css-related tooling in their bundler like minification or linting.
- gherkinnn 5y agoIf I'm using npm anyway, I might as well keep all of my dependencies listed in the package.json. And if I have CSS integrated in my build (using Next.js or something), importing it will add it to the build bundle size info. It's homogenous and where I'd expect to find things. There's of course no reason to start using npm wizardry for simple.css alone. That would be silly.
- azophy_2 5y agoNice! PicoCSS (http://picocss.com http://picocss.com) is another classless css framework I recommended
- pchangr 5y agoI saw someone had a massive list of similar CSS frameworks here: https://news.ycombinator.com/item?id=29565438 https://news.ycombinator.com/item?id=29565438 Edit: also in here it’s a tool to quickly compare them all. I don’t know if one can mention a user so I’ll just link the comment.
- easrng 5y agoSee also https://mblode.github.io/marx/ https://mblode.github.io/marx/
- efrafa 5y agoThis might sound like a good idea, but sooner or later you will need to integrate some third party library, and you’ll see that properly scoping your styles is better.
- anamexis 5y agoI think if you're doing that, it's not the use case this is made for. It's for making simple, semantic HTML look decent. That's useful.
- ijidak 5y agoI love this!! Will be using this for quick lightweight websites.
- eevilspock 5y agoHighlight styling looks too much like the button styling. https://simplecss.org/demo#links--buttons https://simplecss.org/demo#links--buttons https://simplecss.org/demo#other-typography-elements https://simplecss.org/demo#other-typography-elements
- rglullis 5y agoNow, all we need is to get to take these CSS libraries turn into "themes" for https://headlessui.dev/ https://headlessui.dev/ widgets. Bonus points if we agree onto some standard set for variable names, so frontend developers could then literally just change the "import css" file at the top and have completely different styles.
- phil294 5y ago> just change the "import css" file at the top and have completely different styles. I'm afraid I don't understand the goal here. This is excatly what classless frameworks like Simple.css are doing, and classless is imo a much better solution than us all agreeing onto standard variable names.
- rglullis 5y agoIt's not just because these are "drop-in" files that like these libraries can not be extended or have some variables overridden. For example, TFA says that simple.css uses a variable called "accent" to determine the color of links and buttons. If other styles adopt the same name, then you could just define the "color palette" in one place and have each library working as totally different "design language".
- cuddlecake 5y ago> Bonus points if we agree onto some standard set for variable names They try: https://www.w3.org/community/design-tokens/ https://www.w3.org/community/design-tokens/
- dexwiz 5y agoHow do you theme this? The Showcase all has sites with a similar layout, but different color schemes. Do you have to modify the css file?
- fouc 5y agoYeah, there's global variables at the top of the css file for various settings
- dexwiz 5y agoI see that now, seems like the site should list out the variables that it uses, and which is used for each element. It mentions `accent` for links, but seems like a handful are defined.
- jmarchello 5y agoThe very nature of CSS allows you to them this simply by overwriting the styles with your own CSS. You don't need to edit the original CSS.
- cgijoe 5y agoYo: https://github.com/kevquirk/simple.css/blob/main/simple.css#L47-L50 https://github.com/kevquirk/simple.css/blob/main/simple.css#... img, video { opacity: 0.6; } Do not like. Not even for dark mode.
- deleted 5y ago[deleted]
- thieu96 5y agoThis is nothing new, and it's a bad idea to use this in production. Component you import assume a certain set of default styling, if you overwrite the defaults it'll cause issues. Same as for overwriting javascript prototypes
- bkyan 5y agoCould someone explain the purpose of globally setting image and video opacity to 0.6? I'm confused as to why this framework sets that by default.
- mjrpes 5y agoIt only does that on dark view mode. It's so the image isn't so bright against the other dark elements. There is some thoughts on this here: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#design https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-... It's a nice idea, but I'm not sure how universal accepted this "rule" is, as it does wash out the image quite a bit.
- bkyan 5y agoOh, I totally missed that media query... Guess that's what I get for looking at code using a small cell phone.
- deleted 5y ago[deleted]
- atarian 5y agoThis is really interesting. I’d like to see it handle layouts like sidebars (aside).
- Brajeshwar 5y agoSimple.css is a well done classless 'framework'. I stumbled on it a while back and started using it and thought this can be my go-to styles for tit-bits of websites that I do for landing pages, family websites etc. However, this is pretty opinionated (including some animations) and I had to abandon it. But I remained inspired by its simplicity and forked my own[1] broke it down. I broke it down to the most basic, but then can be built on top of it -- progressively get a website "designed" far enough but not further. If you are into these simple classes, check out Drop-in Minimal CSS[2] and choose the one that fits your need. Simple.css is from an interesting guy, Kev Quirk[3], whose 512kb[4] website was on Hackernews a while back (don't recollect if it was a story or a comment). Hi Kev, if you are around. If you are spinning up a simple website with classless styles, perhaps it is a good idea to add a print styles and I like Gutenberg[5] for that. 1. https://oinam.github.io/oinam-jekyll/ https://oinam.github.io/oinam-jekyll/ 2. https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/ 3. https://kevq.uk/about/ https://kevq.uk/about/ 4. https://512kb.club https://512kb.club 5. https://github.com/BafS/Gutenberg https://github.com/BafS/Gutenberg
- ecliptik 5y agoKev also runs Fosstodon [1] which is an awesome Mastodon instance focused on free & open source software. 1. https://fosstodon.org/about https://fosstodon.org/about
- smoldesu 5y agoI see a ton of cool fedi people from that site. Rock on!
- kevq 5y agoHi!
- johnisgood 5y agoWow! https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/ is amazing. I had absolutely no idea that you can have such a color picker with pure HTML. When I click on it, my browser's color picker comes up. This is amazing. I always had issues picking the right color picker or implement my own. I love the date input as well! Thank you!!!
- lgessler 5y ago"simple" -- I wish we'd retire this word. We're all in the desert, and there is not yet an oasis.
- sphars 5y agoLove these simple classless frameworks. Inspired me to create my own: https://sphars.github.io/yacck/ https://sphars.github.io/yacck/
- jszymborski 5y agoThis is pretty great!
- deleted 5y ago[deleted]
- chrismorgan 5y ago--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif; --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; Here are better stacks that achieve almost identical results for almost all users that haven’t customised their font stacks, but respect user preferences better: --sans-font: system-ui, sans-serif; --mono-font: Consolas, monospace; (If Mozilla would get on and fix <https://bugzilla.mozilla.org/show_bug.cgi?id=713680 https://bugzilla.mozilla.org/show_bug.cgi?id=713680>, I’d ditch Consolas, though you won’t want to leave it at just monospace because of the stupid default monospace font size thing [that should really never have happened but should absolutely have been retired by a decade ago], so most people write `monospace, monospace`, though I like to shorten it to `monospace,m`.) /* Line height is set to the "Golden ratio" for optimal legibility */ --line-height: 1.618; That comment seems disingenuous, especially given the `line-height: 1.1` applied to headings which shows an awareness of the issues. There is no single optimal value: it varies by font, by size, by line width, by reader’s eyesight… you can’t just slap a nice mathematical ratio on it and call it optimal. As it stands, 1.618 is decidedly on the high side, though not outlandishly so. I personally prefer 1.4. body { overflow-x: hidden; } Please don’t. If this does anything, it’s a sign that you’ve written something the wrong way, and if it doesn’t, you should be scared that it will in the future, and will cut off some content and render it inaccessible, rather than breaking out of your site layout but leaving the content intact. In this case, it looks to have been done because the width limit was applied to the body element, but not desired for the header and so worked around, but the trouble is that you can’t do that correctly because CSS doesn’t have suitable units (vw and vh are fundamentally stupidly broken by design (the spec provided an esoteric way of unbreaking them, but only Firefox implemented it, so eventually they removed it), and always wrong, though the amount of error is sometimes tolerable for some restricted purposes). The width limit should rather have been applied to descendants of the body (main/footer); then you could leave the body overflow alone. @media (prefers-color-scheme: dark) { img, video { opacity: 0.6; } } Eww. Eww. This is a horrible idea to apply as a general rule: it’ll be suitable for some images (… by accident as much as anything), but ruin others; and a 40% reduction is excessive. But not only that, opacity is the wrong technique, being sensitive to the background (the most extreme example: put an image inside a <button>); a filter using brightness and/or contrast would be better. —⁂— Although I’m not impressed with some of the stuff at the start of the stylesheet, after that it looks pretty solid. There are occasional points that I’d quibble over, but nothing major. I’ll stop here, this comment is already moderately long. Hmm. I always seem to do some kind of review when these things come up here, can’t quite help myself; I should get on and finish starting that new section on my site for such matters (reviews, occasionally of projects, more of code, mostly CSS/JS/Rust).
- louismerlin 5y agoVery cool project ! I created my own classless CSS framework[1] in the same vein. It adapts to your system’s dark/light mode and is under 1kb minzipped. I would recommend to check out the drop-in minimal CSS page if you want do discover new projects like these. 1. https://concrete.style/ https://concrete.style/ 2. https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/
- fareesh 5y agoSometimes folks do things like "The <span> in the <p>aragraph of the <article> will be font-weight: 300" and that stuff is more difficult to keep track of than classes. Beyond the existing HTML tags if everything is a <div> that may end up being more semantic and easier to parse. Web components is an ugly and terse way of achieving it, but too JS dependent and annoying.
- pkz 5y agoWhat would the web look like if this (or similar) was the default stylesheet in all browsers?
- cjohansson 5y agoThanks for doing this, it's a great response to the current trend in providing endless of css and js just to display basic sites
- hutrdvnj 5y agoBut if you have a cache hit for minified bootstrap css, which is very likely after a little bit of surfing, then it's 0kb data compared to 4kb. It's a bit like shared libraries in linux, you might just use the library that almost everyone has installed or you compile a static binary, both solutions have their pros and cons.
- alin23 5y agoThis is no longer the case since cache partitioning was released: https://developers.google.com/web/updates/2020/10/http-cache-partitioning#how_will_cache_partitioning_affect_chromes_http_cache https://developers.google.com/web/updates/2020/10/http-cache... Cache keys are now tuples of (host, resource) so if you download and cache bootstrap.js on example.com, and then go to bootstrapsite.com which hosts the same JS file, you'll have to download it again because the cache keys are different: example.com -> bootstrap.js -> cached as (example.com, bootstrap.js) bootstrapsite.com -> bootstrap.js -> cached as (bootstrapsite.com, bootstrap.js) (example.com, bootstrap.js) ≠ (bootstrapsite.com, bootstrap.js)
- anyfactor 5y agoI am a big fan of classless CSS frameworks. I hope that anyone who sells/shares web design templates can learn from this philosophy of using classless framework.
- kevq 5y agoCreator of Simple.css here. Thanks for all the feedback and comments here, folks. It really is appreciated. I’m not a professional web designer - this just started off as a personal project that I ended up publishing as people I shared it with seemed to like it. I’m taking on board the various feedback from people much more knowledgeable than I here, again I really appreciate it. If you do have feedback/changes I’d urge you to log an Issue or a PR on Github[1]. Also great to see so many other minimal CSS projects that I wasn't aware of. I’ll have to add an alternatives page to the site, I think. [1] https://github.com/kevquirk/simple.css https://github.com/kevquirk/simple.css
- tgb 5y agoI was looking for something just like this two weeks ago and came up empty due to Google being filled with just the huge frameworks like bootstrap or with SEO listicles with no content. It's disappointing how hard it can be to find stuff like this. (I guess "classless" is the keyword I wasn't aware of.) Anyway, I'm confused about what makes something a CSS 'framework'. I feel like I just want decent defaults more than a framework, and that seems to be what this basically comes down to. Is there anything else to it?
- kevq 5y agoThat’s what I see a framework as being - sane defaults. It’s a way to get started quickly without having to write everything from scratch. I would argue that “frameworks” like Bootstrap, Tailwinds and their ilk are more ecosystems than frameworks, but that’s just me. :)
- FrontAid 5y agoYou can have a look at https://github.com/troxler/awesome-css-frameworks https://github.com/troxler/awesome-css-frameworks which is an extensive collection of CSS frameworks. Check out the "Class-less" section for similar projects. There is also an open PR to add Simple.css to the list: https://github.com/troxler/awesome-css-frameworks/pull/85 https://github.com/troxler/awesome-css-frameworks/pull/85
- animesh 5y ago
- wastholm 5y agoA nitpick perhaps, but I was surprised to see `cite` used to enclose the author's name in your `blockquote` example. I was under the impression that `cite` is meant to be used to mark up titles of books and similar, not author names, and MDN[1] seems to agree with me here. That aside, nice work! This could surely be useful as a default stylesheet for Markdown documents and the like. [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ci...
- kevq 5y agoThat’s good to know, thanks. I always (incorrectly it seems) assumed that a citation was valid within a blockquote too.
- chrismorgan 5y agoThe recommendations on markup for citation sources has changed significantly over time. Originally they said something like <blockquote>… <cite>…</cite></blockquote>, then they changed it to <blockquote>… <footer><cite>…</cite></footer></blockquote>, now they seem to be saying <figure><blockquote>…</blockquote><figcaption><cite>…</cite></figcaption></figure> Similarly what should be included in the text inside a <cite> element has changed over time. Frankly, since the cite element has no implicit ARIA role and is normal flow and phrasing content, it’s roughly just another spelling of <i>. Don’t worry too much about its nominal semantics, they’ll probably tweak them again before long.
- andix 5y agoGood idea, doesn’t look very nice on mobile though. I think the text is too big and the borders on the side too small. Maybe it’s possible to build something similar based on tailwind (with a lot of @apply), which would allow customization.
- lbj 5y agoMeta question: I really love this post/framework, but have no use for it right now, so I'm putting it in my bookmarks where my ability to pick it back up relies on my memory of this post. How do you guys manage your bookmarks?
- Semiapies 5y agopinboard.in for me.
- Gentil 5y agoWhen it comes to being minimalist, can you not make TailwindsCSS as minimal as necessary or go crazy with it as you see fit? I found it having the right balance. Especially since it is popular with better support and good documentation. Just curious about the thoughts since I have never dived the classless CSS train. Also am new to front-end.
- goblin89 5y agoA classless CSS framework is a good fit if you’re looking for a simple and lightweight solution that doesn’t require dipping into Node ecosystem or learning an idiomatic class name system. Why not just use Tailwind? It, for example, essentially requires a front-end build step: it must read your source HTML files in order to know which CSS rules to bundle. (Without that it would have no choice but to serve a multi-megabyte stylesheet with all possible selectors.) Tailwind may be a good choice if you need more control over appearance, you are OK involving Node at pre-build, but you can’t write isomorphic GUI components—e.g., you’re providing server-rendered HTML with a non-JS back-end.
- Gentil 5y agoThanks for clearing my doubt. I appreciate it. :)
- borntohate 5y agoIn the recent years, I have ample themes to style my markdown based blog site which no one reads.
- jebronie 5y ago<button onclick="window.location.href='https://example.com';">I'm a button with a link</button> This code from the demo shows, why not using classes to style a website is a misguided idea. Maybe something like this would be a better idea if you absolutely must avoid classes: https://jsfiddle.net/qa2cdj4v/ https://jsfiddle.net/qa2cdj4v/ <strong><a href="#">Button</a></strong> strong > a:first-child:last-child { display: inline-block; background: red; color: white; padding: 10px; font-weight: normal; }
- fath0m 5y agowhy not just use <form action="https://example.com"><button type="submit">Link button</button></form> no need for JS
- yurishimo 5y agoWhy not use use an anchor tag?
- stefanfisk 5y agoBecause you cannot make `form` `inline-block` for only this instance without classes.
- thomascz 5y agoI can't understand why so many websites use an onclick handler on a button to redirect to websites. It's not hard to even find something like <a href="#" onclick="location.href='https://example.com';">click https://example.com';">click here</a> The worst part is that it's not just random websites doing this, this can be found on most FAANG websites as well.
- notjustanymike 5y agoYep that's a pretty fundamental accessibility failure.
- nkrisc 5y agoA love style sheets like this that just work with plain, semantic HTML. For a while I used this one on a site of mine: https://github.com/programble/writ https://github.com/programble/writ Which I believe I found here on HN some time ago.
- beardyw 5y agoI was hoping for a solution like vanilla-js http://vanilla-js.com/ http://vanilla-js.com/ Ah well.
- albeva 5y agoWebsite broken / cuts off on Safari ...
- deleted 5y ago[deleted]
- swyx 5y agoI collect a list of similar lightweight/drop in CSS frameworks here: https://github.com/sw-yx/spark-joy#drop-in-css-frameworks https://github.com/sw-yx/spark-joy#drop-in-css-frameworks enjoy!
- hamedb 5y agoit's more like a CSS reset file than a framework. in that case I don't see adding 4kb is necessary. I'm more a fan from styling everything from scratch rather than using any CSS framework. we just need better tooling to write better CSS faster not necessarily including prewritten CSS. I deeply believe this is where CSS going and this why I'm building https://intab.io https://intab.io to push towards that direction myself.
- jacobr 5y agoI called my classless (even though it really wasn’t, just like in politics) CSS library marcssist https://github.com/jacobrask/marcssist https://github.com/jacobrask/marcssist Barely even used it myself though, if anyone else likes bad puns feel free to steal the name
- UltraViolence 5y agoI really like it, but it needs more work on the navigation. A more conventional looking navigation similar to Bootstrap's would be nice.
- ejanus 5y agoWhere can I get good introductory materials on HTML and CSS? I don't want frameworks.