Skip to Main Content

Pelican Design System icon Pelican Design System Background Texture

Background Texture

Scalable vector graphic backgrounds which can add an ecological flavor to projects which use Pelican.

Edit on GitHub

On this page:

Best Practices

Themed background texture tiles were included in Pelican by default using SVG inlined in the CSS. You can see an example of it in action in the Get Started section of the Pelican home page. This added considerable weight to the CSS so this has been changed so that these themed textures are optionally loaded. The background colors of these optional CSS files can be themed using CSS variables.

Usage

Load these CSS files in the <head> section of your project after Pelican CSS and your theme file. For example, the following might be a way to load them:

<head>
    <link href="css/pelican.min.css" rel="stylesheet">
    <link href="css/your-theme.css" rel="stylesheet">
    <link href="css/bg-texture.css" rel="stylesheet">
</head>

To apply the textured background, add its class and any background color classes. In our example you can get a preview. We manually add padding and margins to the example to make it easier to review.

<div class="mb-1 p-8 bg-texture bg-primary">...</div>
<div class="mb-1 p-8 bg-texture bg-secondary"></div>
<div class="mb-1 p-8 bg-texture bg-accent"></div>
<div class="mb-1 p-8 bg-texture bg-ui"></div>

You can get it at the following locations:

Page top