BAD-Assets

BAD-Assets is a library of digital assets ideal for use in anti-designs.

BAD Overview

This library contains 50 digital assets in the form of PNG images with transparent backgrounds. Each are 1024px on the longest edge, at 200 DPI. All images are flat black, and are useful for masking (see examples below), or for use in any of your own custom graphics.

The asset image files are found in the following directories:

• core/bad-assets/chaos
• core/bad-assets/grunge
• core/bad-assets/halftones
• core/bad-assets/scribbles
• core/bad-assets/tech

The library includes a utility classes CSS library, which is found at:

core/bad-assets/bal.css

BAD-Asset Library Utility Classes

We can reserve space on a page for each asset by using the aspect-ratio property, like so:
.bad.asset.asset-name
Where asset-name is any of the classes listed in the Assets section below.

By default, bad-asset elements are 100% of the width of their containers. However, we can scale down the size of the asset ranging from 10% to 75% of the width of the container by applying any of these classes:

• .micro (10%)
• .small (25%)
• .medium (33%)
• .large (50%)
• .xlarge (75%)

For example, if we want to create a bad asset that is one-third the width of it's container, we would have:
.bad.asset.asset-name.medium

We can also flip bad-asset elements on either the x, y, or both axis:

• .flip-x (horizontal flip)
• .flip-y (vertical flip)
• .flip-xy (flips both horizontally and vertically)

If we wanted to flip a medium bad-asset on both the x and y axis, we would have:
.bad.asset.asset-name.medium.flip-xy

Assets

In the basic rendering examples below, we display the PNG image over gradient backgrounds.

Chaos Components

Grunge

Halftones

Scribbles

Tech

Masking

We can mask bad-asset elements to create complex and chaotic designs. We only need to add the class .masked to a bad-asset element:
.bad.asset.asset-name.masked.

Masked bad-asset elements already contain the asset as the mask image, so nothing else is needed.

NOTE: Due to browser security, masked elements can only be viewed on a live site. If working offline on a local machine, a masked element will not render.