21–30 of 42 posts
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
Nice technique. Reminds me of the old days of the web, when everything was done with TABLEs.
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 igno…
$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)
Nice technique. Reminds me of the old days of the web, when everything was done with TABLEs.
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 igno…
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 igno…
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, alig…
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.