We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.
Segment 1 - Layout Models
StackChief reference article
Box Model
Elements comprise of: content, padding, border, margin
Dimensions like height and width
Floats and clearfix
CSS Box Model - W3Schools article


Flexbox
Evolution of the box model
Comprises of a container element called the flex container, which "control" their child elements called flex items
Flexbox is fantastic for responsive layouts
1 dimensional layouts


CSS Grid
New CSS layout method that is supported in the latest version of major browsers (IE doesn't have support)
2 dimensional layouts
Can customize every property of the grid 
# of rows and columns
size of row in various metrics (px, %, vh, vw, auto)
spacing between rows and columns


Very clean code - no need for row and column containers



Segment 2 - Box vs Flexbox vs Grid
Responsivity
Box, flexbox, and grid can all be used to make responsive layouts
Many of our production websites are still in box layout, they still work without issue on modern browsers and devices


Layouts
Basic sites can use any of the layout models
Site components (ie navbar) can be made easily with flexbox due to their one dimensional layout
Full site structures are easier to make with CSS grid due to two dimensional column and row functionality


Easy of Use
Matt believes the box model is easiest to learn - especially when learning how web pages flow
Box model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging




Links
Box Model - https://caniuse.com/#feat=inline-block
Flexbox - https://caniuse.com/#search=flex



Web News - 'Unobtrusive Ads'
Ad strategies - which are you ok with?
Sponsored posts
Banner ads (Google Ads, etc.)
Full page timed ads
Sidebar ads
Chumbox (From around the web, recommended for you)


What are some ad strategies that annoy you?
Do you think ads on a web page or app are a fair way to monetize? (freemium ad supported)
Do you care what companies' ads are served to you? (ie you don't like Coke but like Pepsi)

Support Us
TP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)
Become a Patreon Supporter

You can find us on...
Facebook | Twitter | Instagram | 
RSS | Spotify | Reddit
Medium | YouTube | GitHub

Ver todos los episodios