Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn about layouts: fixed versus liquid; responsive; multi-column
learn how to use CSS to center an element
learn a little about flexbox from examples

Types of Layout

Fixed-width: Set widths in pixels.
Liquid: Set widths in percentages/ems.

Fixed-Width Layouts

Rigid: they don't change size.
Pro: consistent look.
Con: some visitors will see acres of space or horizontal scrollbars.


html {
    background-color: white;
}
                    
body {
    width: 960px;
    margin: 0 auto;
    background-color: green;
}

Liquid Layouts

Adapt to user's viewport.
Pro: respect user's preferences and try to make best use of the space.
Con: hardest to get right, esp. when there are images, etc.


html {
    background-color: white;
}
                    
body {
    width: 80%;
    margin: 0 auto;
    background-color: green;
}

When to Use

When to use fixed-width layouts:
- when you know the width of the majority of your visitors' windows;
- your site has lots of fixed-width content, e.g. images;
- pixel-perfect appearance is paramount to you.
When to use liquid layouts:
- most of the time.

Multi-column Layout

Two- or three-colum layout is very common!

A three-column layout comprising a header across the top, then a nav, a main and an aside side-by-side, and a footer across the bottom.

Layout and Components

There may be a layout for the page and separate layouts for the components on the page.
E.g. this is still just a page that has a three-column layout:

A three-column layout comprising a header across the top, then a nav, a main and an aside side-by-side, and a footer across the bottom. But the elements within the header and the main.

CSS Layouts

Flow layout:: Based on the outer display type of each element.
Flexbox:: One-dimensional layout based on rows or columns but elements 'flex' to fill additional space or shrink to fit smaller spaces.
Grid layout:: Two-dimensional layout.

Other: floating, positioning, multicolumn text.

Example

Grid layout for the page as a whole;
Flexbox for the header;
Flow layout or flexbox for the nav and aside;
The articles in the aside use floating;
Flexbox or another grid for the gallery of images in the main;
Flow layout for the footer.

Responsive Web Design (RWD)

In RWD, we adapt the layout to the characteristics of the device/window.

E.g.
one-column layout for narrow devices/windows;
two-column layout when there is more room;
three-column layout when there is even more room.

Responsive Web Design

A flexible (liquid) layout.;
Flexible images and media;
Media queries;
Least-capable-clients-first ('mobile-first'); and
Progressive enhancement.

CSS Flexbox

A flexbox contains items, which are laid out in a one-dimensional way,
either in rows or in columns.

The items in the flexbox can 'flex',
grow or shrink.

Don't use flexbox when flow layout is sufficient!

Flexbox Properties

A Complete Guide to Flexbox

On the container:
display: flex;

Parent properties (the flexbox itself) (the container)	Child properties (the flex items) (the contents)
`flex-direction`	`order`
`flex-wrap`	`flex-grow`
`justify-content`	`flex-shrink`
`align-items`	`flex-basis`
`align-content`	`align-self`

Horizontal Centering I

To center text or an image horizontally within a parent element, use
text-align: center;


p {
    text-align: center;
}

Horizontal Centering II

To center a single element horizontally within a parent element, set its left and right margin to auto.
(Note that nothing will happen unless the element is narrower than the parent.)


p {
    margin-left: auto;
    margin-right: auto; 
}

Common shorthand:


p {
    margin: 0 auto;
}

Horizontal Centering II, continued

This technique is often used to center the whole web page, e.g.:


html {
    background-color: white;
}
        
body {
    width: 80%;
    margin: 0 auto;
    background-color: green;
}

Horizontal Centering III

To center several elements elements horizontally within a parent element, use a flexbox.


main {
    display: flex;
    justify-content: center;
}
        
p {
    flex-basis: 20%;
    flex-grow: 0;
}

Equal-Sized Columns


<main>
    <section>
        <h2>Heading1</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </section>
    <section>
        <h2>Heading2</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore 
            magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea 
            commodo consequat. Duis aute irure dolor in 
            reprehenderit in voluptate
        </p>
    </section>
    <section>
        <h2>Heading3</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore 
            magna aliqua.
        </p>
    </section>
</main>


main {
    display: flex;
}

main > section {
    border: 1px solid black;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

Here, three sections that contain different amounts of content will be styled as equal-width, equal-height columns.

Again I rely on default flex direction and no wrapping.

Another default on the container is for align-items (which affects the cross axis), where the default is stretch.

Then I flex the children, the flex items. flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0.

Giving all of our items a flex-grow value of 1 means the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values. So we have them all shrnking at the same rate (flex-shrinkn: 1).

Flex-basis is in some sense the initial size of the item. If you set to auto, then the value comes from either the content or a value given by setting width/height. If we left it at auto, then these columns would be as wide as the main, I gues (unless their text is shorter than the main). But we've made them all equal: 0! So their initial size is zero. But this leaves space, and the space gets allocated equally (flex-grow: 1).

Flexbox for an Image Gallery

Very easy if all images are the same size.


<section>
    <img src="image001.jpg" alt="…" />
    <img src="image002.jpg" alt="…" />
    <img src="image003.jpg" alt="…" />
    <img src="image004.jpg" alt="…" />
    …
</section>


section {
    display: flex;
    flex-wrap: wrap;
}

Flexbox for an Image Gallery

But there are more decisions to make when images are not the same size.


<section>
    <img src="image001.jpg" alt="…" />
    <img src="image002.jpg" alt="…" />
    <img src="image003.jpg" alt="…" />
    <img src="image004.jpg" alt="…" />
    …
</section>


section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

section > img {
    margin-top: 1em;
}

Web Development

Lecture Objectives

Types of Layout

Fixed-Width Layouts

Liquid Layouts

When to Use

Multi-column Layout

Layout and Components

CSS Layouts

Example

Responsive Web Design (RWD)

Responsive Web Design

CSS Flexbox

Flexbox Properties

Horizontal Centering I

Horizontal Centering II

Horizontal Centering II, continued

Horizontal Centering III

Equal-Sized Columns

Flexbox for an Image Gallery

Flexbox for an Image Gallery

G'luck!