22 ms·
Concrete.css
- kkarpkkarp 3y ago<select> element without dropdown arrow indicator, nice... /s
- ambigious7777 3y agowater.css[0] and pico.css[1] are some of my favorite classless css libraries. There's a full list of them here: https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css [0]: https://watercss.kognise.dev/ https://watercss.kognise.dev/ [1]: https://picocss.com/ https://picocss.com/
- thunderbong 3y agoI've tried a few of these 'classless CSS'. But I mostly end up with 'water.css'. It gives me the least amount of surprises.
- jszymborski 3y agoWater is great. Simple.css is another one I like. Also super simple to customize. https://simplecss.org/ https://simplecss.org/
- julianwachholz 3y agoI love Pico and wanted to point out there's very active development for a soon to be released v2: https://v2.picocss.com/ https://v2.picocss.com/
- lagt_t 3y agoPico with bootstrap's grid system would be a dream.
- sgdesign 3y agoYou don't need a grid system now that CSS Grid exists.
- lagt_t 3y agoThe responsiveness of bootstrap's grid is something that css doesn't have. With a few classes I can make the same site for mobile and ultra wide screen.
- Izkata 3y agoYou'd do it with media queries and make different grids for different screen sizes. If anything it's more flexible than bootstrap because you can change element order as well.
- lagt_t 3y agohttps://getbootstrap.com/docs/5.3/layout/columns/#reordering https://getbootstrap.com/docs/5.3/layout/columns/#reordering Bootstrap grid system is super complete, and probably better coded that anything I can make. Its also available as a standalone module, so the size is pretty small. I just wanted it integrated to PicoCSS because I'm lazy.
- Izkata 3y agoA really quick example of switching between desktop and mobile page layouts at 800px: @media (min-width: 800px) { #page { grid-template-areas: "header header" "menu content" "footer footer"; } } @media (max-width: 800px) { #page { grid-template-areas: "header menu" "content content" "footer footer"; } }
- bemusedthrow75 3y agoThis is very helpful! I've been looking for a tiny classless CSS framework to go with petite-vue in a build-step-free app for a microcontroller project. water.css looks a good candidate already but there are some others to investigate there.
- jamietanna 3y agoWater looks nice, I've not used that before. I usually use https://classless.de https://classless.de because it supports theming, so I can add the bare minimum CSS to make it feel like a different site to another of my sites using it.
- rrishi 3y agooh this one is really good
- Zababa 3y agoI love the bookmarklet from water.css, it allows you to turn lots of websites into something more readable.
- thunderbong 3y agoOh! I want aware of that! Thanks, have to look into it
- brnt 3y agoVote for mvp.css [0] here. [0] https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/
- vitorsr 3y agoHere is another such list: https://github.com/dohliam/dropin-minimal-css https://github.com/dohliam/dropin-minimal-css
- Alifatisk 3y agoI suggest checking out milligram.io, I enjoyed using it a lot!
- KTibow 3y agoSome stuff like the drop down arrow doesn't look right in dark mode, would likely be fixed with `color-scheme: dark`
- louismerlin 3y agoThere is no drop-down arrow in light mode either, which does create an accessibility issue, I'll have to reflect on that. I created the style-sheet to be as minimalist as possible, but there is such a thing as too much minimalism.
- kmoser 3y agoNot sure I would make the "disabled" buttons stand out more brightly than a regular button. In fact I would swap the colors of those buttons, or maybe make the disabled button greyed out.
- infotainment 3y agoAgreed. One thing that a lot of people miss when attempting to comply with WCAG contrast guidelines is that disabled controls are specifically exempt. With good reason, IMO — too much contrast and it’s not clear that an element is disabled.
- geraldwhen 3y agoAnd yet younguns with good eyes and no color blindness will be able to read the text, and others won’t. If you let a designer put grey on grey once, they’ll do it 10,000,000 times.
- louismerlin 3y agoI limited myself to black and white when creating the style-sheet, but maybe I should indeed add some kind of indicator for the "disabled" button, such as hatchings. edit: hatchings make the inner text unreadable, I'll play around with opacity and dotted lines, thank you to the users who proposed them. edit 2: went with dashed lines and published a new version. It even shaves off a couple of bytes off the minimized version :D
- n3storm 3y agoI am a big fan of brutalism but having all those line with same weight and hierarchy in terms of width, proximity and absolute black keeps me out from focusing in textual content.
- jasonjmcghee 3y agoUptime sniper link is broken
- sevg 3y agoLooks like a failed/abandoned project. The user that opened the PR (only 6 months ago) to add uptimesniper to the list has since deleted their GitHub account, and the uptimesniper website and twitter are gone. I guess someone sniped its uptime!
- louismerlin 3y agoYup, I'll remove it from the list, thank you for catching this.
- robador 3y agoThis doesn't look right with the dark reader extension in firefox. I would expect a website that's compatible with dark mode to work with dark reader (I.e. I would expect dark reader to not influence the CSS in that case)
- Semaphor 3y agoThat is sadly not the case. I disable dark reader for all sites supporting darkmode because it always changes them.
- julianwachholz 3y agoI would never expect a browser extension to work flawlessly with every possible site out there. You are the user of the extension. Does it break a site? Submit a patch to the extension! Certainly don't complain to the website author who has no control over what extensions you personally use.
- louismerlin 3y agoOh wow, crazy to see my project on HN! Thank you soap-3 for submitting it :D I really appreciate all of your suggestions, I'll patch the issues up asap.
- asp_hornet 3y agoIt’s really cool, what was some of your inspiration and thoughts behind it?
- louismerlin 3y agoI had been using similar projects such as skeleton[0] and milligram[1] for small experiments such as repfl[2], and wanted to create something similar that I would find aesthetically pleasing and that would fit in as little space as possible. The current version of concrete.css is less than 1kb minzipped! [0] http://getskeleton.com/ http://getskeleton.com/ [1] https://milligram.io/ https://milligram.io/ [2] https://repfl.ch/ https://repfl.ch/
- neitsab 3y agoPlease, please pretty please, can we stop with the automatic switching to dark mode if the system uses a dark theme? Chrome UI elements and webpages serve fundamentally different purposes, and have wildly different readability needs! At a minimum, please provide a way to switch between mode so that we can have some design granularity back. Thanks!
- reitanuki 3y agoI suspect this is a problem for your browser? The CSS media query only makes sense as 'prefers dark webpages' — there'd be no point having it, if it means 'the browser theme is dark and it doesn't matter what the user prefers in terms of web pages'. Your browser should offer you a setting to choose whether you prefer dark webpages or not (SEPARATELY from the browser theme). Not sure if Chrome currently does but if this annoys you, it would be worth looking for.
- numtel 3y agoI used this for a few hackathon projects. It's great for simple layouts https://ethglobal.com/showcase/lwned-75x0f https://ethglobal.com/showcase/lwned-75x0f https://ethglobal.com/showcase/undefined-88xn6 https://ethglobal.com/showcase/undefined-88xn6
- theodorc 3y agoIts fun and it looks good, but if you ever want to migrate away from it you pretty much have style everything all over? You can't just change the style of a a single tag?
- louismerlin 3y agoAlternatively you can migrate to another classless framework and not change a thing :) https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css
- rcarmo 3y agoVery nice. I do have to wonder what the Web would have been like if browser default style sheets were less crappy and actually thought out like this.
- blowski 3y agoAbout the same as it is. My time working in web agencies has taught me that the vast majority of website owners don’t want to look the same as everyone else, and they want whizzbang high-tech widgets that make them look advanced. Usability all comes second to that.
- notfed 3y agoWould this be more correctly called a CSS "stylesheet"? Calling it a "CSS framework" really sent me in a loop trying to figure out what "framework" means.
- geek_at 3y agoModern CSS stylesheets include configurability via CSS variables on the root element so maybe that's where the "framework" comes from. Also note: This project looks like an even more minimized version of PicoCSS [1] [1] https://picocss.com/ https://picocss.com/
- lf-non 3y agoOh pico looks very nice - and something I am likely to actually use. concrete is a bit too minimal for me. I like the concept of classess css but most of the solutions I looked at (before pico) were just not very pleasing oob.
- louismerlin 3y agoVery good point, I modified the page. The project started-out non-classless, so the term was more appropriate back then.
- bestest 3y agoWhat you said is literally "Cascading Style Sheets stylesheet". Stick with "framework".
- tiborsaas 3y agoNice idea and naming, I love concrete and brutalism. I miss some concrete texture, could be easily done with SVG filters. Also, concrete is gray, but this is black and white, I'm not really sure that fits the theme perfectly. Maybe a single modifier class on the body would make sense. Edit: I see that it detects my OS dark theme, but the site could help me compare with the normal mode.
- soap- 3y agoYou can change your preferred color scheme temporarily in dev tools I believe it's called concrete because of brutalist architecture and how it's almost always made with concrete
- iraldir 3y agoFor personal projects, I really wish there was some sort of semantic CSS with many different implementations, which this could be one of them. What I mean is a set of rules on how to structure your HTML (like use a main element here) with some set expectations of how it will be structured on the page. Then, many different people could write different spritesheet that makes the same HTML looks widely different. I'm not just talking colour, but fonts, radius, opacity, animations, etc. etc. One stylesheet could make the HTML look barebone black and white, where another makes it look all in gradients of purple with fancy animations etc. All for the purpose of writing simple application where you don't care so much about how they look. - classes would not be used - CSS variables would not be used - just plain old div, H1, section etc.
- FireInsight 3y agoSemantic HTML exists and is usable, most developers just want to make their site look like they want (nothing wrong with that). Problems arise when sites don't use semantic elements, style with bespoke class systems. And functionality or markup can't be changed with CSS, so when that's related to the theme it's quite hard to change.
- Tade0 3y ago1. Modify the base font-size to 62.5% so that 1.6rem = 16px. That is not a given as it depends on browser settings and it generally doesn't mix well with other CSS that might not make the same assumption.
- louismerlin 3y agoI borrowed this from Milligram[0] because it seemed like a sane thing to do at the time. Would your recommendation be to not anything to the base font-size and adjust the REM sizes accordingly? [0] https://github.com/milligram/milligram/blob/d895f179623b56f3a741854998649c6d0c354533/src/_Base.sass#L11-L15 https://github.com/milligram/milligram/blob/d895f179623b56f3...
- Tade0 3y agoYes. In relation to this since you're using rem for borders and progress bar height, it's all going to scale along with browser-defined font size. You might not want that, as people typically increase this setting to have just the text larger.
- asp_hornet 3y agoI love it. Simple and restrained with kind of a retro macintosh feel.
- vvoyer 3y agoSimple, to the point, love it
- jug 3y agoRefreshingly simple, almost to the point of an aversion to other minimalist competitors like Milligram. I like it. As someone else said here, it brings my mind to an alternative web with browsers that had a better default and standardized stylesheet. Oh how I wish for this. Can't just Chrome, Firefox, Edge, Safari all just adopt this one? Setting up no-CSS sites would be a more sensible thing and we would have less need of Gemini (https://geminiprotocol.net/ https://geminiprotocol.net/). One can dream... Of course, now sites widely rely on a random set of margin defaults, base sizes etc. brought into their websites, so ripping out and changing those wouldn't be quite that simple.
- yoavm 3y agoTo be fair, to create a web that has no need for Gemini I think no-JS sites would take us much further than no-CSS. It's relatively easy to disable CSS (Firefox: View - Page style - No style), and generally not much will actually break. But disabling JS would more than often break the website functionality completely.
- chiefalchemist 3y agore: Project Gemini - Gemini in 100 words Reading that reminds us how far we have *not* come. We were promised jetpacks, and instead we got the internet. A pro-distraction, privacy violating, social fabric tearing, power tool. More Big Brother, less prophet / savior.
- AeroNotix 3y agoMy honest hot take is that we made computers too easy to use. I appreciate how liberating computers and the internet can be for a lot of people but it has been far too easy to implement dark control through them.
- _benj 3y agoIf I dare reply your hot take with my hot take, It was engineers who implemented those dark patterns. I think that still “lots of people” see excel formulas as stuff that geniuses do, so I think it comes down to us. Will I write that privacy invading, psychologically manipulating code, or would I say no. Sure, if I don’t do it “somebody else would”, but I wonder if that mentality has taken us here
- andriamanitra 3y agoIt looks great but I would not be able to use it as-is because different kinds of elements (button, textbox, dropdown) look too similar. I'd rather make an ugly but usable site than the other way around.
- self_awareness 3y agoI'm really not a fan of brutalism (in UI and in architecture) and I think that our monitors have 24-bit color depth for a reason. Such extreme simplification of UI is not the way I think. (Microsoft has attempted this in Metro, but quickly withdrew from this idea)
- WorldMaker 3y agoMicrosoft's Windows 8 era "Metro" guidelines were extremely colorful. They often emphasized one single brand accent as a standard across an app, but it could be just about any color you wanted. Or one single accent color of the user's choice to give them a sense of personal ownership. They also emphasized the importance of "full bleed" photography and what a colorful wallpaper with basic parallax effects can do to make an app seem alive. Most of the really vibrant "magazines" and apps and "hubs" only ever really existed on Windows Phones at that time and most desktop apps stuck to a bare minimum so most people missed all the good colorfully and playfully vibrant examples of what those UI guidelines could be when done right.
- self_awareness 3y agoMaybe in theory it was colorful (I've never read the actual design documents), but in practice the complexity of "legacy" multiple-color controls that were 3d and gradiented was switched to extremely simplified, mono-color equivalents which made me wonder if what I'm about to click is a control or just a simple text label. I've never used Windows Phone as well, so I can't compare to how Metro looked on those devices. I only know what they've done with Metro on Windows on PCs.
- maxk42 3y agoI've been loving classless CSS frameworks and have been using them extensively for personal projects for around four years now.
- cyco130 3y agoLooks fine to me apart from the buttons. But if we're talking about "classless", some _has_ to mention Marx[1]. [1] https://mblode.github.io/marx https://mblode.github.io/marx
- poidos 3y agoSee neat.css [0] for another take on this. [0]: https://neat.joeldare.com/ https://neat.joeldare.com/
- nc0 3y agoAs it is often said in various designer forums, please avoid pure white (#FFFFFF) on black (here #111111), as it makes the text glow for the human eyes (therefore making it unreadable for long text). Instead, try to lower a bit the contrast on the text color. Also, the dispositions for the buttons at the beginning (GitHub, NPM, ...) are not adjusted correctly for keyboard navigation (each button requires two tabs). Appart from that, I do like a minimalist stylesheet, so I will also recommend Tufte CSS [0] for readers. [0]: https://github.com/edwardtufte/tufte-css https://github.com/edwardtufte/tufte-css
- dvdkon 3y agoThis really depends on the user's display and the viewing conditions. Someone with a TN LCD or even an OLED in bright light would likely prefer the "high contrast" #FFF on #000.
- icar 3y ago[dead]
- pier25 3y agoIt's also an accessibility issue. People with astigmatism might have a hard time with bright text over dark background. https://medium.com/@h_locke/why-dark-mode-causes-more-accessibility-issues-than-it-solves-d2f8359bb46a https://medium.com/@h_locke/why-dark-mode-causes-more-access...
- codingcoyote 3y agoAs someone with astigmatism, I prefer dark modes in almost all places as long as it's done correctly. Bright screens with dark text cause significantly more eyestrain for me. My wife also has astigmatism and prefers light backgrounds with dark text. For the same reasons. I think the key here for accessibility is choice.
- pier25 3y ago
- amadeuspagel 3y agoSo this is the way you're supposed to use it? Is this accessible? <a href="https://github.com/louismerlin/concrete.css"><button>GitHub</button></a> <a href="https://www.npmjs.com/package/concrete.css"><button>npm</button></a> <a href="https://unpkg.com/concrete.css"><button>CDN</button></a>
- louismerlin 3y agoOnly if you want a hyperlink that looks like a button. It's the only way I was able to do it in a classless way, but I'm open to other ideas.
- amadeuspagel 3y agoYes, I've understood that. But a hyperlink that looks like a button -- that's the kind of thing we have CSS for, and CSS also allows you to do more complex things, like a hyperlink that's more prominent then a typical link and invites you to click it, like a button, but which is still recognizable as a link, for example with an underline on hover, so that you know you can open it in a new tab.
- Alifatisk 3y agoIt makes me happy reading all the comments agreeing on the same thing, the web should be more minimal.
- YuukiRey 3y agoI skimmed the CSS and I don't see the appeal. There's no reason, in my opinion, to give a section a default `4rem` vertical padding. Given that the stylesheet is really small, I'd at best consider this a solution for a tiny proof of concept if you want to demonstrate something to colleagues. I'd rather suggest people copy it into their own CSS and use it as a template. It also adds a margin to certain elements which is almost always a no-go. It's super rare that the margin around an element is part of this element's intrinsic properties. In general I think people would get much more mileage out of https://every-layout.dev/ https://every-layout.dev/ (not affiliated). It's one of the best programming related books I've read in a while and it really changed the way I think about CSS in general.
- louismerlin 3y agoThank you for your comments, I've opened an issue and will look into best practice :) https://github.com/louismerlin/concrete.css/issues/4 https://github.com/louismerlin/concrete.css/issues/4
- synergy20 3y agohttps://classless.de https://classless.de has been my favorite for simple sites, it's 400 lines, responsive. bootstrap compatible. just checked out pico classless and it also works great.
- toastal 3y ago> <link rel="stylesheet" href="https://unpkg.com/[email https://unpkg.com/[email protected]/normalize.css"> Thanks Cloudflare
- DeathArrow 3y agoWhat's wrong with Tailwind CSS?
- swyx 3y agoi collect these! https://github.com/swyxio/spark-joy/blob/master/README.md#drop-in-css-frameworks https://github.com/swyxio/spark-joy/blob/master/README.md#dr...
- NotHereNotThere 3y agoFirst thing that came to mind was the Slackware Linux website [0] style (which hasn't changed since I last looked at it in early 2000's) [0]: www.slackware.com
- miteyironpaw 3y ago1999 even! Here's a wayback machine capture from Nov 1999 with the current theme https://web.archive.org/web/19991117022152/http://slackware.com/ https://web.archive.org/web/19991117022152/http://slackware.... Honestly a really good theme that's stuck around so long it's even fashionable again.
- kemayo 3y agoIt looks fine, and I guess it's going for a theme, but I actively disagree with removing the color from links. Making a link and underlined text completely indistinguishable is a bad idea for usability. That alone makes this something I would never drop-in to a simple site.
- dnlzro 3y agoWhether it is a bad idea for usability depends on what you are trying to accomplish. For example, Matthew Butterick's online book Practical Typography styles links so that they are not highlighted or underlined in any way. Instead, they are instead followed by a small red circle [1]: "Vigorously styled hyperlinks on a page tend to move to the foreground of a reader’s attention, like an HDTV in a hotel bar. [...] The red circle is meant to be noticeable while you’re reading the sentence that contains the link. Otherwise it disappears, so as not to distract." [1] https://practicaltypography.com/how-to-use.html https://practicaltypography.com/how-to-use.html
- carlosjobim 3y agoI think you should never underline paragraph text in hypertext, underlines are specifically for hyperlinks. There's italics and bold to better put attention to a passage.
- elicash 3y agoI used a different classless stylesheet once because during a live event I had to have someone who doesn't code at all update an HTML file (and upload it) repeatedly and I wanted to make it as simple as possible for them. I think I used MVP.css? It was definitely one of the ones from that GitHub list that's already linked here, at the time I checked them all.
- microflash 3y agoClassless CSS is pretty great. I've my own[1] for my personal site. [1]: https://github.com/naiyerasif/site/blob/1d43c689c7c4035e2e02839305bebae54559aecf/src/styles/_prose.scss#L1 https://github.com/naiyerasif/site/blob/1d43c689c7c4035e2e02...