Customize the Look using CSS
Design a Page Layout
This lesson is part of the Developer Online Class for OutSystems 9 course.

in this lesson we will see how to layout elements on the page
what we want to do is here on the dashboard
we want to lay out both of these lists
of the issues that we created in the previous lesson we want to lay them out
side by side and to do this we're going to create this layout
using the grid the grid improves the design of web screens by providing an
easy way
of working alignments and spacing when using the grid the screen is virtually
sliced in columns
and elements are placed and sized
along those columns so let me let me show you how to do this
I'm going to have the container to my Web screen
and now I want to size this container and typically
what you what you're probably used to as
units of measure for sizing elements
are pixels and percentage but in this case since we are going to use the grid
I'm going to size this container using
another measure which is called columns
so I'm going to pick this handle here
this blue square I'm going to click it and you'll notice that once I start
you'll see those virtual columns that I was talking about so there you have
it you have
twelve columns in this web screen and I want to size
this container to half of those columns let me just drag this
to size my container to six columns as you see there
okay and now
I want to add another container next to this one to create
the layout for my list the issues
so let me drag another container I'm going to
drop it next to this one not below
I want to drop it next to this one and there you have it so
the OutSystems Platform already
sized this container with
the remaining six columns and you can see here
you can see that we do have
a margin here between these
these two containers and this margin
is is something that we also define
on the grid and let me just
show up here the grid and you'll notice that that margin
occupies that gray area that gray area between columns
this is what we call the gutter it's the space between columns
which is used as the margin between objects
in contiguous columns okay so
now that I have these two containers I can lay out
the content inside these containers
on my screen so let me use the widget tree to help me
do this and what I want to do is put this Heading
and this container which includes the list the issues
let me select both using shift key
I'm going to put both of these containers inside
this one there and you'll notice
that we didn't size these containers to be six
but they still occupy the six columns of the parent in this is because
they do have a special value for the with
which is the fill parent this means that
this element here this container we'll take as much space
as the parent element that contains it
okay let me do the same thing for the low priority issue so using the shift
key again
select both of the containers and drop them
inside up this one and there we have it
so we now have are lists of issues
displayed side by side let's just publish this and see how
it looks in browser
okay so here it is our dashboard with
the list of high-priority and low priority issues
and now they are displayed side by side
on the screen in the next lessons
we'll see how to further customize the look and feel of our
application using CSS
on these elements and that's it