-
Notifications
You must be signed in to change notification settings - Fork 138
Creating your own configuration
Great, you've forked and set up your own copy of CardKit, now it's time to create your own configuration.
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 ofsize
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, usethemes: 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 theoutput
object-
scale
-- set this totrue
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:
The name of the property, used when building the UI
The type of element this should be.
Options: text
, image
, rect
, group
The height of the element
The width of the element
The x and y positions, can be an integer (measured in pixels) or a string (e.g. '20%'
)
Whether this element should be draggable
Options: true
or false
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.
true
: Shows a text field
'picker'
: Presents a colour picker
{'Small (18px)': 18, 'Medium (26px)': 26, 'Large (32px)': 32, 'Extra Large (40px)': 40,}
: Shows a drop down list of the supplied options
See editable.fontSize
Describes the aspect ratio of images, see MDN for more details on this SVG property
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.
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,
},
},
}