Illustrations

Every Cruip template includes a set of ready-made illustrations that make them unique in terms of look and feel, and style!

Each template includes custom illustrations provided in SVG file format. You can find them in src/images/illustration-*-*.svg

We divide the illustrations into two types,:

  • Illustrations for sections (e.g. illustration-section-01.svg)

  • Illustrations for elements (e.g. illustration-element-01.svg)

Let's see in details 🐳

Illustrations for sections

They have a decorative function for the sections. Technically, a section illustration covers the full section area and it does not scale with the viewport.

Illustrations for elements

They are built to be placed behind a specific element (for example, behind an image). Oppositely from the section illustrations, their dimension scales with the element they're bound to.‌

CSS & Sass mixins

Since the illustrations are template-related, they are not provided with the core CSS framework.

Check the src/scss/theme/illustrations/_illustrations.scss file if you need to make changes or add your own illustrations.

There are two things you will certainly notice when you look into the file:

  • We use to attach illustrations via CSS to pseudo elements (::before, ::after) and their dimension can exceed the canvas of the element they're bound to.

  • We use a custom Sass mixin to make the job easier

The illustration mixin (@mixin illustration) can be found in the src/scss/core/abstracts/_mixins.scss file and it can be used in this way 👇

@include illustration(file, width, height, vpos, hoffset, voffset);

Argument

Description

file

Name of the SVG file, for example illustration-element-01.svg within quotes

width

Illustration width as a percent of related element width. It can be 100% in case you want the illustration have the same dimensions of the element it's attached to, or more if you want that to be larger

height

Illustration height as a percent of related element height (scaling), or illustration height in px

vpos (optional)

Illustrations are vertically centered by default, but you can define a different starting position (top or bottom)

hoffset (optional)

To define a horizontal offset in px

voffset (optional)

To define a vertical offset in px

Customizing an illustration

Due to the nature of SVGs, customise and change an illustration can result a bit challenging. For example, colors of an illustrations are defined into the SVG itself, so you need to open that specific file with an SVG editor (we highly recommend Figma, it's free), make your changes, and replace the exported file with the existing one. Some nice video-tutorial are coming soon. Stay tuned! 🙌