I really appreciate the clear explanation of the problem at the beginning. This halfway inspires me to go rewrite my personal website in order to accommodate full bleed.
Full-Bleed Layout Using CSS Grid
171–180 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#172It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know
For me I think CSS is hard to understand mostly because the underlying concepts are low level and designed to accommodate ALL POSSIBLE rendering scenarios, not just "I'm putting a website on this laptop or phone screen". CSS is able to target print and all manner of other different scenarios and needs. It's inherently complicated because it's very flexible and accounts for all kinds of use cases. The problem is you d…
CSS is able to target print
Only an old textual part of it, e.g. grids cannot page-breaks. It is far from "flexible" and just "out there if you want". May I ask, do you even media print? Because every time I have to do unusual un-mainstream thing in css, I can bet that it will not work and make a net profit.
Re: Full-Bleed Layout Using CSS Grid
#173Earlier quoted context omitted.
The new IE.
Very disingenuous of you. IE was a trashfire because it refused to do anything in a standard way, meaning it had to be specially catered for. Safari is slow to follow the standards but at least its compliant. A engine that isn't Chrome is very essential for keeping the web open, especially since Firefox user share keeps going down.
ie was also a trashfire because of the release/update model, holding the entire web back because it was so far behind standards (ie6 was actually ahead of its time on release, but then didn't get updated for ages). safari, especially on ios where you can't even get any other browser engines, and the safari version is tied to the operating system version, follows that same model with the same consequences. not as painful these days, since the web has come a long way already, but you can definitely see the parallels
Re: Full-Bleed Layout Using CSS Grid
#174It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know
I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CS…
While I think this is definitely a useful foundation, things get a lot more complicated quickly once you jump into a large site's stylesheet(s).
Why isn't this element the size I specified? Or why is there a tiny amount of scroll overflow here when I specify overflow-x hidden? What does vertical-align do and how does it work when inline and inline-block boxes are in an inline flow? etc. etc.
So I would add that the next frontier after learning the proposed foundations is learning how the browser actually determines box sizes and layout, and I think this is difficult to understand, mainly because it jumps straight into the spec, or worse, your browser's layout engine specifics.
https://www.w3.org/TR/css-sizing-3/#auto-box-sizes for instance is a nontrivial subsystem that a CSS dev will easily run into when nesting flex containers, and I think the standard box model of yore wasn't really written to help grok these concepts.
Edit: one particularly hairy explanation from the spec I recently ran into while trying to deepen my understanding of the box model:
"Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes."
Not saying this is relevant for the average use case, but I believe even something like the box model is a day-to-learn-lifetime-to-master kind of thing.
Re: Full-Bleed Layout Using CSS Grid
#175Earlier quoted context omitted.
The new IE.
Very disingenuous of you. IE was a trashfire because it refused to do anything in a standard way, meaning it had to be specially catered for. Safari is slow to follow the standards but at least its compliant. A engine that isn't Chrome is very essential for keeping the web open, especially since Firefox user share keeps going down.
Safari has absolutely ignored standards when it suits apple. That's why, for example, you can't rely on PWAs on Apple products.
Re: Full-Bleed Layout Using CSS Grid
#176Earlier quoted context omitted.
I closed the page as soon as I saw that because I assumed it was an ad that had escaped the blocker.
What information are you concerned about them harvesting that they won't have gotten just from the ad loading? I suppose time on site and stuff, but I'm not sure what bits of info you're trying to hide. Feels like a situation where you might as well enjoy the content.
I'm not "concerned" at all. It's just a personal philosophy. Especially as the pop-up was a waving cartoon character. Bad memories of Bonzi Buddy.
Re: Full-Bleed Layout Using CSS Grid
#177I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…
It's surprising how rarely I even consider using CSS grid and every time I do, I still figure out a way to do it with flexbox. Now this depends of course on what you are doing, but for simple things, and you should keep things simple more often than complicated, flexbox is still as valid as it was before. Maybe my layouts aren't as fancy as those who know how to neatly proportion their boxes with CSS grid using golde…
I agree. Grid seemed great in theory, but in practice I almost never find myself using it. The number of use cases that flexbox doesn't satisfy is quite small, and the Grid syntax is a bit more tedious. It's just not worth the trouble most of the time.
Re: Full-Bleed Layout Using CSS Grid
#178Earlier quoted context omitted.
I think part of it is that there are probably lots of additional items that you want to constrain to the main column, so your CSS would end up looking more like: #content p, h1, h2, h3, nav { .. } Kind of a pain to manually specify each element that you want to constrain, when it's most of them. This approach allows you to instead target the items that you don't want to constrain. Additionally, as a more specific iss…
Still not sure I get it. CSS makes it very easy to carve-out elements because of selector specificity. .content * { max-width: 65ch; margin: 0 auto; } .content img { max-width: 100%; width: 100%; } It's a neat demo of CSS Grid, for sure, but the above would be my much preferred way of doing this kind of layout. Maybe if there were a need for elements (quotes, callouts, etc.) in the side columns alongside the content,…
Indeed the grid based solution in the article depends on selector specificity in exactly the same way as this.
Re: Full-Bleed Layout Using CSS Grid
#179Great article. While CSS grid is very powerful, maybe I'm not seeing the full picture in the examples: aren't the examples possible with just p { margin: 0 auto; max-width: 65ch } ? What does grid bring here?
only theoretically, for the p element itself. ch is a fontsize relative unit and this solution wouldn't provide the same results for any element that has another text sizing and is not wrapped within a p tag. and if you apply these rules to the whole content wrapper, you loose the ability to have some children selectively fill the viewport.
[deleted]
Re: Full-Bleed Layout Using CSS Grid
#180I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…
I like CSS grids for global layout stuff because of the layout flexibility it gives you when it comes to different screen sizes and orientations, without having to use js when you need to swap the order of things around (and at some point you will have to eventually unless it is a very simple page). This helps separating the markup from the styling even further so it is rather a good thing.
I would — however — never had the idea to abuse it like that. Why not just limiting using max-width on your text-related tags?
The only problem I ever had with that is that markdown generated HTML will wrap into
if it follows the standard and as of now there is no CSS way of selecting p without child of type IMG or p only with child of type img..