Design Approach
Flex layouts are created from a hierarchy of "mini layouts", with some
responsive behaviors assigned to them. Creating this hierarchy and assigning
behavioral rules to achieve responsive behaviors can seem daunting at first – so, to ease the process of creating rule-based, hierarchical layouts, we have
created a design approach that will achieve almost any responsive web design.
Flex Grid
The design approach that we followed is, to use Grids. But unlike grids in
print, these grids have to be adaptive to different sizes and should work well
with HTML on all browsers.
Typical page grid vs the flexible grid in QuarkXPress, where vertical grid
guides are available for reference and responsive components can be used to
create a responsive rule-based grid
To conceive a design in the form of a grid, using CSS-Flex, a designer needs two
things:
1. Grid guides on canvas, as a reference to our design elements
2. Responsive components that understand the grid guides and honor them
Flex layouts are independent of the target device-width, so grid provides our
reference point to place elements onto the page, and acts as a guide to align
them with each other.
Once items are placed on the grid, the grid system can then be adjusted to fit
different device sizes.
Different layouts for phone and tablet devices
Grid guides can be added for flex layouts, using the New Project Dialog. The
dialog allows to specify:
• Grid Size
• Number of Columns
• Gutter Width (Padding)
Some out-of-the-box responsive components are introduced, that can help you
create a flexible grid. These components are Container, Row, and Column. Each
of these components is a type of container box, with some specific responsive
rules applied.
Container, Row and Column components
Container Component
• A container component is a container box that occupies 100% device-width
• The container is grid-width independent
• It is generally used to hold grid rows
• Each container can have one or more rows/sections
• Container component can also contain other containers
Drag n drop Container from the Basic tab of Layout Blocks palette onto Flex Grid
Drag n drop Row from the Basic tab of Layout Blocks palette into a Container
Row Component
• A row is a grid aware container box
• It always keeps itself aligned with grid boundaries. The row has max-width set
to the grid width specified in new dialog.
• The row is used to contain Columns
• Rows are placed inside Container
• Rows with special column arrangements are called Sections
Column Component
• Columns are sub-containers of a row that forms a grid
• Each column container, by default, has one column width; which can be changed
on an as-needed basis. For example, a column container can be set to occupy
three column width of a grid.
• Columns are generally used to hold the content elements like picture box, text
box, etc.
• Columns can be nested
• A specific arrangement of columns with content elements is called a Component
Adding a column to a row by drag n drop from Basic tabs of Layout Blocks palette
Responsive Grid
Common components required to create responsive grids include:
•
Grid Guides
— provide reference points to place elements onto the page
•
Container —
occupies 100% device-width, independent of the grid and provides a way to
contain rows
•
Row
— grid-aware container box, which always keeps itself aligned to the grid
boundaries, and acts as a row of a grid
•
Column
— a container box that can be part of a row, to form a grid
•
Content Boxes
— text and picture boxes that can hold content and are, usually, contained within
a column
Note: Container, Row, and Column are all Container Boxes with some container box
properties set in a certain way to achieve different behaviors.
Making of a grid using Container, Row, Column and Content Boxes