✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Illustrations

Cruip CSS

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!

Last updated on August 17, 2021