HackerTube
HomeLongsLikedHistoryWatch laterCategoriesPlaylistsSettings

Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)

WordPress1 HN recommender · recommended in 1 month, 2018-2018
YouTube
51K views · 9 years ago · talk · dated

Morten Rand-Hendriksen argues that CSS Grid changes web layout, showing how to place content in cells independent of HTML source order and reshape layouts with media queries. It makes the case for using Grid now that browsers support it.

HN commenters say it convinced them to drop other layout approaches and embrace Grid, and cite its advice on fallbacks for older browsers.

Web developmentUX & UI design#cssgrid#weblayout#responsivedesign#front-end#accessibility

3 comments from Hacker News

@BlackMonday2018 · in “CSS grid garden”

If possible you could alternatively have send her (every browser which doesn't support full grid) a mobile layout like described in the video: ▶ this video > From this follows a simple but surprising truth: The lack of support for CSS grid in an old browser should not affect the experience of the visitor, but rather just make the experience different. > If you agree with this (and you should), there is no reason you can’t use CSS grid today! > Here’s how that approach could work in practice. Rather than using fallbacks and shims to ensure a design and layout look the same across all browsers, we’d provide the mobile vertical single-column layout to all browsers and then serve up advanced functionality to those browsers and viewport widths that can take advantage of them. It might sound like progressive enhancement, but it’s actually more of an accessibility-centric approach enabled by a mental shift. link

CitesView on HN
@keth2018 · in “Show HN: Layoutit – An interactive CSS Grid generator”

I remember a video + blog post about this, and it was suggested to just ship a mobile layout for browsers that don't support css grid. At least for personal sites that seemed reasonable. EDIT: ▶ this video

CitesView on HN
@rsoto2018 · in “Best Practices with CSS Grid Layout”

I'm reading the comments and I think there's a lot of misunderstanding about what CSS Grid is. Mostly because the spec is big and there's not just one way to do things, so it gets mixed with flexbox and tables. I recommend watching last year's Morten's CSS grid presentation[1] as it has convinced me to stop using other layouts/frameworks and just embrace grid, which is truly amazing and it has been a blast working with it and making responsive websites without worrying too much about the markup. 1: ▶ this video

Strongly recommendsView on HN
CSS Grid Changes EVERYTHING - Amazing Presentation32:06

CSS Grid Changes EVERYTHING - Amazing Presentation

Coding Tech
1.1M views • 9 years ago
Flexbox vs. CSS Grid — Which is Better?4:18

Flexbox vs. CSS Grid — Which is Better?

Layout Land
314K views • 8 years ago
Andy Bell – Be the browser’s mentor, not its micromanager43:33

Andy Bell – Be the browser’s mentor, not its micromanager

Hey! Presents
23K views • 4 years ago
"Building a Toolkit for Design" by Matthew Griffith32:25

"Building a Toolkit for Design" by Matthew Griffith

elm-conf
25K views • 8 years ago
Hacker Way: Rethinking Web App Development at Facebook44:36

Hacker Way: Rethinking Web App Development at Facebook

Meta Developers
900K views • 12 years ago
why Japan's internet is weirdly designed15:15

why Japan's internet is weirdly designed

Answer in Progress
5.2M views • 3 years ago
Building a Better Web Browser - James Mickens - Harvard CS Colloquium 20151:07:46

Building a Better Web Browser - James Mickens - Harvard CS Colloquium 2015

Paul Irish
29K views • 10 years ago
Cheng Lou - On the Spectrum of Abstraction at react-europe 201635:32

Cheng Lou - On the Spectrum of Abstraction at react-europe 2016

ReactEurope
63K views • 10 years ago
Crockford on JavaScript - Section 8: Programming Style & Your Brain1:06:46

Crockford on JavaScript - Section 8: Programming Style & Your Brain

YUI Library
111K views • 14 years ago
React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience25:55

React.js Conf 2015 - Beyond the DOM: How Netflix plans to enhance your television experience

Meta Developers
26K views • 11 years ago
dotJS 2012 - Brian Leroux - WTFJS18:27

dotJS 2012 - Brian Leroux - WTFJS

dotconferences
209K views • 13 years ago
Dynamic Languages Wizards Series - Panel on Language Design1:58:46

Dynamic Languages Wizards Series - Panel on Language Design

Eduardo Cavazos
16K views • 14 years ago
[JSConfUS 2013] Steven Wittens: Making WebGL Dance30:55

[JSConfUS 2013] Steven Wittens: Making WebGL Dance

JSConf
56K views • 13 years ago
Mark DiMarco: User Interface Algorithms [JSConf2014]27:42

Mark DiMarco: User Interface Algorithms [JSConf2014]

JSConf
52K views • 12 years ago
[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook18:55

[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook

JSConf
45K views • 13 years ago
Nicholas Zakas: Scalable JavaScript Application Architecture52:23

Nicholas Zakas: Scalable JavaScript Application Architecture

YUI Library
68K views • 15 years ago
Om Next - David Nolen46:18

Om Next - David Nolen

ClojureTV
44K views • 11 years ago
Jordan Walke - React to the Future36:45

Jordan Walke - React to the Future

ReasonConf
48K views • 6 years ago
Nordic.js 2014 • Douglas Crockford - The Better Parts33:52

Nordic.js 2014 • Douglas Crockford - The Better Parts

Nordic.js
73K views • 12 years ago
Meteor Screecast9:43

Meteor Screecast

meteorscreencasts
50K views • 14 years ago