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

https://github.com/bansal-io/pattern.css

by bansal10 • 6 years ago

332 47 6 years ago

github.com

nathancahill• 6 years ago

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

Etheryte• 6 years ago

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

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

mikehearn• 6 years ago

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.

urza2• 6 years ago

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

swyx• 6 years ago

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

CSSer• 6 years ago

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.

tiborsaas• 6 years ago

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.

gorpomon• 6 years ago

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

gunn• 6 years ago

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.

extro• 6 years ago

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?

ahofmann• 6 years ago

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

jedimastert• 6 years ago

Can you provide a screenshot?

onychomys• 6 years ago

https://imgur.com/ts3ashk

Some of your background boxes overlap with the sidebar.

candu2• 6 years ago

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/

searchableguy• 6 years ago

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.

japanoise• 6 years ago

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

wolco• 6 years ago

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

The JS problem was solved with jQuery.

forgotmypw23• 6 years ago

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

matharmin• 6 years ago

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

Funes-• 6 years ago

>Features
Only CSS. No JavaScript!

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

zerkten• 6 years ago

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.

Accacin• 6 years ago

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.

queercode• 6 years ago

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.

greencore• 6 years ago

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

malydok• 6 years ago

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/

chrismorgan3• 6 years ago

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.

tekromancr• 6 years ago

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?

chrismorgan3• 6 years ago

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.

preommr• 6 years ago

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

xPaw• 6 years ago

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

jaquers• 6 years ago

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.

truesy• 6 years ago

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

harrisreynolds• 6 years ago

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

detaro• 6 years ago

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

spankalee• 6 years ago

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%.

calibas• 6 years ago

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.

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

Related Stories