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

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 • What’s a layout? • Real-life examples • Basic Implementation • Columnlayoutwithflexbox • GridlayoutwithC S Sgrids CSCI 2133

What’s a layout? CSCI 2133

Layout= Globalstructure ofyourpage CSCI 2133

Thelayoutis the page’sskeleton CSCI 2133

What examples of layouts doyouknow? CSCI 2133

Rowlayouts CSCI 2133

Example– Homepage - Dalhousie CSCI 2133

Example- Blogpost CSCI 2133

Columnlayouts CSCI 2133

Example– Dalhousie Outlook CSCI 2133

Example– Dalhousie Outlook CSCI 2133

Example- Facebook CSCI 2133

Example- Facebook CSCI 2133

Example - Slack CSCI 2133

Example - Slack CSCI 2133

Grid layouts bothmergedrows&columns CSCI 2133

Example– Nova Scotia Portal CSCI 2133

Example– Nova Scotia Portal Logo Navigation bar Headline Side Col ain Content Footer CSCI 2133

Example- AnalyticsDashboard CSCI 2133

Example- AnalyticsDashboard CSCI 2133

Good Reference 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 24 CSCI 2133

Layout basic implementation Credit to W3school 25 CSCI 2133

Let’ scodea Header .header { background-color: #F1F1F1; text-align: center; padding: 20px; } CSCI 2133

Let’ scodea Navigation Bar /* The navbar container */ .topnav { overflow: 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; } CSCI 2133

Content 28 CSCI 2133

Content Implementation /* 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%; } } 29 CSCI 2133

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

Result https://web.cs.dal.ca/~gang/csci2133-project/layout-demo/ 31 CSCI 2133

Easy with flexbox CSCI 2133

Flexbox -Vocabulary flexbox flex items CSCI 2133

In aflexbox, items arenaturally placedby column .flexbox { display: flex; } CSCI 2133

Then,youcandistributespace around orbetweenitemsusing justify-content .flexbox { justify-content: space-around; } CSCI 2133

Then,youcandistributespace aroundor between itemsusing justify-content .flexbox { justify-content: space-between; } CSCI 2133

Youcan center itemsvertically using align-items .flexbox { align-items: center; } CSCI 2133

Youcan set the with of an item killing flex-grow and flex-shrink .fixed-item { flex: 0 0 25%; } CSCI 2133

Youcan allow items to grow with a flex-grow .growing-item{ flex-grow: 1; } CSCI 2133

Youcanallowitemsto go to the next line with flex-wrap .flexbox { flex-wrap: wrap; } CSCI 2133

Lets look at login example again 41 CSCI 2133

Code it .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; } 42 CSCI 2133

Easy with CSS grid CSCI 2133

First, define yourgrid CSCI 2133

Then, define eachelement behavior “ I startrow 1 and take1 row I startcolumn1 and take2 columns “ CSCI 2133

Then, define eachelement behavior “ I startrow 1 and take3 rows I startcolumn3 and take1 column “ CSCI 2133

You are about to rewrite this website CSS by utilizing GRID 47 CSCI 2133

CSCI 2133