diff --git a/README.md b/README.md index 908cd2d..a4c71f5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# tailwindcss-bg-patterns (IN-DEVELOPMENT) +# @yet3/tailwindcss-bg-patterns ![GitHub license](https://img.shields.io/github/license/yet3/tailwindcss-bg-patterns?style=flat) @@ -15,12 +15,20 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/) - [Installation](#installation) - [Config](#config) -- [Usage](#usage) +- [Example usage](#grid) +- [Patterns](#patterns) + - [Grid](#grid) + - [Hatching](#hatching) + - [Cross-Hatching](#cross-hatching) + - [Polka dot](#polka-dot) + - [Hexagonal Polka dot](#hexagonal-polka-dot) +- [Todo](#support) +- [Support](#support) ## Installation ```sh -npm install -D @yet3/tailwindcss-bg-patterns +npm install --save-dev @yet3/tailwindcss-bg-patterns ``` ```sh @@ -57,30 +65,84 @@ export default { }; ``` -## Usage +## Example usage +```html +
``` -bg-pattern-grid -bg-pattern-hatching -bg-pattern-hatching-left-to-right -bg-pattern-hatching-right-to-left +this code will result in: + +Grid pattern -bg-pattern-cross-hatching +## Patterns -bg-pattern-line-2 // line width -bg-pattern-line-[8] // custom line width -bg-pattern-line-red-500 // line color -bg-pattern-line-[#a2a2a2] // custom line color +### Grid +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid) -bg-pattern-spacing-24 // space between pattern lines -bg-pattern-spacing-[321] // custom space between pattern lines +```html +
``` Grid pattern +### Hatching +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching) + ```html
``` + +Hatching pattern + +### Cross-Hatching +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching) + +```html +
+``` + +Cross-Hatching pattern + +### Polka dot +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot) + +```html +
+``` + +Polka dot pattern + +### Hexagonal polka dot +See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polka-dot) + +```html +
+``` + +Polka dot pattern + +## Todo + +- [ ] Add utility to adjust pattern opacity +- [ ] Add pattern: horizontal-lines (x-lines?) +- [ ] Add pattern: vertical-lines (y-lines?) +- [ ] Add pattern: checkers +- [ ] Add pattern: honeycomb +- [ ] Add pattern: bricks + +## Support + +[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W618YWH4) diff --git a/example/src/app.css b/example/src/app.css index 41f19f0..c848ee7 100644 --- a/example/src/app.css +++ b/example/src/app.css @@ -3,6 +3,7 @@ @import 'tailwindcss/utilities'; html { + scroll-behavior: smooth; font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } diff --git a/example/src/common/Anchor.svelte b/example/src/common/Anchor.svelte new file mode 100644 index 0000000..5cacbda --- /dev/null +++ b/example/src/common/Anchor.svelte @@ -0,0 +1,17 @@ + + + + {@render children()} + diff --git a/example/src/common/BuyMeCoffee.svelte b/example/src/common/BuyMeCoffee.svelte new file mode 100644 index 0000000..2d78071 --- /dev/null +++ b/example/src/common/BuyMeCoffee.svelte @@ -0,0 +1,11 @@ + + + + Buy Me a Coffee at ko-fi.com + diff --git a/example/src/common/Code.svelte b/example/src/common/Code.svelte index 0180235..48d1390 100644 --- a/example/src/common/Code.svelte +++ b/example/src/common/Code.svelte @@ -1,16 +1,18 @@ - + + + + -
+

{name}

@@ -28,8 +37,20 @@ {#each configClasses as config}
  • .{config.name} -

    {config.description}

    + {#if config.description} +

    {config.description}

    + {/if}
    • + {#if config.options} +
      + {#each config.options as opt} +
    • + {opt.name} +

      {opt.description}

      +
      • + {/each} +
    + {/if} {/each} diff --git a/example/src/modules/Footer.svelte b/example/src/modules/Footer.svelte new file mode 100644 index 0000000..6760f0e --- /dev/null +++ b/example/src/modules/Footer.svelte @@ -0,0 +1,13 @@ + + +
    +

    + Made by me. Using SvelteKit and TailwindCSS +

    +
    diff --git a/example/src/modules/Header.svelte b/example/src/modules/Header.svelte index 9f2a62f..4755753 100644 --- a/example/src/modules/Header.svelte +++ b/example/src/modules/Header.svelte @@ -1,23 +1,41 @@

    @yet3/tailwindcss-bg-patterns

    IN-DEVELOPMENT

    - -

    - Read more on -

    -     +
      +
    • + + + Github + +
      • +
    • + + + Portfolio + +
      • +
    • + +
      • +
    {#snippet tab(idx)} diff --git a/example/src/routes/+page.svelte b/example/src/routes/+page.svelte index bef1556..950cfc1 100644 --- a/example/src/routes/+page.svelte +++ b/example/src/routes/+page.svelte @@ -1,56 +1,86 @@ @@ -62,6 +92,17 @@
    +
    +

    Available patterns

    +
      + {#each PATTERNS as pattern} +
    1. + {pattern.name} +
      2. + {/each} +
    +
    +
      {#each PATTERNS as pattern}
    1. @@ -70,3 +111,5 @@ {/each}
    + +