Show HN: Pattern.css – CSS-only library to fill empty background with patterns | Hacker News Reader

Show HN: Pattern.css – CSS-only library to fill empty background with patterns

github.com

332 pointsbansal1047 comments

Pretty neat project and great presentation, starred!

You could reduce the distributed CSS version even more if you used the gradient definition only once, it's always the same.

      background-image: repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);

With class composition it's easy:

    .pattern-checks.xl {
      background-position: 0 0, 100px 100px;
      background-size: calc(2 * 100px) calc(2 * 100px);
    }

But if you added a copy-paste ready snippet to the landing page, that would be great too.

Also see Hero Patterns: http://www.heropatterns.com by Steve Schoger.

Subtle Patterns [1] has been fairly popular throughout the years as well.

[1] https://www.toptal.com/designers/subtlepatterns/

Also Transparent Textures (https://www.transparenttextures.com/) – disclaimer, I made it — which is basically Subtle Patterns with a colorwheel that allows the backgrounds to be any color.

Oh, wow this is cool. Thanks.

Thank you very much! That's exactly what I was looking for.

This is great! Is it possible to download the whole collection?

i have more here, and just added some by you https://github.com/sw-yx/spark-joy/blob/master/README.md#use...

Example site ( https://bansal.io/pattern-css ) misrendered in Vivaldi, which brings me back PTSD grade memories about the browser war and css bugs, implementation-diferences, etc. So let me ask, how is it possible on the almost completely monoculturized web, where is no Presto and almost no Trident anymore, where almost every browser is kind of chrome-isotope. So let me ask, maybe a web developer cn answer me: what is missing to be able to provide complete support forthe main browsers? Is there still prefixed css tags? OR is it so hard to handle differences between browsers/browser-versions? Doesn't CSS have any graceful fallback functionality for older browsers? Why is this phenomen exists today?

Is also not rendered correctly in Firefox 75 (Linux, PC)

Can you provide a screenshot?

https://imgur.com/ts3ashk

Some of your background boxes overlap with the sidebar.

I get that in Chrome as well.

Same in Chrome: https://i.imgur.com/0zcCqD6.png

Also happens in Firefox

As a user, I'm all for browser choice in the abstract: it sounds like a good thing, but it doesn't often deliver me tangible benefits in usability, performance, etc. (And, to wit, the only real exceptions are when large organizations bankroll extensive browser development teams.)

As a developer: even with several browsers converging on the same renderer and JS runtime, it is _still untrue_ that all things work in all browsers [1] [2]. HTML, CSS, and JS continue to evolve as standards, and mobile browsers complicate the compatibility picture.

This may be hard to hear, but: right now, polyculture delivers largely abstract ideological benefits to a small subset of users who care about these things. Monoculture delivers real, tangible benefits in usability, performance, and accessibility to users, plus massive gains in productivity to developers and tech companies.

On top of that: few of the privacy / security features in modern browsers are at the rendering or JS runtime level - they often have more to do with defeating cross-domain cookie trackers, execution sandboxes around JS, a whole slew of security headers at the HTTP level, and value-added features like password managers and private browsing sandboxes. IMHO, centralization of the HTML / CSS / JS part is a net win for privacy / security, as it makes it possible to focus efforts on these sorts of features instead of on the fine details of basic rendering and execution.

[1] https://kangax.github.io/compat-table/es6/ [2] https://caniuse.com/

I wish browsers were more modular so you could switch the underlying engines, sandboxes, and stuff. Don't want js? Remove the js engine. Don't want css? Remove that part. Don't want webrtc? Remove that. Compile your own flavor bloat free.

As another developer: stop being lazy. It was much worse back in the day in terms of browser differences.

Mono culture provides an average or worse UX experience but the sameness element hits many humans subconsciously.

The JS problem was solved with jQuery.

And now it is solved with @babel/preset-env

Among HCI researchers and UX practitioners, it's well-understood [1] [2] that consistency and standardization in interfaces often improves user experience by helping users lean on pre-existing mental models.

(That said, the question of when to lean on existing convention vs. establish a new one is a difficult one.)

[1] https://www.nngroup.com/articles/ten-usability-heuristics/ [2] https://www.interaction-design.org/literature/article/princi...

monoculture has historically delivered stagnation and abuse by the monopoly vendor, but you never know, maybe it will be different this time?

This does not appear to be a cross-browser issue - just a plain bug. It's broken on both Firefox and Chrome.

Like it says, <1kB minified and gzipped. But 9.5kB only minified, i.e. The css is highly repetitive so gzip is able to do a lot.

I know it's still small, but I'd be tempted to extract just the rules I wanted. Very nice regardless.

The website https://bansal.io/pattern-css was clearly produced on a platform with overlay scrollbars. There are a number of horizontal scrollbars that shouldn’t be there.

  .overflow-scroll {
    overflow: scroll !important;
  }

`overflow: scroll` is pretty much never what you want: it draws scrollbars whether needed or not. You want `overflow: auto` instead, which doesn’t draw scrollbars unless necessary.

  .w-100vw {
    width: 100vw !important;
  }

Viewport units are fundamentally broken by design. Don’t ever use them for layout. In fact I recommend against using them in any situation at all. In this case, use `width: 100%` or just nothing, and it’ll yield the desired results.

> Viewport units are fundamentally broken by design. Don’t ever use them for layout. In fact I recommend against using them in any situation at all.

That's a pretty bold claim. Can you elaborate on that?

Some comments I’ve made here on the topic:

https://news.ycombinator.com/item?id=21244656

https://news.ycombinator.com/item?id=20956850

The currently-implemented viewport units are just fundamentally bad. And I’ve only been talking about the badness of vw; vh has further troubles of its own on mobile.

What was Firefox's former behavior for viewport unit handling that other browsers didn't want to go with?

https://github.com/w3c/csswg-drafts/issues/1766 is the main link that explains it, https://bugzilla.mozilla.org/show_bug.cgi?id=1468684 is also useful.

It's not that bad... it's just scrollbars and mobile where things get messy.

Worse than that. Different browsers and different platforms handle scroll bars differently. Some are hidden until hovered and some have width and some don't some only have width when hovered. It's really awful if you're trying to do something with several scrolling columns

Why would you do something with several scrolling columns? Scrolling elements inside scrolling elements (such as a page) are an anti-pattern

Not to mention smooth scroll which takes definitely too much time to scroll for no good reason.

This is pretty cool. It’s reminds me of https://css-doodle.com/, which is a native web component with the same general goal. Iirc, it uses canvas under the hood.

If you don't need to install stuff from npm and prefer to hack your own, here's a nice list of CSS patterns to get you started: https://leaverou.github.io/css3patterns/

Wonderful! The demo site hijacks my back button, and the animations are incredibly slow.

Edit: Rereading made me sound very salty. Nice project and I'm sure I'll use it in the future.

I really like this, but it would be great if the example site didn't use that scrolling. I wanted to click between examples and I browsed away because it took too long. Bookmarked for my next project though.

This is very cool. I'd like to include this library in the website builder we've built for Webase [1]. We currently have a color background and an image background but these patterns would make it easy for non-coders to add some panache!

Thank you for sharing!

[1] https://www.webase.com

Thanks for the patterns, they look great! Some have commented about the usability of the sidebar / js autoscroll, which could be improved—but it is functional and am I gonna use this as my homepage or am I gonna configure this into my project one time when I need it?! ... jeesh, lighten up.

Works great in Chrome, but many of them aren't smooth in Firefox. It doesn't seem to like diagonal lines, the display is inconsistent.

I'm guessing it's a bug in Firefox with sub-pixel rounding.

It'd be nice if this used CSS variables so that you didn't need hardcoded sm, md, lg, and xl sizes, but could set the size to any length.

Looks like from the source that this would cut the size by 75%.

Hm, the diagonal lines are rendering quite badly for me (randomly jagged edges). Anyone else seeing this? (I'm on Linux, FF75)

Love it!

Site could use some help though. Consider making a repo for the actual website please! Would love to help clean it up a bit.

>>Features

>Only CSS. No JavaScript!

It is indeed a feature, and one that I wish the vast majority of websites adopted.

I always love seeing small, yet very valuable and informative projects on the front-page-- bravo!

reminds me of the 'ol stripe generators, that were big in the early 2000s

I bet this will the hottest web-design trend for next two years.

Reply on news.ycombinator.com