ACIT 1620 Week 6 notes

--- type: slide slideOptions: display: block --- # ACIT 1620 ## Week 6 ---  Topics: - Flexbox - Grid Layout - Media Queries ---  ## Flexbox (or Flex Layout) - Flexible layout context - Allows a container the ability to alter its items' width and ordering to best fill the available space. - i.e. items can stretch or shrink based on the available space. ---  ## defining a flex container ``` .container { display: flex; } ``` ---- ### Container properties: - flex-direction: row, row-reverse, column, column-reverse - flex-wrap: wrap, no-wrap - justify-content (main axis): start, end, center, space-between, space-around - align-items (cross axis): start, end, center, baseline, ... - gutters (gap, row-gap, column-gap) ---- ### flex item properties: - flex-grow: proportion of available space to occupy - flex-shrink: how much item should shrink in case of overflow - flex-basis: basis size for flex-grow and shrink - order -> integer ---  ## Grid Layout - Two-dimensional, source-order independent - Can specify both rows and columns ---- ### Specifying grid template ``` .container { display: grid; grid-template-columns: 100px 100px 300px; grid-template-rows: 50px 50px; } ``` or template areas: ``` .container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } ``` ---- ### Grid cell placement - Cells can be let to place themselves following source order, or using grid lines and/or grid areas - Using grid lines: ``` .header { grid-column: 1 / span 3; grid-row: 1 / 2; } ``` - Using grid areas: ``` .header { grid-area: header; } ``` ---- ### Aligning stuff - justify-items (row axis): start, end, center, stretch - align-items (column axis): start, end, center, etc ---  ## Media queries - Responsive design - Support the large variety of screen sizes and rendering targets (screen, print, ...) - Simple syntax: ``` @media [type] and (sizing) { rules } ``` E.g: ``` @media screen and (min-width: 320px) { .page { display: flex; flex-direction: column; } } ``` ---- - Some common screen size (break-points): - smartphones: starting at 320px in width - tablet: starting at 760px in width - laptops: starting at 1200px in width ---- - Mobile-first design: start by targetting the smallest screen size you intend to support, and gradually overrides styles for larger screen sizes. ---  ## Lab 5 - Download the starter code from the Learning Hub and extract it to an appropriate location on your machine. - Instructions for the lab are contained in the `index.css` file. This should be the only file you need to modify. - Inside this folder you will find a screencast showing you what the finished page should look like and how it should behave. Pay attention to how the page is displayed on small screen sizes. ---- - Some default styling has been provided inside the `styles` folder. You should not change anything in this folder - Read the HTML to get the full picture of how the page is structured but do not change it. ---- - Initialize a git repository in the lab folder, i.e. the extract folder - Create a Github repository and set it as a remote for your lab ---- - Complete your lab, commit and push your changes, then publish your finished page to Github Pages. - Submit the published link to the "Lab 5" dropbox folder on the Learning Hub. ---  ## Reading - More on layout: - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [A Complete Guide to Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/) - Coming up: - [JavaScript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)