CSS: Absolutely positioning things relatively(canvatechblog.com)
canvatechblog.com
CSS: Absolutely positioning things relatively
https://canvatechblog.com/css-absolutely-positioning-things-relatively-964898de886b
41 comments
> auto-generating mobile layouts and that the user simply needs to create a desktop layout?
Yes. This is a different blog post we have lined up and it's still somewhat experimental. At a high level, it's heuristic based, we attempt to identify elements related to each other and then sort the content in to the logical reading order using empty space between elements. We then generate different layouts for different screen sizes and embed them within the media queries.
I know that's a bit vague, but it's quite a complicated process to articulate in a comment and hopefully we can share more details soon - it's very much still BETA and not claiming we've nailed it.
Yes. This is a different blog post we have lined up and it's still somewhat experimental. At a high level, it's heuristic based, we attempt to identify elements related to each other and then sort the content in to the logical reading order using empty space between elements. We then generate different layouts for different screen sizes and embed them within the media queries.
I know that's a bit vague, but it's quite a complicated process to articulate in a comment and hopefully we can share more details soon - it's very much still BETA and not claiming we've nailed it.
Nice technique. Reminds me of the old days of the web, when everything was done with TABLEs.
Venture further into that: grid-template-areas let you visually lay out the elements in the grid, and combined with media queries let you completely rearrange the page as needed.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...
Or the current days of the web, if you peek at the HN HTML.
> But what if we flipped this? What if we first look at the position of the elements that we want to render and then create all the columns and rows from them.
What's old is new again!
This immediately brought me back to 2005 and apps like Dreamweaver or Fireworks that'd let you drag and drop your components onto a page, and underneath the covers would create some very complex (but clever) HTML table structure, complete with sliced and diced images and invisible pixels to space things correctly.
The underlying code wasn't pretty, but the sites did tend to render correctly, even in browsers like IE6.
Though back in those days, nobody had to worry about 6" phone screens, so not sure how well it'd scale (down) today.
What's old is new again!
This immediately brought me back to 2005 and apps like Dreamweaver or Fireworks that'd let you drag and drop your components onto a page, and underneath the covers would create some very complex (but clever) HTML table structure, complete with sliced and diced images and invisible pixels to space things correctly.
The underlying code wasn't pretty, but the sites did tend to render correctly, even in browsers like IE6.
Though back in those days, nobody had to worry about 6" phone screens, so not sure how well it'd scale (down) today.
I don't understand why we're even talking about javascript? Responsiveness has always worked fine on css. Even without grid, you could easily make a good responsive layout
The article doesn't contain any JS. JS is mentioned because it's a possible solution to generating responsive layouts without hand writing any CSS. The whole purpose of the article is to explore generating responsive style from a user designed layout without manually writing the CSS code. It's an unsolved problem domain.
> has always worked
Some of you have never had to hide styles from IE5 with HTML comments and it shows.
Some of you have never had to hide styles from IE5 with HTML comments and it shows.
In media query section, a gif that shows text block going down, you can see that at mobile scales the spacing between social icons jumps suddenly for seemingly no reason. Was that intended?
In a gif between “It’s probably best to show you” and “Voila”, social icons don’t stick to the image, dangling at the bottom instead. How to make them stick?
Asking it because most commenters here seem to praise the grid, but ignore these little facts. Interesting if these are by design or by overlook and how to fix that.
In a gif between “It’s probably best to show you” and “Voila”, social icons don’t stick to the image, dangling at the bottom instead. How to make them stick?
Asking it because most commenters here seem to praise the grid, but ignore these little facts. Interesting if these are by design or by overlook and how to fix that.
As a follow up, I’d like to try expressing the same with constraints instead of a grid. E.g.:
$image is at the top left, xy-padded by P, which is 5% of its width. To the right of it x-padded by P on both sides is a $textblock, with a minimum width of that of the image, aligned by top. If their natural/defined minimums make them not fit the width of the screen, $textblock goes below the $socialbtns padded by P/2, aligned by width of $image. $socialbtns are below the image aligned to the left, y-padded by P/2.
This should be expressed more formally, but you get the idea. Why can’t we just do this and instead have to solve some unique puzzle by hand every time we need some layout?
(Made few edits to constraints, now seems fine)
$image is at the top left, xy-padded by P, which is 5% of its width. To the right of it x-padded by P on both sides is a $textblock, with a minimum width of that of the image, aligned by top. If their natural/defined minimums make them not fit the width of the screen, $textblock goes below the $socialbtns padded by P/2, aligned by width of $image. $socialbtns are below the image aligned to the left, y-padded by P/2.
This should be expressed more formally, but you get the idea. Why can’t we just do this and instead have to solve some unique puzzle by hand every time we need some layout?
(Made few edits to constraints, now seems fine)
Android has ConstraintLayout with some of that, but it's just "spaces between sibling edges", not quite as flexible as you describe.
It does jump, but perhaps this is an unintended consequence that makes it easier to tap those icons?
Flex is becoming more and more irrelevant to do layouts. CSS Grid is really solid and it works well on responsive. The possibilities are endless.
Flex and grid are 2 different domains.
Grid is good for making grids.
Flex is good for creating flows of content, like a <div> where all childs has display:inline-block. It supports wrapping when content can't be on a single line.
Grid is good for making grids.
Flex is good for creating flows of content, like a <div> where all childs has display:inline-block. It supports wrapping when content can't be on a single line.
Exactly. But we came from using Flex as the defacto system to do layouts and more, now with CSS-Grid it does make sense to use flex for what it was meant for.
I guess it depends on your past experience, but for most of the teams I've been involved in, it was basically a leap from floats to grids for page layout, with flexbox being a small scale option before and after.
Flex is way simpler to use and reason about, it's sufficient for a majority of cases and it works on IE11, which is still supported until 2025.
Grid is more powerful, but not by a huge margin and not in every case. You can get very far with just flex, calc, media queries, and some inline variables and some other tricks. Also grid needs a more global view so to speak and up-front design as opposed to the component based thinking that has become so prevalent.
I'm a fan of the feature but I don't think flex is becoming irrelevant anytime soon.
Grid is more powerful, but not by a huge margin and not in every case. You can get very far with just flex, calc, media queries, and some inline variables and some other tricks. Also grid needs a more global view so to speak and up-front design as opposed to the component based thinking that has become so prevalent.
I'm a fan of the feature but I don't think flex is becoming irrelevant anytime soon.
For page layout sure, but for stuff like a unknown-length sequence of blocks/tiles/cards of mixed size flexbox is getting more useful, especially now grid-gap is just gap and works on flexbox too.
Yes, it is useful for inline positioning, ex. a menu, but for the rest of the things mostly css does solve it without having to do much.
I think the next challenge would be to have a native "masonry" grid feature. That would cover several usecases.
Flexbox would have been my preference here. media query to switch the flex-direction, order to pull the buttons up in small mode. But grid seems to work too.
I've been doing this for 20+ years. I was there when CSS hatched and we started switching out tables and image maps for divs and layers and then crying when IE4, IE5 invariably didn't work. What I mean to say is that isn't is nice that we can have multiple ways of accomplishing the same thing in a standard way?
I barely ever have to fix cross-browser positional issues these days. That used to be 20% of my working life.
I've been doing this for 20+ years. I was there when CSS hatched and we started switching out tables and image maps for divs and layers and then crying when IE4, IE5 invariably didn't work. What I mean to say is that isn't is nice that we can have multiple ways of accomplishing the same thing in a standard way?
I barely ever have to fix cross-browser positional issues these days. That used to be 20% of my working life.
This approach is over-engineered to say the least…
You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there…
For beginners in HTML/CSS this approach is absolutely distracting IMHO.
You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there…
For beginners in HTML/CSS this approach is absolutely distracting IMHO.
Hey, op / author here. For this design, of course you could use Flex, but the purpose of the article is that a design created with a drag and drop editor by a user, could be rendered responsively. Users could overlap elements and create all kinds of complex creations that we can't slice up in to flex blocks programmatically. The grid provides a way to render just about anything, with a bit of flexibility.
100% not advocating an engineer to ever do this, we only do it because it's automated and there is no engineer present to convert a design in to a website at scale.
100% not advocating an engineer to ever do this, we only do it because it's automated and there is no engineer present to convert a design in to a website at scale.
This is evidently intended for platform builders, not standalone site authors. As someone whose systems include content authored by nontechnical third parties, and favouring pure CSS solutions to layout concerns, I found it a useful discussion.
> You can implement such a layout without using Grid Layout and using just Flex Layout
IMO Grid is actually simpler than Flex. Once IE11 is out of the picture, I think it might be worth considering teaching CSS beginners using a Grid-first approach.
IMO Grid is actually simpler than Flex. Once IE11 is out of the picture, I think it might be worth considering teaching CSS beginners using a Grid-first approach.
[deleted]
this is such a great info!
> You can see all the breakpoints kicking in as the available width changes. Our backend algorithms can reconfigure the content and produce a different grid layout for each screen size, allowing everything to move around.
Could you elaborate on this? Is this implying that the backend is auto-generating mobile layouts and that the user simply needs to create a desktop layout? If yes, how does it decide where to place things if multiple media and multiple text blocks are present?