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!