CSCI 2133 Rapid Programming Techniques for Innovation UI Design - - PowerPoint PPT Presentation

▶
csci 2133 rapid programming techniques for innovation
SMART_READER_LITE
LIVE PREVIEW

CSCI 2133 Rapid Programming Techniques for Innovation UI Design - - PowerPoint PPT Presentation

Jul 12, 2023 138 likes •634 views

CSCI 2133 Rapid Programming Techniques for Innovation UI Design CSS Grid and Flexbox CSCI 2133 2 Previous Lecture CSS / CSS3 SASS / SCSS CSCI 2133 CSS Layout 3 CSCI 2133 CSS Layout Whats a layout?

slide-1
SLIDE 1

CSCI 2133

CSCI 2133 – Rapid Programming Techniques for Innovation

UI Design – CSS Grid and Flexbox

slide-2
SLIDE 2

CSCI 2133

Previous Lecture

  • CSS / CSS3
  • SASS / SCSS

2

slide-3
SLIDE 3

CSCI 2133

CSS Layout

3

slide-4
SLIDE 4

CSCI 2133

  • What’s a layout?
  • Real-life examples
  • Basic Implementation
  • Columnlayoutwithflexbox
  • GridlayoutwithC

S Sgrids

CSS Layout

slide-5
SLIDE 5

CSCI 2133

What’s a layout?

slide-6
SLIDE 6

CSCI 2133

Layout= Globalstructureofyourpage

slide-7
SLIDE 7

CSCI 2133

Thelayoutisthe page’sskeleton

slide-8
SLIDE 8

CSCI 2133

What examples of layouts doyouknow?

slide-9
SLIDE 9

CSCI 2133

Rowlayouts

slide-10
SLIDE 10

CSCI 2133

Example–Homepage - Dalhousie

slide-11
SLIDE 11

CSCI 2133

Example-Blogpost

slide-12
SLIDE 12

CSCI 2133

Columnlayouts

slide-13
SLIDE 13

CSCI 2133

Example– Dalhousie Outlook

slide-14
SLIDE 14

CSCI 2133

Example– Dalhousie Outlook

slide-15
SLIDE 15

CSCI 2133

Example-Facebook

slide-16
SLIDE 16

CSCI 2133

Example-Facebook

slide-17
SLIDE 17

CSCI 2133

Example - Slack

slide-18
SLIDE 18

CSCI 2133

Example - Slack

slide-19
SLIDE 19

CSCI 2133

Grid layouts

bothmergedrows&columns

slide-20
SLIDE 20

CSCI 2133

Example–Nova Scotia Portal

slide-21
SLIDE 21

CSCI 2133

Example–Nova Scotia Portal

Logo Navigation bar Headline ain Content Footer Side Col

slide-22
SLIDE 22

CSCI 2133

Example-AnalyticsDashboard

slide-23
SLIDE 23

CSCI 2133

Example-AnalyticsDashboard

slide-24
SLIDE 24

CSCI 2133

Good Reference

24

https://www.websitebuilderexpert.com/designi ng-websites/awesome-home-page-design- layouts/ (But do not trust advertising on this page) https://www.w3schools.com/css/css_website_l ayout.asp

slide-25
SLIDE 25

CSCI 2133

Layout basic implementation

Credit to W3school

25

slide-26
SLIDE 26

CSCI 2133

Let’ scodea Header

.header { background-color: #F1F1F1; text-align: center; padding: 20px; }

slide-27
SLIDE 27

CSCI 2133

Let’ scodea Navigation Bar

/* The navbar container */ .topnav {

  • verflow: hidden;

background-color: #333; } /* Navbar links */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Links - change color on hover */ .topnav a:hover { background-color: #ddd; color: black; }

slide-28
SLIDE 28

CSCI 2133

Content

28

slide-29
SLIDE 29

CSCI 2133

Content Implementation

29 /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */ @media screen and (max-width: 600px) { .column { width: 100%; } }

slide-30
SLIDE 30

CSCI 2133

Footer

30

.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }

slide-31
SLIDE 31

CSCI 2133

Result

https://web.cs.dal.ca/~gang/csci2133-project/layout-demo/

31

slide-32
SLIDE 32

CSCI 2133

Easy with flexbox

slide-33
SLIDE 33

CSCI 2133

Flexbox -Vocabulary flexbox flex items

slide-34
SLIDE 34

CSCI 2133

In aflexbox, itemsarenaturallyplacedby column

.flexbox { display: flex; }

slide-35
SLIDE 35

CSCI 2133

Then,youcandistributespace aroundorbetweenitemsusing justify-content

.flexbox { justify-content: space-around; }

slide-36
SLIDE 36

CSCI 2133

Then,youcandistributespace aroundorbetweenitemsusing justify-content

.flexbox { justify-content: space-between; }

slide-37
SLIDE 37

CSCI 2133

Youcancenter itemsvertically using align-items

.flexbox { align-items: center; }

slide-38
SLIDE 38

CSCI 2133

Youcanset the with of an item killing flex-grow andflex-shrink

.fixed-item { flex: 0 0 25%; }

slide-39
SLIDE 39

CSCI 2133

Youcanallow items to grow with aflex-grow

.growing-item{ flex-grow: 1; }

slide-40
SLIDE 40

CSCI 2133

Youcanallowitemstogo to the next line withflex-wrap

.flexbox { flex-wrap: wrap; }

slide-41
SLIDE 41

CSCI 2133

Lets look at login example again

41

slide-42
SLIDE 42

CSCI 2133

Code it

42

.login-container {

display: flex; width: 750px; height: 1334px; padding: 0; margin: 0; list-style: none; flex-direction: column; justify-content: flex-start; align-items: center;

}

slide-43
SLIDE 43

CSCI 2133

Easy with CSS grid

slide-44
SLIDE 44

CSCI 2133

First,defineyourgrid

slide-45
SLIDE 45

CSCI 2133

Then,defineeachelement behavior

“ I startrow 1 and take1 row I startcolumn1 and take2 columns“

slide-46
SLIDE 46

CSCI 2133

Then,defineeachelement behavior

“ I startrow 1 and take3 rows I startcolumn3 and take1 column“

slide-47
SLIDE 47

CSCI 2133

You are about to rewrite this website CSS by utilizing GRID

47

slide-48
SLIDE 48

CSCI 2133