0. Choosing between a web and a mobile app (A carryover from last - - PowerPoint PPT Presentation

▶
0 choosing between a web and a mobile app
SMART_READER_LITE
LIVE PREVIEW

0. Choosing between a web and a mobile app (A carryover from last - - PowerPoint PPT Presentation

Feb 25, 2024 376 likes •869 views

0. Choosing between a web and a mobile app (A carryover from last lecture) Jeff Terrell Layout (UNC COMP 523) 2019-09-11 1 / 48 Options Android (Java or Kotlin) or iOS (Objective C or Swift) React Native (Javascript) Flutter (Dart)

slide-1
SLIDE 1
  • 0. Choosing between a web and a mobile app

(A carryover from last lecture)

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 1 / 48

slide-2
SLIDE 2

Options

Android (Java or Kotlin) or iOS (Objective C or Swift) React Native (Javascript) Flutter (Dart) Progressive Web App, or PWA (Javascript) Responsive Web App (Javascript)

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 2 / 48

slide-3
SLIDE 3
  • 1. Introduction

Lecture overview

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 3 / 48

slide-4
SLIDE 4

Motivation

You will design the UI in Figma, and you’ll need to implement those designs Knowing how to do this using modern tools can save lots

  • f time and cruft

Doing this right is very helpful to those with accessibility concerns

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 4 / 48

slide-5
SLIDE 5

Assumptions

You know:

That HTML is for describing the content of a web document and represents a tree of elements, each with optional named attributes That CSS is for describing the style of a web document How to interpret CSS selectors, e.g. #wrapper, input[type=text], or .box

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 5 / 48

slide-6
SLIDE 6

Caveats

We’re dealing with web layout only Some concepts apply very directly to other platforms E.g. React Native only uses Flexbox for layout

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 6 / 48

slide-7
SLIDE 7

Outline

Display types (e.g. block, inline, float) Positioning elements (e.g. relative, absolute, fixed) Flexbox layout Grid layout Responsive design (for mobile-friendly pages)

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 7 / 48

slide-8
SLIDE 8
  • 2. Display types

Normal flow

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 8 / 48

slide-9
SLIDE 9

Normal flow

Browsers have a default location for each element Depends on window dimensions Called normal flow Two types: block and inline

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 9 / 48

slide-10
SLIDE 10

Block elements

Block elements stack vertically. Examples: paragraphs, headers, lists CSS: display: block;

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 10 / 48

slide-11
SLIDE 11

Inline elements

Inline elements flow left-to-right and wrap to new lines. Examples: words in a paragraph, italic, bold, code, links CSS: display: inline;

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 11 / 48

slide-12
SLIDE 12

Demo

https://comp523.cs.unc.edu/demo.2019-09-11.1. normal-flow.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 12 / 48

slide-13
SLIDE 13
  • 2. Display types

Floating elements

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 13 / 48

slide-14
SLIDE 14

Floating elements

Some elements should not be block or inline Example: an image in a magazine Text or other inline elements flow around it You can float an element to the left or right CSS: float: left; or float: right; Floats don’t contribute directly to size of parents

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 14 / 48

slide-15
SLIDE 15

Dependence on window dimensions

Different window sizes can be surprising Or different amounts of text You can set an element to “clear” the float CSS: clear: left; Can clear left, right, or both

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 15 / 48

slide-16
SLIDE 16

Demo

https: //comp523.cs.unc.edu/demo.2019-09-11.2.floats.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 16 / 48

slide-17
SLIDE 17
  • 2. Display types

Table layout

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 17 / 48

slide-18
SLIDE 18

Table layout

Anything can be displayed as a table CSS properties:

display: table; display: table-row; display: table-cell; display: table-caption; caption-side: bottom;

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 18 / 48

slide-19
SLIDE 19

Example (from MDN)

https://developer.mozilla.org/en-US/docs/Learn/CSS/ CSS_layout/Introduction#Table_layout

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 19 / 48

slide-20
SLIDE 20
  • 3. Flexbox layout

Basic concepts

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 20 / 48

slide-21
SLIDE 21

Flex container and flex items

Flex layout is opt-in CSS: display: flex; Element with flex display property is flex container Direct children are flex items Enables flexible dimensions in one primary dimension

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 21 / 48

slide-22
SLIDE 22

Flex direction

Top-level property on flex container: flex direction CSS: flex-direction: row Valid values:

row row-reverse column column-reverse

row is default for web (for English); column is default for React Native

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 22 / 48

slide-23
SLIDE 23

Main axis and cross axis

Flex direction determines the main axis The perpendicular direction is the cross axis CSS properties affect either the main or cross axis, so are dependent on the flex direction

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 23 / 48

slide-24
SLIDE 24

Demo

https://comp523.cs.unc.edu/demo.2019-09-11.3. flex-direction.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 24 / 48

slide-25
SLIDE 25
  • 3. Flexbox layout

Aligning and justifying items

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 25 / 48

slide-26
SLIDE 26

Flex start and end

The flex start depends on the writing direction Default: left and top for English, but also depends on flex direction The flex end is the opposite side

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 26 / 48

slide-27
SLIDE 27

Aligning on the cross axis

Use align-items CSS property to align items on the cross axis Common values:

flex-start (default) flex-end center stretch baseline

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 27 / 48

slide-28
SLIDE 28

Justifying on the main axis

Use justify-content CSS property to justify items on the main axis Common values:

flex-start (default) flex-end center space-between space-around space-evenly

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 28 / 48

slide-29
SLIDE 29

Demo

https://comp523.cs.unc.edu/demo.2019-09-11.4. flex-alignment.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 29 / 48

slide-30
SLIDE 30
  • 3. Flexbox layout

Automatic sizing

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 30 / 48

slide-31
SLIDE 31

Flex basis

Flex basis is how much space to give a flex item along the main axis The item’s final size is also affected by growing and shrinking properties CSS property: flex-basis Valid values:

auto (default) a size, like 100px or 2rem

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 31 / 48

slide-32
SLIDE 32

Flex grow

Items may grow to fill the available space Disable this behavior with flex-grow: Enable it with a positive number for flex-grow What does the number mean?

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 32 / 48

slide-33
SLIDE 33

Available space

First, determine initial size of all items from flex-basis values Then, there may be some space left over in the flex container Divide this up fractionally based on flex-grow values of items Example: values of 2, 1, 1 means that the first item gets twice the space of the other two

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 33 / 48

slide-34
SLIDE 34

Flex shrink

Similarly, flex-shrink will shrink items if the main axis

  • verflows

Set flex-shrink: 0; to disable shrinking Shrinking takes into account the minimum size of items so may seem broken or inconsistent

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 34 / 48

slide-35
SLIDE 35

Sizing shorthand

Combination of flex-grow, flex-shrink and flex-basis properties CSS: flex: 1 1 auto Special values:

initial is equivalent to 0 1 auto auto is equivalent to 1 1 auto none is equivalent to 0 0 auto a number, e.g. 1 is equivalent to 1 1 0

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 35 / 48

slide-36
SLIDE 36

Demo

https://comp523.cs.unc.edu/demo.2019-09-11.5. flex-sizing.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 36 / 48

slide-37
SLIDE 37
  • 3. Flexbox layout

Interlude

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 37 / 48

slide-38
SLIDE 38

Flexbox Froggy

http://flexboxfroggy.com/

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 38 / 48

slide-39
SLIDE 39
  • 4. Positioning elements

Static, relative, absolute, fixed, and sticky

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 39 / 48

slide-40
SLIDE 40

Static positioning

This is the default Just where the browser would place things normally Statically positioned elements are considered unpositioned

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 40 / 48

slide-41
SLIDE 41

Relative positioning

Relative positioning offsets an element from its static position CSS: position: relative; Use top and left CSS properties to specify the offset (Can also/instead specify bottom and right) These values can be negative Space is still reserved for the element’s static position Demo: https://comp523.cs.unc.edu/demo. 2019-09-11.6.relative-positioning.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 41 / 48

slide-42
SLIDE 42

Absolute positioning

Absolute positioning positions an element relative to an ancestor Reference frame is nearest positioned (i.e. non-static) ancestor CSS: position: absolute; and top and left properties Space is not reserved for element’s hypothetical static position Demo: https://comp523.cs.unc.edu/demo. 2019-09-11.7.absolute-positioning.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 42 / 48

slide-43
SLIDE 43

Fixed positioning

Fixed position is when an element stays in a single spot

  • n a screen

Demo: https://www.davidwalsh.name/demo/ css-fixed-position.php

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 43 / 48

slide-44
SLIDE 44

Sticky positioning

Sticky positioning is a combination of static and fixed positioning Easiest way to describe this is by showing it Demo: http://html5-demos.appspot.com/static/ css/sticky.html

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 44 / 48

slide-45
SLIDE 45
  • 5. Responsive web design

A quick overview

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 45 / 48

slide-46
SLIDE 46

Responsive web design

Goal: let your site look good on any sized screen An incantation:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Design for mobile first (because really basic phones don’t support media queries) Then add media queries to use more horizontal space on bigger screens Turn on responsive design mode in your browser dev tools Example: https://applab.unc.edu

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 46 / 48

slide-47
SLIDE 47
  • 6. Grid layout

A few resources

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 47 / 48

slide-48
SLIDE 48

Grid layout

Like flexbox, but for flexible layout in two dimensions Sophisticated and flexible, but not difficult! Supported in all major browsers: https://caniuse.com/#feat=css-grid MDN overview: https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout Tutorial game: https://cssgridgarden.com/

Jeff Terrell Layout (UNC COMP 523) 2019-09-11 48 / 48