Quick Start
New to Flex Layouts? This step-by-step guide is the best place to start. We’ll go through step-by-step instructions to help you create a simple web page.
All the resources used in the page are listed below in the resources section
Step-by-step design
Step 1 — Create a new Flex Layout
1. Launch QuarkXPress 2019 and create new Flex project by going to
File > New > Project..
.
2. In New Project dialog, select Layout Types as
Digital
from the drop-down and then
Flex
from next drop-down.
This will open a new project window with flex layout. This layout will have 12
vertical grid columns as specified in the project dialog, distributed over 1280
px. You will also see a dragger on the right side of the layout canvas, which
you can hold and drag to either side to see how grid behaviors when you
increase or decrease the canvas width. In case you drag the canvas to more than
1280 px, the grid will still occupy 1280px space, but will be automatically
center aligned. And if you drag canvas to occupy less than 1280px, then the
grid will start shrinking.
The Canvas
The canvas area represents the device width that will be available to our design
output when user will view it on different devices. The dragger helps us
visualize our design under different device width conditions by allowing the
canvas to grow and shrink.
The Grid
The grid area represents our design space, which we will use to create our
design using grid guides.
On small devices, grid shrinks and components respond to this change
Design when viewed on a device with a width equal to that of grid
When viewed on wider devices, the grid and design within stays intact and gets
center justified
Step 2 — Create a layout structure using Layouts Block palette
1. Open
Layout Blocks
palette from
Windows > Layout Blocks
menu option, if it is not already open.
2. From
Layouts
tab of this palette drag
Layout 3
onto new project canvas
This will give us a layout structure that we can use for our web page.
Layout 3
contains 3 sections each corresponding to the header, main and footer section.
Step 3 — Build page header
1. You will see three gray boxes, each representing header column, main section
column, and footer column.
Note:
Make sure to turn on
Visual Indicator
from
View
menu. Turning on visual indicators will allow you to see empty boxes on the
canvas represented by gray color.
2. Select the top gray box and open measurements palette.
3. Goto the
Flex
tab of the
Measurements
palette and change the width of the header column from 8.33% to 100%.
Note:
Though column width was mentioned 8.33% but still it was occupying 100% of its
parent width, it is because of the
Grow
property with value
1
defined for it
,
which allows an item to additionally acquire any vacant space in its parent.
6. Now with header column selected, press cmd+d (mac)/ctrl+d (windows) to
duplicate it. This will create another column below the selected column.
Try:
If you try to duplicate the header column without changing its width to 100%,
then the new column will appear side by side. You can undo the duplication and
width size change to try it yourself.
You can do multiple duplicates to create more columns and to remove them just
select the last column and start pressing delete
(
To remove components make sure you are in Item mode)
7. Now from the
Basic
tab of
Layouts Block
palette, drag
Text (Padded)
component into the first column. This component is a text box wrapped into
another container with some default padding.
8. Click the gray box (Text Box) of the component we have just dropped, and add
some content into it using the content tool. Let’s add “Spirit of Adventure” and apply some style on it.
9. Drag
Component 5
from the
Components
tab of
Layouts Block
palette into the second header column. This component has three different text
boxes with their padding. These three text boxes will act as menus for our page.
Try:
You can add more text boxes(menus) by selecting the parent padded box (
Padded Column)
of any of the text box and pressing cmd+d multiple time to duplicate the text
boxes.
As explained below, you can either directly select the parent padded column box
or can select it through the Layout Blocks’ breadcrumb control.
Containment Hierarchy through Breadcrumb
Selecting a box on layout will show it’s parent hierarchy on the bottom of Layouts Blocks palette in the form of
breadcrumbs. Each breadcrumb represents a box on the layout and show the name
of that box. These names represent tentative responsibilities that are assigned
to various boxes in each block of our layout blocks palette components.
Hovering over this breadcrumb hierarchy on the layout blocks palette will
highlight the corresponding box on the layout, and clicking on any of these
breadcrumbs will select the corresponding box on the layout.
10. Select the nearest ancestor of text box called
Component,
then go to
Flex tab
of measurement’s palette and change the
Justify
property value to
Center.
This will center the menus(padded text boxes) relative to our page grid.
11. Also change the background color of the selected
Component,
from colors palette to say 80% of Black.
12. Add some text into the menus(text boxes) e.g. Home, Book now, Contact us,
and apply some appropriate styling
13. Select the padded column of the first menu text box (i.e. the immediate
parent of the menu text box), by holding command key also multi-select padded
columns of other two menu text boxes. With all the padded columns selected,
goto
Border
tab of measurements palette and apply left and right borders to these boxes.
Figure (Step 3)
— Layout after Step 3
Step 4 — Decorate the main section
1. Select the
Column
(gray box) of the
main section
on our layout, goto
Flex
tab of measurements palette and set
Min-H
(minimum height) of the box to say 400px.
Note:
You will also notice that this box already has
Height
set to 400px. This height was automatically set, just to give a feel of layout
structure and will revert to auto as soon as we add some component from layout
blocks into it.
2. Now select the
Row
(immediate parent container of the selected column), and import a background
image either from
File > Import...
or by
command+E
3. Change the tool from
Picture Content Tool
to
Item Tool
from
Tools
palette.
Note:
The picture by default fills the
Row
container. It is because by default any background image to a container is set
to fill the container. You can change it to Fit instead of Fill from
Container tab
of
Measurements
palette.
4. From the
Basic
tab of
Layouts Blocks palette,
drag the
Text (Padded)
component onto the main section
Column.
5. Let’s add some text into this text box e.g. “Need a Break” +
line break
+ “Want to travel?”, and style it.
6. Select the
Padded Column
of the text box, and reset it’s width to 50% of its parent
Column
container box, by dragging it’s right edged box handle to align it to the center grid line.
Resizing the box
There are two ways we can resize a box within a container.
1. Using the
Width
and
Height
property of a box from the
Flex tab.
2. Using box handles to resize the box.
Note:
When we use box handles to resize box width, then
Grow
property of the box gets reset (to value
0
).
Note:
If we try to resize the height of the box, then the height value changes from
auto
to whatever height you dragged to.
Generally, it is not recommended to set fixed height for any box, as it might
break your responsive layout under some conditions.
7. Select the
Column
which is an immediate parent of
Padded Column
and from
Container tab
set the
Alignment
and
Row Alignment
to
Center
.
8. To eliminate the gap between main section and Menu above, select the main
section Row and change its top margin to value 0, either from
Flex Tab
, or by visually dragging the red line of top margin on canvas.
Margins & Paddings
Margin
Margins are outsets for a box and are applicable for all flex items. They can be
defined using
Margins
property on the
Flex
tab
.
Padding
Padding is like insets, and are only applicable for containers. They can be
defined using
Padding
property on the
Container
tab
.
Both Margins and Paddings can, not only be changed from measurement tabs but can
also be changed visually on the layout. If
View > Guides
are on, then margin applied on a box is shown in pink color and padding is
showing in green color. Hovering over these visual margins and padding area
will show a red guide, which you can be dragged to increase/decrease
corresponding margins/padding.
While dragging this red guide, and holding
command
key will only adjust the single selected edge.
Holding
command + shift
while dragging,
will adjust selected area(margin/padding) and it’s opposite edge’s corresponding area(margin/padding).
Figure (Step 5)
— Layout after Step 4
Resources
Video recorded tutorial of the layout