Nutritious Polygonal Meatball

    @windicss/plugin-heropatterns

    0.0.8 • Public • Published

    @windicss/plugin-heropatterns

    Installation

    Add this plugin to your project:

    npm install --save-dev @windicss/plugin-heropatterns

    Usage

    The heropatterns plugin exposes some options to configure the generated classes. Here is the example for adding it to your project plugins

    require("@windicss/plugin-heropatterns")({
      // the list of patterns you want to generate a class for
      // the names must be in kebab-case
      // an empty array will generate all 87 patterns
      patterns: ["polka-dots", "signal"],
    
      // The foreground colors of the pattern
      colors: {
        default: "#9C92AC",
        "blue-dark": "#000044" //also works with rgb(0,0,205)
      },
    
      // The foreground opacity
      opacity: {
        default: "0.4",
        "100": "1.0"
      }
    });

    This configuration would create the following classes:

    .bg-hero-polka-dots-100 {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }
    
    .bg-hero-signal-100 {
      background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
    
    .bg-hero-polka-dots-blue-dark-100 {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }
    
    .bg-hero-signal-blue-dark-100 {
      background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
    
    .bg-hero-polka-dots {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }
    
    .bg-hero-signal {
      background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
    
    .bg-hero-polka-dots-blue-dark {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    }
    
    .bg-hero-signal-blue-dark {
      background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    As you can see when you use the default key for colors or opacity it is omitted in the class name.

    So the following configuration:

    require("@windicss/plugin-heropatterns")({
      patterns: ["polka-dots", "signal"],
      colors: {
        default: "#9C92AC"
      },
      opacity: {
        default: "0.4"
      }
    });

    Will generate only the following classes

    .bg-hero-polka-dots {
      /**/
    }
    .bg-hero-signal {
      /**/
    }

    Defaults

    The default configuration is the following. And it will generate alle the patterns with the default color of heropatterns.com

    config = {
      patterns: [],
      colors: {
        default: "#9C92AC"
      },
      opacity: {
        default: 0.4
      }
    };

    Pattern names list:

    1. anchors-away
    2. architect
    3. autumn
    4. aztec
    5. bamboo
    6. bank-note
    7. bathroom-floor
    8. bevel-circle
    9. boxes
    10. brick-wall
    11. bubbles
    12. cage
    13. charlie-brown
    14. church-on-sunday
    15. circles-squares
    16. circuit-board
    17. connections
    18. cork-screw
    19. current
    20. curtain
    21. cutout
    22. death-star
    23. diagonal-lines
    24. diagonal-stripes
    25. dominos
    26. endless-clouds
    27. eyes
    28. falling-triangles
    29. fancy-rectangles
    30. flipped-diamonds
    31. floating-cogs
    32. floor-tile
    33. formal-invitation
    34. four-point-stars
    35. glamorous
    36. graph-paper
    37. groovy
    38. happy-intersection
    39. heavy-rain
    40. hexagons
    41. hideout
    42. houndstooth
    43. i-like-food
    44. intersecting-circles
    45. jigsaw
    46. jupiter
    47. kiwi
    48. leaf
    49. lines-in-motion
    50. lips
    51. lisbon
    52. melt
    53. moroccan
    54. morphing-diamonds
    55. overcast
    56. overlapping-circles
    57. overlapping-diamonds
    58. overlapping-hexagons
    59. parkay-floor
    60. piano-man
    61. pie-factory
    62. pixel-dots
    63. plus
    64. polka-dots
    65. rails
    66. rain
    67. random-shapes
    68. rounded-plus-connected
    69. signal
    70. skulls
    71. slanted-stars
    72. squares
    73. squares-in-squares
    74. stamp-collection
    75. steel-beams
    76. stripes
    77. temple
    78. texture
    79. tic-tac-toe
    80. tiny-checkers
    81. topography
    82. volcano-lamp
    83. wallpaper
    84. wiggle
    85. x-equals
    86. yyy
    87. zig-zag

    Install

    npm i @windicss/plugin-heropatterns

    DownloadsWeekly Downloads

    25

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    215 kB

    Total Files

    4

    Last publish

    Collaborators

    • harlan_zw
    • hannoeru
    • voorjaar
    • antfu