Creating your own configuration

Great, you've forked and set up your own copy of CardKit, not it's time to create your own configuration.

Defining your SVG elements

First, you'll need to tell CardKit which elements you want on your 'card': images, text, groups, shapes etc. To do this, edit $scope.config in app/scripts/controllers/main.js.

This config object consists of the following properties:

• sizes -- an array of size objects
  • name -- the name of this dimension
  • width -- the width of this dimension in pixels
  • height -- the height of this dimension in pixels
• themes -- an object of themes, use themes: themeConfig, to load from /themes.config.json
• output -- settings specific to the output
  • scale -- a numeric representation of output scale, scale: 2, will output retina ready images
  • editable -- an object of editable attributes in the output object
    • scale -- set this to true to allow the user to edit the scale attribute
• svg
  • canvas -- config specific to the canvas
    • height -- the default height of the SVG
    • width -- the default width of the SVG
  • elements -- an array of all elements in the config, see below for a more detailed breakdown of creating elements

Each object in config.svg.elements is made up of standard SVG properties, however there are also a number of custom properties. Below is a list of the most common properties, along with CardKit's custom properties:

name (string)

The name of the property, used when building the UI

type (string)

The type of element this should be. Options: text, image, rect, group

height (int)

The height of the element

width (int)

The width of the element

x (int or string)

The x and y positions, can be an integer (measured in pixels) or a string (e.g. '20%')

draggable (bool)

Whether this element should be draggable Options: true or false

editable (object)

Tells CardKit which attributes to make editable, defining the UI for this element. The property names for this object should correlate to the properties that define the element, and their values should be true if you want that property to be editable. There are a number of unique cases where you can provide other values to alter the UI output.

editable.fill (string or boolean)

true: Shows a text field 'picker': Presents a colour picker

editable.fontSize (object)

{'Small (18px)': 18, 'Medium (26px)': 26, 'Large (32px)': 32, 'Extra Large (40px)': 40,}: Shows a drop down list of the supplied options

editable.fontfamily (object)

See editable.fontSize

Element specific attributes

Image: preserveAspectRatio (string)

Describes the aspect ratio of images, see MDN for more details on this SVG property

Group: elements (array)

For type: 'group' elements, the elements property is a nested set of sub-elements that should exist within that group. This elements property works in the same way as the config.svg.elements property, as an array of element configuration objects.

Creating a theme

To create a theme, use the /demo.themes.config.json as a template and save it to /themes.config.json. This file should be a JSON array of theme objects. If a theme config file is found, CardKit will automatically enable the theme choice dropdown. The only required field is name, which configures the name which is displayed in the theme dropdown. Beyond that, add the attributes you require (e.g. fontFamily, imageSource). Each object within the theme array must share the same attributes.

These attributes can then be referenced in your $scope.config object in app/scripts/controllers/main.js. To use a theme variable within an element, return it within a function using $scope.theme ($scope.theme will get filled with the currently selected theme). Here is an example of an element that uses theme properties to configure fill and fontFamily.

{
    name: 'Credit',
    type: 'text',
    text: 'Credit: Insert name here',
    fill: function() {
      return $scope.theme.quote;
    },
    fontSize: 12,
    fontFamily: function() {
      return $scope.theme.font;
    },
    textAnchor: 'start',
    x: 50,
    y: 250,
    draggable: true,
    editable: {
        text: true,
        fill: 'picker',
        textAnchor: true,
        fontSize: {
            'Small (18px)': 18,
            'Medium (26px)': 26,
            'Large (32px)': 32,
            'Extra Large (40px)': 40,
        },
    },
}