Customise the default library

So you've built a page with the library that we give you out of the box now you're wondering how to put your own touch on them. We've got your back!

We provide you with a few different ways to make these awesome components your own.

Variations

The simplest way to customise the vue-essential-slices library is to add different content to the components in Prismic. The components have been created to transform as your content does.

So check out our Storybook page and see all of the components and their variations here.

CSS Variables

We've included some global classes in the components for you to make quick styling changes.

One way to do this is to create a CSS file at the root of your project and add its path to the css property of your nuxt-config file. Then, add the css root selector and change the pre-defined CSS variables. For example the following will change all buttons to the color red:

:root {
    --color--secondary: #ff1515;
}

ūüí°All CSS variables!

Themes

CSS variables help you define the colour of a primary button, while the theme defines if the button should be primary or not (while being able to override everything if it needs to). It's not perfect though, having the right structure takes time.

Each slice takes an optional theme prop as an argument. Inspired by css-in-js solutions like Emotion, it's meant to provide quick access to deeply-nested style properties. We are currently on the path to unify defined properties, across various Slice Machine libraries.

At the moment, these theme properties should be available for all components:

align, defines the alignment of the text.

color, defines the text color.

wrapper, object bound to the wrapper component of each slice.

title, object passed to titles in the section. Accepted keys: align, color and background.

description, object passed to descriptions in the section. Accepted keys: align, color and background.

eyebrow, object passed to eyebrow headlines in the section. Accepted keys: align, color and background.

For example, this is how you would use the theme prop in a Slice Machine project:

<template>
  <slice-zone type="page" :uid="$route.params.uid" :theme="theme" />
</template>

<script>
import SliceZone from "vue-slicezone";

const theme = {
  align: "left",
  CallToAction: {
    align: "right",
    color: "#FFF",
    wrapper: {
      style: "background: tomato"
    },
    eyebrow: {
      color: "pink"
    }
  }
};

export default {
  components: {
    SliceZone
  },
  data() {
    return {
      theme
    };
  }
};
</script>
9 Rue de la Pierre Levée, 75011 Paris