The basics

Install LockUp in the usual way, by double clicking the SNS_Lockup.stack or dragging and dropping it onto the RapidWeaver icon in your dock. LockUp will be available from the Stacks Library when you restart RapidWeaver. Drag a LockUp stack from the Library panel onto your Stacks document to get started. The first thing to note is that LockUp consists of a parent stack and a set of child stacks that are designed to function within it. One of these, a LockUpText stack, is added automatically when you drop a new LockUp stack onto the page. If you don’t want it, you can delete it. If you click on the blue plus icon, you will be able to choose from the five LockUp child stacks: LockUpText, LockUpInclude, LockUpSVG, LockUpImage and LockUpAnimate. We’ll explain them in a moment. First, though, take a moment to familiarise yourself with the LockUp parent stack.

The parent LockUp stack is basically a container for the five different kinds of LockUp child stacks, and its small group of controls are to set its width and height (otherwise it has the default stacks functions: background, border, margins etc.). By default, width is set to 100%. If LockUp is not inside another stack, this will fill the whole width of the screen. If it is inside another stack, it will fill the width that is available to it. When it comes to setting the height, there are two options, available from the two buttons. ‘Set height’ lets you set the height in a range of units: by default it is set to 100vh, which is the full depth of the screen on every device. ‘Set ratio’ lets you set an aspect ratio for the stack, which will automatically determine the depth and keep it in proportion.

If you’re not familiar with the responsive units (vw and vh, and the new ‘container’ units, cqw and cqh) now is a good moment to find out. LockUp assume you will use them, although in many cases fixed units (rem and px are also provided, but you’re not recommended to use them). The ‘viewport‘ units, vw and vh, are respectively 1/100 of the width of the screen and 1/100 of the depth of the screen. The ‘container’ units are similar, but 1/100 of the width and depth of a parent container. The LockUp parent stack is such a container, and cqw and cqh will be sized according to the width and height you set the parent stack.

LockUp can be used with frameworks such as Foundation 6 and Source, and in Rapidweaver themes, or with a blank theme. It works equally well if it is placed in a grid item or container, or as a stand-alone stack.

The five child stacks

The five child stacks each have a distinctive color stripe, to make them easily distinguishable when collapsed in Edit mode.

LockUpText is the main text stack. It is intended for one text element per stack, which could be a word, group of words, paragraph or even several paragraphs. Ideally this should be entered without heading tags (although LockUpText will treat all headings as if they were just paragraph text). LockUpText‘s controls are laid out in groups (and every control in LockUp has a tool tip). LockUp text will allow you to specify the font, size, spacing, color, paragraph formatting (if appropriate), transformations, panel, borders and OpenType features for the text element. LockUpText also installs a library of OpenType utitlity classes which allow you to apply OpenType features to individual words and letters (these use the same four letter identifiers as the OpenType controls in the stack, and are applied to span items (for example `` with closing tag after the letters to be styled, to give small capitals in fonts that possess them).

LockUpInclude will let you import third party stacks into LockUp, sizing and positioning them, and applying transformations if you so wish. Note that if you want to be able to access interactive features in the imported stack, it must be on the top layer. LockUpInclude is also used for grouping stacks, so that transformations can be applied to the group: it will allow several LockUp child stacks to be placed in it, which can then be positioned and manipulated as a group.

LockUpSVG will let you paste svg code into it. It is slightly different from other SVG stacks in that it will let you choose between a simple width and a ‘clamped‘ width (where you specify the minimum and maximum width the SVG can be, in pixels, and then a desired width between that minimum and maximum in responsive units.

LockUpImage likewise is different from other image stacks, in that it is intended for small images placed into LockUp together with text.

LockUpAnimate is for text animations. it is basically the same as the LockUpText stack, except that it allows you to set animation controls, then to specify properties to animate from and animate to. It can animate position, size, color and transformations. Variable fonts in particular are suitable to animate, because they can be animated along any of their axes: weight, width, optical and custom axes.

The demo project contains examples of the specific controls of the child stacks, especially those in LockUpText.

Positioning your content

The five child stacks provide most of LockUp’s functionality, and have a large number of controls. Some of these are common to all of the stacks, and we will look at them first.

The first thing to bear in mind is that each LockUp child stack controls an element which you must input in Edit mode (text, image or SVG). This can be positioned anywhere in the space defined by the parent stack using the controls in the child stack. And each child stack is a layer.

As with a graphics app, it’s a good idea to give each layer a descriptive name. In Edit mode, individual child stacks can be collapsed, using Stacks’ ‘hide’ control, to become a stripe with the title on it. This becomes a very easy way of editing layers, which can be reordered by dragging up and down. It‘s important to know that the top stack is on the bottom layer, and the bottom stack is on the top. The second control in the HUD is for making stacks invisible. This can be useful when one stack hides the content on others, making it difficult to work on them. Invisible stacks are given a distinctive label in Edit mode so they can be turned back on before publishing.

The next group of controls in the HUD, ‘LockUp — Position’, is common to all the different child stacks. The first two groups of buttons allow you to anchor your content in nine positions in the area defined by the parent stack: top left, top center, top right; center left, center center, center right; bottom left, bottom center, bottom right. All content must be anchored to one of these positions (and is set to center center by default). As the container is resized, content is positioned relative to its anchor point. The move up/down and move left/right slider controls move content relative to its anchor point (you can also enter amounts next to the slider for precise positioning: the amounts are specified in hundredths of each unit, so there is more than enough precision).

Again, notice that the vw unit is set as a default. vw is the recommended default unit for all positioning and most sizing in LockUp. All the responsive units allow elements to scale proportionally, and the relation between them to be consistent, providing the units and the anchor points are the same. The width units make a better default than height units, because screen width is generally more important for the size of elements than screen height. Height units are useful for setting vertical distances where items need to be spaced vertically.

Transform controls

The ‘LockUp — Transform’ controls are also common to all of the LockUp child stacks. These controls provide access to the full range of the CSS transform commands. They can be used individually or in combination. Transform applies to whatever element forms the content of a stack: text, image, SVG or another stack. They can also be used to animate text in the LockUpAnimate stack.

The Scale controls scale the element up or down in size, around an origin point which is, by default, at the center of the element (but the origin point can be changed, as explained below). Scaling of the horizontal and vertical dimension can be done independently. For proportional scaling, make the amount equal in both. A scale of 1.00 is equal to 100%, and keeps the item at its original size. Scaling of less than 1.00 reduces it, and more than 1.00 increases it (0.5 is half size, 2.0 double in size).

The Skew controls skew the element in the horizontal and vertical dimensions. The amount of skew is in degrees, which can be negative as well as positive. For the X dimension, a setting of -45 degrees skews the element by 45° in a clockwise direction, while a setting of 45° skews the element in an anticlockwise direction. For the Y dimension, it is the opposite.

The Move ccontrols move the element horizontally and/or vertically, in units determined in the ‘Move units’ pop-up list below it. These moves are performed in a different way to the controls in the ‘Position’ section. They are included for the sake of completeness, but they can be useful in conjunction with other transforms, and setting animation properties in LockUpAnimate.

The Rotate control rotates the element around its origin point. Positive amounts rotate clockwise and negative amounts rotate in an anticlockwise direction. Rotation is limited to 360° in four of the stacks but in LockUpAnimate it goes up to 3600° — ten full rotations.

The Origin point controls move the origin point for transformations, and apply to all in the panel. By default they are set to 50%X 50%Y, which is the center point of the element. 0% and 100% are on the edge of the bounding box of the item, and allow for the origin point to be set on any of its corners or middle points. The origin point can also be set in units, and moved away from the item altogether. As with the other transformation controls, origin point can take minus values.