PatternCSS

This module Integrates Pattern.css, is a CSS only library to fill your empty background with beautiful patterns.

Make Your Website
More Beautiful, pure CSS background patterns that you can actually use in your projects!

Basic usage

This module allows you to implement CSS patterns in your Drupal modules and themes. Once you enable this module, you can use any pattern available in Pattern.css!

Example

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

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

Patterns

• Checks
• Grid
• Dots
• Cross Dots
• Diagonal Lines
• Vertical Lines
• Horizontal Lines
• Diagonal Stripes
• Vertical Stripes
• Horizontal Stripes
• Triangles
• Zigzag

Features

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

Pattern UI

PatternCSS UI sub-module provides you with a well-equipped user interface through which you can make more settings without the need for coding and easily add your desired pattern to any part of your site.

This module is a visual background and pattern builder,
That helps your theme design to be more attractive to the audience.

• Very light-weight module
• advanced settings
• User friendly environment
• No coding required
• Easy and fast use
• No dependency required

See the screenshot of the "Add pattern" form and features.

Installation

Please view the project's README.md for detailed installation instruction.

Requirements

You don't need to download library, Already included!

Related modules

• Bootstrap UI
  Integrates Bootstrap CSS framework along with a user interface for configuring and customize components, variables and plugins.
• HoverCSS
  Is a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
• AnimateCSS
  Allows you to makes cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, blocks with cool animation effects.
• AnimateCSS On Scroll
  Provides AOS options on AnimateCSS UI add animation form, allows you to Animate On Scroll using AOS.js library.
• AOS JS
  Is a small and lightweight JavaScript library (with no dependencies) that allows you to animate elements as you scroll down, and up. If you scroll back to the top, elements will animate to their previous state and are ready to animate again if you scroll down.
• WOW JS
  Is a module that aims to integrate WOW.js library with Drupal. Provides Animations When You Scroll, Improve site interactivity with awesome animations.

Supporting

Please let me know if a new feature is needed or is there any issue and feedback. You can announce it in the PatternCSS Issues section.

Recommended modules

• Textimate ( Text + Animate )
  Provides text animation, enhancing site interactivity with awesome effects. Effortlessly transform static text into mesmerizing animations.
• Splitting.js
  Allows you to creates elements and adds CSS Variables for split words & characters! (lines, items, grids, images, more!) to unlock amazing possibilities for style and animating text, grids, and more!.
• Vivus
  is a module that aims to integrate Vivus.js library with Drupal. Provides SVG animate, Improve site interactivity with awesome animations.

Browser Support

pattern.css library depend on four css properties linear-gradient, radial-gradient, repeating-linear-gradient and repeating-radial-gradient which are supported by most browsers. You can check caniuse.com.