Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Faster Layouts with CSS Grid and Subgrid

hacks.mozilla.org

Post reply on HN
Print view View original

41–50 of 86 posts

Re: Faster Layouts with CSS Grid and Subgrid

#41

Post by ronyeh »

maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

Cool project. One thing I noticed is that when I zoom in, the font becomes pixelated. For people with poorer vision, HTML and CSS has a great advantage in that you can zoom in with most browsers and your fonts always look super sharp.

Re: Faster Layouts with CSS Grid and Subgrid

#42

Post by maxharris »

jasonsb wrote: post #37
maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

It looks like you're reinventing Adobe Flash, but this time without a browser plugin and with even less accessibility.

Unlike Flash, my project is completely open. The README clearly states my plan for accessibility. Want to help me make it accessible?

Re: Faster Layouts with CSS Grid and Subgrid

#43

Post by maxharris »

ronyeh wrote: post #41
maxharris wrote: post #20

So I'm working on a replacement for HTML and CSS. Right now it's written in JavaScript and it renders to canvas. The reason I'm posting here is because you can write your own layout components in my system. So if you have a new idea, instead of waiting years for it to get standardized and supported by the browsers, you can just roll your own idea and run it in anywhere without any fuss. (Flexbox took years to do some…

Cool project. One thing I noticed is that when I zoom in, the font becomes pixelated. For people with poorer vision, HTML and CSS has a great advantage in that you can zoom in with most browsers and your fonts always look super sharp.

Thanks! I'll do my best to fix that zoom issue!

Re: Faster Layouts with CSS Grid and Subgrid

#44

Post by miiiiiike »

The_rationalist wrote: post #39
miiiiiike wrote: post #27

Earlier quoted context omitted.

They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.

I agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.

It's nice to be in a place with CSS where we're talking about all of the good ways to do things rather than telling each other "if you abuse this feature you can accomplish the task in 2 of the major browsers. YMMV."

Re: Faster Layouts with CSS Grid and Subgrid

#45

Post by Swizec »

miiiiiike wrote: post #24
Swizec wrote: post #13

Earlier quoted context omitted.

> Good stuff. Keyboard clacking during screencasts is a non-starter for me tho. Funny, I often get compliments on the clacking of my mechanical keyboard in screencasts and livecodings. Creates a soothing background noise.

Clacks drive me up the wall. Having a table mounted mic in a podcast gets to me too. I can't concentrate if I keep hearing elbows hitting a table through a mic stand. It's more editing work but I like to split out the screen recording, VO, and PTC. Bonus, you can get rid of jump cuts and other weird edits by cutting to the screen recording just before you messed up your line.

What’s VO and PTC?

My mic is on a boom with a shock mount so the clacks really are just mellow background noise. I hate the loud bangs too.

Re: Faster Layouts with CSS Grid and Subgrid

#46

Post by 0xffff2 »

Swizec wrote: post #45
miiiiiike wrote: post #24

Earlier quoted context omitted.

Clacks drive me up the wall. Having a table mounted mic in a podcast gets to me too. I can't concentrate if I keep hearing elbows hitting a table through a mic stand. It's more editing work but I like to split out the screen recording, VO, and PTC. Bonus, you can get rid of jump cuts and other weird edits by cutting to the screen recording just before you messed up your line.

What’s VO and PTC? My mic is on a boom with a shock mount so the clacks really are just mellow background noise. I hate the loud bangs too.

VO -> Voice Over I assume. No idea what PTC is.

Re: Faster Layouts with CSS Grid and Subgrid

#47

Post by baddox »

Swizec wrote: post #13
miiiiiike wrote: post #5

Good stuff. Keyboard clacking during screencasts is a non-starter for me tho. I really like Jen Simmons's videos on CSS layouts. ( https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/vid... ) Before this month, the last time that I made a layout with CSS floats were still in style. When I decided to really learn modern CSS this month even starter videos like "Basics of CSS Grid: The Big Picture ( https://www.you…

> Good stuff. Keyboard clacking during screencasts is a non-starter for me tho. Funny, I often get compliments on the clacking of my mechanical keyboard in screencasts and livecodings. Creates a soothing background noise.

I was thinking it's odd because, in the one video from this article I watched, the keyboard sounds were among the quietest and least noticeable I've ever encountered.

Re: Faster Layouts with CSS Grid and Subgrid

#48

Post by baddox »

miiiiiike wrote: post #27
The_rationalist wrote: post #21

Earlier quoted context omitted.

Sadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.

They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.

That's an okay rule of thumb, but I find myself using grid more and more for traditional flexbox applications like a horizontal list of cards that wraps. Little things like grid-gap (flex child margins are a constant source of pain) and auto-fill with minmax [0] make a big difference to me in rapid prototyping.

[0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

Re: Faster Layouts with CSS Grid and Subgrid

#49

Post by nicoburns »

tux1968 wrote: post #35
btbuildem wrote: post #32

Earlier quoted context omitted.

.foo { display: grid; grid-template-rows: 10% 80% 10%; height: 100vh; } header text footer

Don't think that has the desired effect; at least if I understood the request properly. The text area won't get a scrollbar when more text is added to fill the view area. It seems in this case you would have to manually ensure that the text you gave could fit in 80% of the screen, or bad things happen visually. Also, the header and footer aren't permanent, they are affected by the entire-page scrollbar.

All you need is an `overflow-y: scroll` on the text element, and it will work as desired. The whole page won't have a scrollbar, because no content will be overflowing past it's boundaries.

Grid is ideal for these kind of layouts.

Re: Faster Layouts with CSS Grid and Subgrid

#50

Post by fjp »

tannhaeuser wrote: post #18
kerkeslager wrote: post #12

Earlier quoted context omitted.

For what? I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

Floats are still useful when you want to express structured document flow layouts with illustrations for nearby body text, side-nav link boxes, aligned or otherwise flow-parametered effects such as initials, syndicated/contributed content, or when you just want to float text around images.

Every time I thought I have needed float, I have always later found a cleaner way to do it without float.
Post reply on HN