Skip to content

Commit 89bbddf

Browse files
yet3yet3
authored
Merge pull request #5 from yet3/feat/polka-dot
Polka dot pattern, Example page improvements and finished readme
2 parents 508fa45 + 1448f22 commit 89bbddf

23 files changed

+513
-73
lines changed

‎README.md‎

Lines changed: 78 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# tailwindcss-bg-patterns (IN-DEVELOPMENT)
1+
# @yet3/tailwindcss-bg-patterns
22

33
![GitHub license](https://img.shields.io/github/license/yet3/tailwindcss-bg-patterns?style=flat)
44
<a href='https://www.npmjs.com/package/@yet3/tailwindcss-bg-patterns'>
@@ -15,12 +15,20 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/)
1515

1616
- [Installation](#installation)
1717
- [Config](#config)
18-
- [Usage](#usage)
18+
- [Example usage](#grid)
19+
- [Patterns](#patterns)
20+
- [Grid](#grid)
21+
- [Hatching](#hatching)
22+
- [Cross-Hatching](#cross-hatching)
23+
- [Polka dot](#polka-dot)
24+
- [Hexagonal Polka dot](#hexagonal-polka-dot)
25+
- [Todo](#support)
26+
- [Support](#support)
1927

2028
## Installation
2129

2230
```sh
23-
npm install -D @yet3/tailwindcss-bg-patterns
31+
npm install --save-dev @yet3/tailwindcss-bg-patterns
2432
```
2533

2634
```sh
@@ -57,30 +65,84 @@ export default {
5765
};
5866
```
5967

60-
## Usage
68+
## Example usage
6169

70+
```html
71+
<div
72+
class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
73+
/>
6274
```
63-
bg-pattern-grid
6475

65-
bg-pattern-hatching
66-
bg-pattern-hatching-left-to-right
67-
bg-pattern-hatching-right-to-left
76+
this code will result in:
77+
78+
<img src="./public/grid.png" alt="Grid pattern" height="200" />
6879

69-
bg-pattern-cross-hatching
80+
## Patterns
7081

71-
bg-pattern-line-2 // line width
72-
bg-pattern-line-[8] // custom line width
73-
bg-pattern-line-red-500 // line color
74-
bg-pattern-line-[#a2a2a2] // custom line color
82+
### Grid
83+
See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
7584

76-
bg-pattern-spacing-24 // space between pattern lines
77-
bg-pattern-spacing-[321] // custom space between pattern lines
85+
```html
86+
<div
87+
class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
88+
/>
7889
```
7990

8091
<img src="./public/grid.png" alt="Grid pattern" height="200" />
8192

93+
### Hatching
94+
See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
95+
8296
```html
8397
<div
84-
class="bg-blue-500 bg-pattern-grid bg-pattern-line-2 bg-pattern-line-white bg-pattern-spacing-32"
98+
class="bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right"
8599
/>
86100
```
101+
102+
<img src="./public/hatching.png" alt="Hatching pattern" height="200" />
103+
104+
### Cross-Hatching
105+
See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching)
106+
107+
```html
108+
<div
109+
class="bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16"
110+
/>
111+
```
112+
113+
<img src="./public/cross-hatching.png" alt="Cross-Hatching pattern" height="200" />
114+
115+
### Polka dot
116+
See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot)
117+
118+
```html
119+
<div
120+
class="bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
121+
/>
122+
```
123+
124+
<img src="./public/polka-dot.png" alt="Polka dot pattern" height="200" />
125+
126+
### Hexagonal polka dot
127+
See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polka-dot)
128+
129+
```html
130+
<div
131+
class="bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
132+
/>
133+
```
134+
135+
<img src="./public/hex-polka-dot.png" alt="Polka dot pattern" height="200" />
136+
137+
## Todo
138+
139+
- [ ] Add utility to adjust pattern opacity
140+
- [ ] Add pattern: horizontal-lines (x-lines?)
141+
- [ ] Add pattern: vertical-lines (y-lines?)
142+
- [ ] Add pattern: checkers
143+
- [ ] Add pattern: honeycomb
144+
- [ ] Add pattern: bricks
145+
146+
## Support
147+
148+
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W618YWH4)

‎example/src/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import 'tailwindcss/utilities';
44

55
html {
6+
scroll-behavior: smooth;
67
font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
78
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
89
}

‎example/src/common/Anchor.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts">
2+
import type { Snippet } from 'svelte';
3+
4+
interface IProps {
5+
class?: string;
6+
href: string;
7+
ariaLabel: string;
8+
9+
children: Snippet;
10+
}
11+
12+
const { children, href, ariaLabel, class: className }: IProps = $props();
13+
</script>
14+
15+
<a {href} aria-label={ariaLabel} rel="noopener noreferrer" target="_blank" class={className}>
16+
{@render children()}
17+
</a>

‎example/src/common/BuyMeCoffee.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
import Anchor from './Anchor.svelte';
3+
</script>
4+
5+
<Anchor href="https://ko-fi.com/W7W618YWH4" ariaLabel="Support me on ko-fi (opnes in a new tab)">
6+
<img
7+
style="border:0px;height:32px;"
8+
src="https://storage.ko-fi.com/cdn/kofi5.png?v=6"
9+
alt="Buy Me a Coffee at ko-fi.com"
10+
/>
11+
</Anchor>

‎example/src/common/Code.svelte‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
<script lang="ts">
2-
import { onDestroy } from 'svelte';
3-
import Highlight from 'svelte-highlight';
4-
import type { LanguageType } from 'svelte-highlight/languages';
5-
import { Icon } from 'svelte-icons-pack';
6-
import { FaCopy } from 'svelte-icons-pack/fa';
7-
1+
<script lang="ts" module>
82
export interface ICodeBaseProps {
93
class?: string;
104
code: string;
115
126
noStyle?: boolean;
137
}
8+
</script>
9+
10+
<script lang="ts">
11+
import { onDestroy } from 'svelte';
12+
import Highlight from 'svelte-highlight';
13+
import type { LanguageType } from 'svelte-highlight/languages';
14+
import { Icon } from 'svelte-icons-pack';
15+
import { FaCopy } from 'svelte-icons-pack/fa';
1416
1517
interface IProps extends ICodeBaseProps {
1618
language: LanguageType<string>;

‎example/src/common/Pattern.svelte‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
<script lang="ts">
2-
import HtmlCode from './HtmlCode.svelte';
3-
1+
<script lang="ts" module>
42
export interface IPatternConfig {
53
name: string;
6-
description: string;
4+
description?: string;
5+
options?: IPatternConfig[];
76
}
7+
88
export interface IPattern {
9+
id: string;
910
name: string;
1011
class: string;
1112
configClasses: IPatternConfig[];
1213
}
14+
</script>
15+
16+
<script lang="ts">
17+
import HtmlCode from './HtmlCode.svelte';
1318
1419
interface IProps {
1520
data: IPattern;
1621
}
1722
1823
const { data }: IProps = $props();
19-
const { name, configClasses, class: className } = data;
24+
const { id, name, configClasses, class: className } = data;
2025
</script>
2126

22-
<section class="grid lg:grid-cols-[2fr_minmax(400px,1fr)] gap-x-8 gap-y-4">
27+
<section
28+
{id}
29+
aria-label={`Pattern: ${name}`}
30+
class="grid lg:grid-cols-[2fr_minmax(400px,1fr)] gap-x-8 gap-y-4"
31+
>
2332
<article class="flex flex-col justify-center">
2433
<h2 class="mb-4 text-3xl font-medium">{name}</h2>
2534

@@ -28,8 +37,20 @@
2837
{#each configClasses as config}
2938
<li class="flex max-xl:flex-col">
3039
<code class="ml-1 font-medium text-class">.{config.name}</code>
31-
<p class="ml-3 text-white/75">{config.description}</p>
40+
{#if config.description}
41+
<p class="ml-3 text-white/75">{config.description}</p>
42+
{/if}
3243
</li>
44+
{#if config.options}
45+
<ul class="ml-4 ~2xs/xs:~text-sm/base grid content-start gap-1">
46+
{#each config.options as opt}
47+
<li class="flex items-center">
48+
<code class="text-nowrap ml-1 font-medium text-class/80">{opt.name}</code>
49+
<p class="ml-2 text-white/60 ~2xs/xs:~text-xs/base">{opt.description}</p>
50+
</li>
51+
{/each}
52+
</ul>
53+
{/if}
3354
{/each}
3455
</ul>
3556

‎example/src/modules/Footer.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import Anchor from '$common/Anchor.svelte';
3+
</script>
4+
5+
<footer class="pb-2">
6+
<p class="text-center">
7+
Made by <Anchor
8+
href="https://www.maxkasperowicz.com/"
9+
ariaLabel={`My portfolio (opens in a new tab)`}
10+
class="text-blue-300 underline">me</Anchor
11+
>. Using SvelteKit and TailwindCSS
12+
</p>
13+
</footer>

‎example/src/modules/Header.svelte‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,41 @@
11
<script lang="ts">
2+
import Anchor from '$common/Anchor.svelte';
23
import BashCode from '$common/BashCode.svelte';
4+
import BuyMeCoffee from '$common/BuyMeCoffee.svelte';
35
import SimpleTabs from '$common/SimpleTabs.svelte';
46
import { Icon } from 'svelte-icons-pack';
57
import { AiFillGithub } from 'svelte-icons-pack/ai';
8+
import { TrFillBriefcase2 } from 'svelte-icons-pack/tr';
69
</script>
710

811
<header class="mt-8 mb-12 flex flex-col items-center">
912
<h1 class="font-medium ~xs/sm:~text-2xl/4xl text-center">@yet3/tailwindcss-bg-patterns</h1>
1013
<h3 class="text-lg text-white/50 mt-2 font-medium">IN-DEVELOPMENT</h3>
11-
<a
12-
href="https://github.com/yet3/tailwindcss-bg-patterns"
13-
rel="noopener noreferrer"
14-
target="_blank"
15-
class="mt-4"
16-
>
17-
<p class="flex items-center underline text-blue-300 ~xs/sm:~text-base/xl">
18-
Read more on <Icon className="ml-1 fill-white" src={AiFillGithub} size={28} />
19-
</p>
20-
</a>
14+
<ul class="mt-4 grid grid-flow-col items-center gap-4" aria-label="My links">
15+
<li>
16+
<Anchor
17+
href="https://github.com/yet3/tailwindcss-bg-patterns"
18+
ariaLabel="Github (opens in a new tab)"
19+
class="flex items-center"
20+
>
21+
<Icon className="mr-1 fill-white" src={AiFillGithub} size={28} />
22+
Github
23+
</Anchor>
24+
</li>
25+
<li>
26+
<Anchor
27+
href="https://github.com/yet3/tailwindcss-bg-patterns"
28+
ariaLabel="Github (opens in a new tab)"
29+
class="flex items-center"
30+
>
31+
<Icon className="mr-1 fill-white" src={TrFillBriefcase2} size={24} />
32+
Portfolio
33+
</Anchor>
34+
</li>
35+
<li>
36+
<BuyMeCoffee />
37+
</li>
38+
</ul>
2139

2240
<SimpleTabs class="w-full max-w-[1000px] mt-12 px-4" tabs={['npm', 'pnpm', 'yarn']}>
2341
{#snippet tab(idx)}

0 commit comments

Comments
 (0)