[HN Gopher] Concrete.css
___________________________________________________________________
Concrete.css
Author : soap-
Score : 300 points
Date : 2024-02-08 04:04 UTC (18 hours ago)
(HTM) web link (concrete.style)
(TXT) w3m dump (concrete.style)
| ambigious7777 wrote:
| water.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
|
| [0]: https://watercss.kognise.dev/ [1]: https://picocss.com/
| thunderbong wrote:
| I'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 wrote:
| Water is great.
|
| Simple.css is another one I like. Also super simple to
| customize.
|
| https://simplecss.org/
| julianwachholz wrote:
| I love Pico and wanted to point out there's very active
| development for a soon to be released v2:
| https://v2.picocss.com/
| lagt_t wrote:
| Pico with bootstrap's grid system would be a dream.
| sgdesign wrote:
| You don't need a grid system now that CSS Grid exists.
| lagt_t wrote:
| The 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.
| bemusedthrow75 wrote:
| This 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 wrote:
| Water looks nice, I've not used that before.
|
| I usually use 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.
| Zababa wrote:
| I love the bookmarklet from water.css, it allows you to turn
| lots of websites into something more readable.
| thunderbong wrote:
| Oh! I want aware of that! Thanks, have to look into it
| brnt wrote:
| Vote for mvp.css [0] here.
|
| [0] https://andybrewer.github.io/mvp/
| vitorsr wrote:
| Here is another such list:
|
| https://github.com/dohliam/dropin-minimal-css
| Alifatisk wrote:
| I suggest checking out milligram.io, I enjoyed using it a lot!
| KTibow wrote:
| Some stuff like the drop down arrow doesn't look right in dark
| mode, would likely be fixed with `color-scheme: dark`
| louismerlin wrote:
| There 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 wrote:
| Not 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 wrote:
| Agreed. 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 wrote:
| And 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 wrote:
| I 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
| topicseed wrote:
| Opacity maybe would help here.
| yreg wrote:
| Could border-style dashed/dotted work?
| PetitPrince wrote:
| Hatching seems an excellent idea.
| krsdcbl wrote:
| this could be a rare but very practical usecase for strike-
| through text
| yreg wrote:
| Wow, I love that!
| kthartic wrote:
| Hmm I think the dashed lines still don't say to me "disabled"
| unless you told me. It looks more like a secondary button (eg
| "Go back" or "Cancel"). I really do think the use of reduced
| opacity would make sense here :)
| sn0wleppard wrote:
| The buttons also need a hover/focus state, easy win for
| accessibility there
| krsdcbl wrote:
| definitely - could use outline property, transforms/thickened
| borders or border radius animations if it's Imperative to
| keep things black and white
| kmoser wrote:
| Agreed, maybe even just invert it to white-on-black on hover.
| n3storm wrote:
| I 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 wrote:
| Uptime sniper link is broken
| sevg wrote:
| Looks 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 wrote:
| Yup, I'll remove it from the list, thank you for catching this.
| robador wrote:
| This 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 wrote:
| That is sadly not the case. I disable dark reader for all sites
| supporting darkmode because it always changes them.
| xigoi wrote:
| Are you using the dark mode detection feature?
| Semaphor wrote:
| Oh wow, wanted to write "that does not exist", but finally
| found it unexpectedly under "configure website toggling".
| Thanks, that will remove a big annoyance if it works :D
| julianwachholz wrote:
| I 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 wrote:
| Oh 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 wrote:
| It's really cool, what was some of your inspiration and
| thoughts behind it?
| louismerlin wrote:
| I 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/
|
| [1] https://milligram.io/
|
| [2] https://repfl.ch/
| neitsab wrote:
| Please, 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 wrote:
| I 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 wrote:
| I used this for a few hackathon projects. It's great for simple
| layouts
|
| https://ethglobal.com/showcase/lwned-75x0f
|
| https://ethglobal.com/showcase/undefined-88xn6
| rcarmo wrote:
| Very 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 wrote:
| About 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.
| theodorc wrote:
| Its 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 wrote:
| Alternatively you can migrate to another classless framework
| and not change a thing :)
|
| https://github.com/dbohdan/classless-css
| notfed wrote:
| Would 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 wrote:
| Modern 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/
| lf-non wrote:
| Oh 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 wrote:
| Very good point, I modified the page. The project started-out
| non-classless, so the term was more appropriate back then.
| bestest wrote:
| What you said is literally "Cascading Style Sheets stylesheet".
| Stick with "framework".
| noduerme wrote:
| Why? Would you call a DVD disc a spaceship?
| bestest wrote:
| Of course not. By I wouldn't say "DVD disc" because it's
| the same as "Digital Video Disc disc".
| krsdcbl wrote:
| the somewhat lost term "boilerplate" comes to mind
| tiborsaas wrote:
| Nice 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- wrote:
| You 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 wrote:
| For 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 wrote:
| Semantic 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 wrote:
| 1. 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 wrote:
| I 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/d895f179623b56f3...
| Tade0 wrote:
| Yes.
|
| 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 wrote:
| I love it. Simple and restrained with kind of a retro macintosh
| feel.
| vvoyer wrote:
| Simple, to the point, love it
| jug wrote:
| Refreshingly 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/).
|
| 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 wrote:
| To 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 wrote:
| re: 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 wrote:
| My 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 wrote:
| If 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 wrote:
| It 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 wrote:
| I'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 wrote:
| Microsoft'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.
| maxk42 wrote:
| I've been loving classless CSS frameworks and have been using
| them extensively for personal projects for around four years now.
| cyco130 wrote:
| Looks 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
| poidos wrote:
| See neat.css [0] for another take on this.
|
| [0]: https://neat.joeldare.com/
| nc0 wrote:
| As 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
| dvdkon wrote:
| This 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.
| pier25 wrote:
| It'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-
| access...
| codingcoyote wrote:
| As 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 wrote:
| I agree, users should be able to pick whatever works
| better for them.
|
| There's a myth going on that dark mode is
| universally/objectively better which is simply false.
| Swizec wrote:
| I too have astigmatism and am a light mode enjoyer. Dark
| mode makes the letters dance in front of my eyes.
|
| Display brightness at 20% is life. Never made sense to me
| why you'd shine the light of a thousand suns in your eyes
| then put sunglasses on it because "it's too bright" when
| you could just not.
|
| My partner is a dark mode user and honestly sometimes her
| phone screen lights up the whole bedroom. Even with dark
| mode. I don't understand.
| antisthenes wrote:
| I'm with your wife on this one, and also either one of
| those is way better than "grey on whatever" that seemed
| to be a prevalent design choice for a few years for many
| websites.
|
| Low contrast is hell.
| lelandbatey wrote:
| Environmental lighting conditions rule the day! I have
| astigmatism and I prefer bright backgrounds; #000 text on
| #fff backgrounds works great for me, but that's because I
| work in a room lit by a 250W 30,000 lumen corn-cob LED
| bulb[0] that makes my small office as bright on the
| inside as the shaded ground from a tree on an overcast
| day (which is quite bright compared to usual indoor
| lighting). In a room that bright, high contrast text
| works great and is highly readable, with "dark mode"
| often looking washed out and muddy. Even small reductions
| in contrast (such as what https://devdocs.io does with
| text of #333 in light mode) can make me notice and wish
| for greater contrast.
|
| [0] - https://www.benkuhn.net/lux/
| treflop wrote:
| I have astigmatism and dark mode is hard to read.
|
| Black text on white background all day.
| lancesells wrote:
| Tufte is really nice but requires a custom font, which IMO is
| no longer minimal.
|
| And totally agree with black text on white.
| nc0 wrote:
| Agree, that depends on your vision of minimalism and stuff.
| seanwilson wrote:
| > As 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.
|
| If you want an objective measure for this, see APCA:
| https://www.myndex.com/APCA/?BG=000000&TXT=ffffff&DEV=G4g&BU...
|
| From https://git.apcacontrast.com/documentation/APCA_in_a_Nutsh
| el...: "Lc 90 is a suggested maximum for very large and bold
| fonts (greater than 36px bold), and large areas of color".
| White on black scores Lc 108.
|
| It's the likely future replacement for the standard WCAG2
| contrast checker (which becomes really inaccurate for dark mode
| and I don't think makes any suggestion about maximum contrast).
| kkarpkkarp wrote:
| <select> element without dropdown arrow indicator, nice... /s
| amadeuspagel wrote:
| So this is the way you're supposed to use it? Is this accessible?
| <a href="https://github.com/louismerlin/concrete.css"><button>Git
| Hub</button></a> <a href="https://www.npmjs.com/package/c
| oncrete.css"><button>npm</button></a> <a
| href="https://unpkg.com/concrete.css"><button>CDN</button></a>
| louismerlin wrote:
| Only 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 wrote:
| Yes, 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 wrote:
| It makes me happy reading all the comments agreeing on the same
| thing, the web should be more minimal.
| YuukiRey wrote:
| I 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/ (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 wrote:
| Thank you for your comments, I've opened an issue and will look
| into best practice :)
|
| https://github.com/louismerlin/concrete.css/issues/4
| synergy20 wrote:
| 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 wrote:
| > <link rel="stylesheet" href="https://unpkg.com/[email
| protected]/normalize.css">
|
| Thanks Cloudflare
| DeathArrow wrote:
| What's wrong with Tailwind CSS?
| swyx wrote:
| i collect these! https://github.com/swyxio/spark-
| joy/blob/master/README.md#dr...
| NotHereNotThere wrote:
| First 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 wrote:
| 1999 even! Here's a wayback machine capture from Nov 1999 with
| the current theme
| 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 wrote:
| It 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.
| dlazaro wrote:
| Whether 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
| carlosjobim wrote:
| I 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 wrote:
| I 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 wrote:
| Classless CSS is pretty great. I've my own[1] for my personal
| site.
|
| [1]:
| https://github.com/naiyerasif/site/blob/1d43c689c7c4035e2e02...
___________________________________________________________________
(page generated 2024-02-08 23:01 UTC)