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

Illustrations

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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);
ArgumentDescription
fileName of the SVG file, for example illustration-element-01.svg within quotes
widthIllustration 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
heightIllustration height as a percent of related element height (scaling), or illustration height in px
vpos optionalIllustrations are vertically centered by default, but you can define a different starting position (top or bottom)
hoffset optionalTo define a horizontal offset in px
voffset optionalTo 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