Layouts, Frameworks, and Bulma
Lecture 05
CSCI 3230U – Web App Development
Today’s outline
1. Grid layout
2. Flexbox layout
3. Frameworks
4. [Link] overview
1
Today’s outline
1. Grid layout
2. Flexbox layout
3. Frameworks
4. [Link] overview
Review: Page layouts
Many pages are based on a grid-view. On a rectangular display, a
grid layout allows for the economical presentation of multiple
components.
The CSS Grid Layout system displays a view consisting of rows and
columns and makes it easier to design pages without having to use
floats and positioning.
4
Source: [Link]
2
Elements of grid
Parent: A grid consists of a parent element (grid container).
Children: The parent contains one or more child elements (grid
items).
Grid layouts are often created using <div> elements.
Grid example
See: L05/1_grid_basic.html 6
3
Grid CSS Must be grid or inline-grid
Sets the number of columns
Defines style of parent container
Defines style of individual cells
Grid HTML
All direct children of the grid
container automatically become grid
items.
4
grid vs inline-grid
Here we use the <span> tag is an inline container used to mark up a
part of a text, or a part of a document.
The <span> tag is much like
the <div> element, but <div>
is a block-level element and
<span> is an inline element.
Read more
See: L05/2_grid_inline.html 9
Grid layout
Columns - The vertical lines of grid items.
Rows – The horizontal lines of the grid items
Gaps – The spaces between each column and/or row
Column Column Column
Row
Row gap
Row
Row gap
Row
10
Column gap Column gap
10
5
Adjusting grid properties
We can adjust gap properties with the properties:
• column-gap
• row-gap
• gap
Gap is a shorthand for row
and column gaps.
See: L05/3_grid_gaps.html 11
11
Grid lines
The lines between columns are called column lines. The lines
between rows are called row lines.
We refer to line numbers when placing a grid item in a grid
container.
I think of them as specifying matrix indices [inclusive, exclusive]
12
12
6
Grid lines
See: L05/4_grid_lines.html 13
13
Grid template
The grid-template-columns property can also be used to specify
the size (width) of the columns. “auto” will set the width to fit the
page space, and resize with the browser window.
Relatedly, grid-template-rows specifies the width of the rows.
See: L05/5_grid_auto.html 14
14
7
Justification
The justify-content property aligns the grid inside the container.
Similarly, the align-content is used to vertically align the grid.
See: L05/6_grid_justify.html 15
15
Grid item layout
The grid-column and grid-row properties define on which columns
and rows an item will occur. We specify where an item will begin, and
where it will end.
They are a shorthand for grid-column-start/grid-column-end
and grid-row-start/grid-row-end, respectively. We just saw
these on Grid lines (SL12-13).
However, they use an elegant syntax to layout your page.
16
16
8
Grid column layout
We refer to line numbers, or use the keyword "span" to define how
many columns/rows the item will span:
See: L05/7_grid_column.html 17
17
Grid row layout
The following will make item1 start on row-line1 and end on row-
line3. Or alternatively, start on row-line1, and span 2 more rows:
See: L05/8_grid_row.html 18
18
9
An elegant layout
Let’s take what we’ve learnt and combine that with content
sectioning to create a meaningful layout template.
See: L05/9_grid_template.html 19
19
Today’s outline
1. Grid layout
2. Flexbox layout
3. Frameworks
4. [Link] overview
20
20
10
Flexbox
The Flexible Box Module, referred to as a flexbox, offers a one-
dimensional layout model.
By one-dimensional, we mean it deals with layout in one dimension
at a time – either as a row or a column.
This contrasts with the CSS Grid module, which provides a two-
dimensional layout model for controlling rows and columns
together.
21
21
Flexbox container and items
As with a grid, a flexbox consists of a container and child items.
The container becomes flexible by setting the display property to
flex
See: L05/10_flex_basic.html 22
22
11
Flexbox properties
The Flexbox has several presentation properties:
Property Values & behaviours
flex-direction row; column; row-reverse. Determines direction of
flexbox (row or column)
flex-wrap wrap; nowrap; wrap-reverse. Specifies whether items
should wrap or not
flex-flow row wrap; shorthand for direction and wrap.
justify-content center; flex-start; flex-end; space-around. Used to
align flex items.
23
23
Flexbox properties
See: L05/11_flex_prop.html
See: L05/12_flex_justify.html
24
24
12
Flex item properties
As with CSS Grid, we can further set custom properties on flex
items.
These include order, flex-grow, flex-shrink, and align-self.
We won’t go into details on these, but the options exist for further
tailoring of flexbox item behaviours.
25
25
Today’s outline
1. Grid layout
2. Flexbox layout
3. Frameworks
4. [Link] overview
26
26
13
CSS frameworks
A CSS framework is a library that allows for easier, more standards-
compliant web design using the CSS language.
A framework consists of a pre-made CSS library (stye sheet).
Rather than creating each project from scratch, a CSS framework
provides tools to quickly create an interface that can be repeated
and tweaked during a project.
27
27
CSS Frameworks
There are many CSS frameworks in use:
• UI Kit - [Link]
• Semantic UI - [Link]
[Link]
• Materialize - [Link]
• Foundation - [Link]
[Link]
• Bootstrap - [Link]
• Refactoring UI - [Link]
• Tailwind CSS - [Link]
• Bulma - [Link]
28
28
14
Today’s outline
1. Grid layout
2. Flexbox layout
3. Frameworks
4. [Link] overview
29
29
Getting started with Bulma
Bulma consists of a single style sheet. To use Bulma, we link it from
our header.
Navigate to Bulma docs, then Overview, then Start, and copy the
link.
We will use a Content Delivery Network (CDN) to provide the file.
30
30
15
Why use a CDN?
The main advantage of using a CDN is faster load times.
Many users already have downloaded Bulma CSS, and the file will
then load from their cache, rather than needing to be downloaded.
This also means less load on your server (fewer files to host).
31
31
Reset style sheet
One thing Bulma does is to reset the default style sheet at the
browser level.
Reset style sheets became popular, to ensure that pages would
always looks consistent across different browsers.
Notice in our page inspector how our CSS style changes after we
link in the Bulma CSS.
32
32
16
Effect of Bulma
See: L05/[Link] 33
33
Styling our elements with Bulma
Most Bulma classes are “is-xxx” or “has-xxx”.
See: L05/13_bulma_typography.html 34
34
17
Class names
Bulma has a massive collection of CSS classes. Refer to the
documentation to find what you’re looking for.
You may also find the vs code extension “Bulma CSS Class
Completion” useful.
35
35
Changing colours
Bulma has a consistent naming convention for colours:
See: L05/13_bulma_colours.html 36
36
18