Web Programming 1.3 HTML5 Semantic Layout Markup & CSS3 Layout PDF

Web Programming 1.3 HTML5 Semantic Layout Markup & CSS3 Layout From relevant semantic contents to a semantic organisation of those contents Table of Contents From to HTML5 Semantic Layout Markup HTML5 Sectioning elements & some Grouping elements C...

Web Programming 1.3 HTML5 Semantic Layout Markup & CSS3 Layout From relevant semantic contents to a semantic organisation of those contents Table of Contents From to HTML5 Semantic Layout Markup HTML5 Sectioning elements & some Grouping elements CSS display behavior : block, inline & inline-block CSS3 Layout, 1st approach : block, width & float | width & inline-block, … thereafter clear Web Programming 1.3 - Eric Christoffel - Unistra 1 From to HTML5 Semantic Layout Markup The neutral element div with a unique identifier (id)  absolutely No Meaning for bots Use instead Semantic Sectioning Elements : header, nav, section, article, aside, and footer Web Programming 1.3 - Eric Christoffel - Unistra 2  …. But some div can be used for CSS layout purpose : …. Web Programming 1.3 - Eric Christoffel - Unistra 3 HTML5 Sectioning elements & some Grouping elements Main web page layout, header and footer header footer Content Organization with Sectioning Section with header, article and footer elements Section header article footer Web Programming 1.3 - Eric Christoffel - Unistra 4  CSS display behavior : block, inline & inline-block Block elements appear as if they have Inline element does not cause a line break a line break before and after them inline-block block block inline inline inline block inline-block inline-block width setting ! …But no width setting content e.g. , , , , w1 w2 e.g. , , , …. , , …. width setting & no line break Web Programming 1.3 - Eric Christoffel - Unistra 5  CSS3 Layout, 1st approach : block, width & float CSS3 Layout, 1st approach : width & inline-block if w1 + w2 < w0 if w1 + w2 < w0 block + float block + float inline-block inline-block w1 w1 block + float inline-block w2 w2 Container width w0 Container width w0 width : value; float : left; (or right) display : inline-block; CSS CSS clear : both; to break the effect width : value; Originally, float was used for floating image in text, not for layout ! Web Programming 1.3 - Eric Christoffel - Unistra 6 Web Programming 1.4 CSS3 Grid & Flexbox Layout Model / Advanced CSS Layout Avoid Absolute Positioning when designing a web page ! As well as tables ! e.g. Student Floating design, or inline-block display, would be preferred, or … trombinoscope Outline 1. CSS Grid Layout Model 2. CSS Flexbox layout Model https://www.mozilla.org/fr/firefox/developer/ 3. Mobile First Design, Responsive Web Design, Viewport and Media Queries Web Programming 1.4 - Eric Christoffel - Unistra 1  CSS Grid Layout Model : A Quick Start Guide Grid Lines : which separate Terminology rows and columns Vertical lines vertical line counting : 1 2 3 4 5 1 Horizontal lines 1 2 rows and 2 counting 3 3 4 counting : horizontal line 1 2 3 4 columns and counting Web Programming 1.4 - Eric Christoffel - Unistra 2  Track: space between two Grid lines Horizontal Track ≡ Grid row Gutter: space between tracks (rows or column) Vertical Track ≡ Grid column Grid Cell Grid Area Web Programming 1.4 - Eric Christoffel - Unistra 3  Grid Container: CSS display property e.g. main element with display : grid Grid Item: Child element of a grid container according to the D.O.M. Web Programming 1.4 - Eric Christoffel - Unistra 4 Defining the grid The Grid container is created : main element display : grid; Define rows and columns grid-template-columns : ; grid-template-rows : ; Arguments for each column and row  Track sizes Add a gutter length Grid-gap: percent ; calc() Web Programming 1.4 - Eric Christoffel - Unistra 5  The track sizes 150px 20% length or percentage (low flexibility) 1em (linked to actual font-size) 1vw width 1/100 viewport 1vh height repeat( auto-fit , track sizes) 1fr mixing units each column / rows fr unit (fraction of available space) 2fr … nb Track size between minmax(min,max) minmax(200px , 1fr) Min and max value or auto auto adjusts to the width (or height) of the content … to be continued Web Programming 1.4 - Eric Christoffel - Unistra 6  Item positioning  Item placing on the grid, with respect to the vertical and horizontal line numbers 1 2 3 4 5 1 2 Grid item CSS : 3 grid-row-start : 3 grid-row : 3 / 4 grid-column : 2 / 3 4 grid-row-end : 4 Web Programming 1.4 - Eric Christoffel - Unistra 7 Item positioning  Alternative using template areas ⇐ Parent CSS grid 1 2 3 4 5 1 2 3 4 5 1 1 #R1C1_4 R1C1_4 R1C1_4 R1C1_4 R1C1_4 2 2 #R2C1_3 R2C1_3 R2C1_3 R2C1_3 R2C4 #R2C4 #R3C1 3 3 #R3C2 R3C1 R3C2 R3C3_4 R3C3_4 #R3C3_4 4 4  Child CSS grid Web Programming 1.4 - Eric Christoffel - Unistra 8  CSS Flexbox Layout Model : A Quick Start Guide If Grid is a two-dimensional layout, Anatomy of a Flexbox Layout Flexbox is a one-dimensional layout only ! A flex container Some flex items Online Tool : HTML http://www.csstutorial.org/flex-both.html Parent element Child elements display : flex How much of the positive free space does an item get? 1 fraction, 2 fractions… row relative to other flex items Size and Flexibility of items flex-direction : row-reverse flex-grow : 0 · 1 · 2 · … growing to fill unused space column How much negative free space can be removed from an item? 1 fraction, … column-reverse relative to other flex items Flexbox style nowrap flex-schrink : 0 · 1 · 2 · … shrinking to avoid overflow rules CSS flex-wrap : wrap wrap-reverse What is the size of the item before growing and shrinking happens? flex-basis : auto · 0 · unit … flex-start / flex-end justify-content : center i.e. initial size, no initial size, size setting,… space-between space-around flex-grow : flex-grow flex-schrink flex-basis flex-start / flex-end align-items : center order : 0 · 1 · 2 · … strech base-line … to be continued Web Programming 1.4 - Eric Christoffel - Unistra 9 Flexbox Layout Example ? ? ? ? ? flex-grow : flex-grow flex-schrink flex-basis Web Programming 1.4 - Eric Christoffel - Unistra 10 Flexbox Layout Context of Use Header with a centered Title and a logo Navigation bar Card layout Web Programming 1.4 - Eric Christoffel - Unistra 11  Mobile First Design, Responsive Web Design, Viewport and Media Queries Viewport Emmet  meta:vp Without With The viewport is the user's visible area. The viewport is smaller on mobile than on desktop Therefore, browsers used to scale down the web page to fit the mobile screen! Media Queries In addition, the layout of the website must be adapted to the screen, mobile (fisrt), then desktop.  Media queries help to define a set of CSS rules based on a maximum or minimum device width. Web Programming 1.4 - Eric Christoffel - Unistra 12