bansal / pattern.css Goto Github PK

View Code? Open in Web Editor NEW

3.8K 39.0 108.0 865 KB

CSS only library to fill empty background with beautiful patterns.

Home Page: https://bansal.io/pattern-css

HTML 89.00% CSS 11.00%

css css3 css-framework patterns frontend ui bootstrap

pattern.css's Introduction

pattern.css

CSS only library to fill your empty background with beautiful patterns.

See the full documentation

Features

Only CSS. No JavaScript!
< 1KB minified and gzipped!
Supports all modern browsers
Built Using SCSS.
Full color control.

Installation

via npm

npm install pattern.css

via cdn

<link href="https://unpkg.com/pattern.css" rel="stylesheet">

download

<link href="dist/pattern.min.css" rel="stylesheet">

Usage

pattern.css can be used with any css framework.

With shorthand framework

<div class="pattern-checks-sm bg-blue white">...</div>

With bootstrap framework

<div class="pattern-checks-sm bg-primary text-white">...</div>

Pattern Classes

small	medium	large	extra large
pattern-checks-sm	pattern-checks-md	pattern-checks-lg	pattern-checks-xl
pattern-grid-sm	pattern-grid-md	pattern-grid-lg	pattern-grid-xl
pattern-dots-sm	pattern-dots-md	pattern-dots-lg	pattern-dots-xl
pattern-cross-dots-sm	pattern-cross-dots-md	pattern-cross-dots-lg	pattern-cross-dots-xl
pattern-diagonal-lines-sm	pattern-diagonal-lines-md	pattern-diagonal-lines-lg	pattern-diagonal-lines-xl
pattern-horizontal-lines-sm	pattern-horizontal-lines-md	pattern-horizontal-lines-lg	pattern-horizontal-lines-xl
pattern-vertical-lines-sm	pattern-vertical-lines-md	pattern-vertical-lines-lg	pattern-vertical-lines-xl
pattern-diagonal-stripes-sm	pattern-diagonal-stripes-md	pattern-diagonal-stripes-lg	pattern-diagonal-stripes-xl
pattern-horizontal-stripes-sm	pattern-horizontal-stripes-md	pattern-horizontal-stripes-lg	pattern-horizontal-stripes-xl
pattern-vertical-stripes-sm	pattern-vertical-stripes-md	pattern-vertical-stripes-lg	pattern-vertical-stripes-xl
pattern-triangles-sm	pattern-triangles-md	pattern-triangles-lg	pattern-triangles-xl
pattern-zigzag-sm	pattern-zigzag-md	pattern-zigzag-lg	pattern-zigzag-xl

License

MIT

pattern.css's People

Contributors

Stargazers

Watchers

Forkers

cnlien toddlemoine sbrichardson joskid tristanbrotherton fritexvz snudo dosycorps kustomzone jkalio52 thattimc akshatjen alexseman monottawa nullnotfound ttolentino89 frontend-io zanjs tdmitri lyrl jpaulinoger nilportugues sjanjan tibo-vip chrisd666 ringotan bansicloud swardshadow sethips i30 ahmadnasrhosna therockstar hello-pixely mikapanday hailey-romey zhenximi rejas adevossolutions oluwatobilobaoke aospino lucasmrl wscodinglover sobhardwaj benjaminv alvinazhar purple1007 masterthepixel laoxubuer mirz44 hachesilva-forks sundoze nukefactory melanyss summer1000fox oluwatobimayowa opencollective shivasinghal2000 coordinate-cat drhisham-code 4bntw stselvam worldoptimizer 2d reimertz anisur3036 inahokai manipeaci oussamazouaine restorethepromise hhy5277 ievgeniiaabdulina cemmanuelonyema aakankshakamal akmallatief rohit484 vikingmedicdad mu-l migchar hj3938 zim-w daodaoliang 521hellogithub yangxin1994 rodrigoieh m-tsu24 yetanotherfork dandycheung pinkromeo18 hacknuke monkbysea carlosjordandev ngimdock portfolios-site klon22 cristiantabira starpunjabi wooodhead nmtricarico lachiave pagelab

pattern.css's Issues

Changing the secondary color

Trying to add a background to the whole page using the pattern in the body tag.

<body class="pattern-grid-xl grid-color grid-secondary-color">

This is my CSS

<style> .grid-color { background-color: black; } .grid-secondary-color { color: white; } </style>

However I just see a black background, no white lines. What am I missing?

Background and foreground colors do not have a sufficient contrast ratio.

I want to help fix this problem

CSS Patterns

Checkers pattern has diagonal artifact

Observed on desktop Firefox (v75.0)

Feature: Sass + Variables

Suggestion: It would be really useful to be able to pull in a single pattern or the whole set and configure colors with variables.

$stripes-foreground: #xxx
$stripes-background: #xxx
etc

Your website(https://bansal.io/pattern-css) has display problems at high resolution.

Your website(https://bansal.io/pattern-css) has display problems at high resolution.
4K | 150% of win10

Broken website css

Bootstrap 5 text-color only works in Safari

When I use Bootstrap5 text-color only Safari changes the pattern to match. Chrome, Edge and Firefox all show pattern in black.

Colors look fine on your demos but not on my local files

<body class="bg-primary text-light pattern-cross-dots-sm">