
Show HN: Pattern.css – CSS-only library to fill empty background with patterns - bansal10
https://github.com/bansal-io/pattern.css
======
tiborsaas
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.

------
nathancahill
Also see Hero Patterns:
[http://www.heropatterns.com](http://www.heropatterns.com) by Steve Schoger.

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

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

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

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

------
extro
Example site ( [https://bansal.io/pattern-css](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?

~~~
candu
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/](https://kangax.github.io/compat-table/es6/) [2]
[https://caniuse.com/](https://caniuse.com/)

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

The JS problem was solved with jQuery.

~~~
candu
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/](https://www.nngroup.com/articles/ten-usability-heuristics/) [2]
[https://www.interaction-
design.org/literature/article/princi...](https://www.interaction-
design.org/literature/article/principle-of-consistency-and-standards-in-user-
interface-design)

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

------
chrismorgan
The website [https://bansal.io/pattern-css](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
> 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?

~~~
chrismorgan
Some comments I’ve made here on the topic:

[https://news.ycombinator.com/item?id=21244656](https://news.ycombinator.com/item?id=21244656)

[https://news.ycombinator.com/item?id=20956850](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.

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

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

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

------
malydok
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/](https://leaverou.github.io/css3patterns/)

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

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

------
harrisreynolds
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](https://www.webase.com)

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

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

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

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

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

------
Funes-
>>Features

>Only CSS. No JavaScript!

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

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

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

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

