Design Approach
Now that we understand basic components, and how to use them to create a
responsive layout, let’s further simplify the design process. We have a new palette called Layout
Blocks, which has some ready to use components adhering to the design approach
described here.
Layout Blocks
• Ready-made, out of the box, responsive components - or "mini layouts" - to
quickly build your web publications
• All the components in this palette are made to support grid-based design
approach
• Blocks are divided into different groups
1. Layouts (layout structure)
2. Sections
3. Components
4. Basic Tools
Layouts
• Layouts are a special arrangement of Rows and their Containers to provide basic
page structure for your document
• There are many pre-built layout blocks that you can use
• You can create your layout blocks either by modifying any existing block or by
creating a new one using containers and rows from basic blocks
Layouts tab in Layout Blocks palette
Sections
• Sections are special Rows that provide special column arrangements to help us
build document layout structure
• There are many pre-built section blocks
• We can add new sections(rows) in a container
• You can create your section either by modifying any existing section or by
creating a new one using rows and columns from basic blocks
Sections tab in Layout Blocks palette
Components
• Components are special columns that hold a special arrangement of content
element boxes like picture and text boxes
• There are many pre-built component blocks
• You can create your component, either by modifying any existing component, or
you can create a new one using columns, text boxes and picture boxes from basic
blocks
Components tab in Layout Blocks palette
Basic
• Basic Tab includes basic grid building blocks like container, row, and column
• Basic items include text and picture boxes that are optimized for responsive
layout, by adding appropriate padding
Responsive in Practice
Responsiveness is creating a single layout for different devices, keeping
legibility and relevancy of the content intact. Responsiveness can be
controlled by Flex Item properties such as width, min-max width and grow/shrink
properties, etc.
Basic blocks –––– Container, Row, and Columns
Let’s try to create a responsive layout using Layout Blocks’ basic constructs like container, row, & columns.
Before we try to create a layout, let’s first inspect the default properties set on Container, Row, and Column
Default Container Properties
The two main properties that are interesting to note for Basic Layouts’ Container, are its width set to 100%, and min-width set to 320px. There’s one more container property that is interesting to note and that is
Justification set to center. This allows all rows to be centered aligned to the
device.
Default Row Properties
Similarly, row has a width set to 100%, and it’s max-width set to the grid width that you have selected in new project dialog.
It’s min-width is set to 320px.
Default Columns Properties
By default column has a width set to one column grid width. i.e. for 12 column
grid, it is set to 8.33%
Layout using Container, Row, and Column
Layout Blocks Components –––– Layouts, Sections, and Components
Responsiveness is adjusting layout under stress keeping legibility and relevancy
of the content intact. Responsiveness can be controlled by Flex Item properties
such as width, min-max width and grow/shrink properties.
Layout using Layouts, Section and Components