I don't know why but this page is using 100% CPU and making my fans go through the roof in Safari.
Same, around 40-50% CPU in Brave (MacOS), and the article is more or less useless with JS disabled.. ಠ_ಠ
Full-Bleed Layout Using CSS Grid
101–110 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#102Earlier quoted context omitted.
Same, around 40-50% CPU in Brave (MacOS), and the article is more or less useless with JS disabled.. ಠ_ಠ
Yeah, disabling JS fixed it but then you can't see any of the code snippets.
Re: Full-Bleed Layout Using CSS Grid
#103Slightly OT, but this page has the BEST alternative for a modal newsletter pop-up I’ve ever seen. I have a personal rule that I close the tab as soon as a modal asking for my email pops up. When the cute little figure on the left _asked_ for my consent to pop-up a modal, I had to click on it because it was so cute and respectful. This is great design that I’m sure converts as well without cheapening your brand and ac…
Agreed. I subscribed to the newsletter too - I would normally never do that.
Re: Full-Bleed Layout Using CSS Grid
#104Re: Full-Bleed Layout Using CSS Grid
#105I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…
Re: Full-Bleed Layout Using CSS Grid
#106If your screen is too wide to read websites comfortably, why don't you resize your browser? What is the point of buying a bigger monitor if you're still going to full-screen your browser to the point you can't read anymore? Isn't the point of bigger monitors to show more things at once?
I don't understand either. These days we have many websites with giant empty spaces on the left and/or right, all in the name of making the text lines short enough (much shorter than I like them, but that's another rant). Making the browser window smaller often makes the text even smaller, instead of the useless empty spaces. Make some room for my other windows, please! We're not in the 90's anymore where monitors we…
The other rant is here: [1].
Curious why do you hope people don't use their browsers full-screen? How does someone else's browsing preference affect you? Am I a lesser person if I want to use my browser full-screen on a 5120x2880 retina display?
It seems more and more every year, the user's preference gets sidelined in favor of the web site designer's preference. I never thought it would get to this, but as web sites get more and more opinionated about enforcing their particular stylistic choices, I'm more often than not feeling the need to disable CSS or go into Reader mode. I wish browser developers would provide better tools to override questionable site designs, rather than taking them away. At least I can still change the font size with the browsers (shhhh--don't give them any ideas).
Re: Full-Bleed Layout Using CSS Grid
#107> It's relatively easy to constrain all children, but CSS doesn't really have a mechanism to selectively constrain some children. Yes it does. You can use .wrapper h1, .wrapper p {} or soon .wrapper :is(h1,p) {} Alternatively, you can also use .wrapper > :not(.full-bleed) {} And in SCSS (or similar) you can write .wrapper { h1,p {} } (edit: Earlier versions of this comment mentioned :has instead of :is)
What I meant is that there is no way to tell certain children to disregard the constraints of a container; if a parent is 800px wide, there isn't a way to say "keep this child in-flow, but fill the viewport".
The alternative you propose is problematic for a couple reasons:
- I don't like "reaching in" to child elements. Especially in a component-focused architecture, it's a quick way to make a mess. My solution DOES reach in to apply a grid column, but that property only makes sense within the context of a grid, so it doesn't seem as problematic to me.
- the `ch` unit doesn't work properly when applied individually to different elements; an `h1` with 65ch width is going to be much wider than a `p` with 65ch width. You need the width to be applied to the parent, so that it remains consistent
- It's likely that you already have a constrained container, if you're adapting this solution to a page that already exists. If so, your approach isn't really workable without a major overhaul.
I'd also just add, the nice thing about using Grid is that it's super extensible. If you want to add a sidebar, it's quick and straightforward.
Re: Full-Bleed Layout Using CSS Grid
#108The translucent gradient overlay this site has is truly obnoxious. What possesses people to do things like this? Headers that follow you when you scroll down the page are bad enough, but this is truly abominable. Don't fade out text I'm trying to read dammit! Delete StandardLayout__GradientWrapper, it served no useful purpose, it only pisses people off.
Re: Full-Bleed Layout Using CSS Grid
#109Re: Full-Bleed Layout Using CSS Grid
#110I tried to adapt the articles approach to wikipedia. Create an account on wikipedia, or login.
Then go to https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsec...
I chose MinervaNeue with Custom CSS. Here is what I set the CSS to:
main {
display: grid;
grid-template-columns:
1fr
min(65ch, 100%)
1fr;
}
main p {
font-family: "Hoefler Text", Garamond, "Times New Roman", Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
}
main > * {
grid-column: 2;
}
.infobox {
width: 100%;
grid-column: 1 / 4;
}
It's ok. But the infobox isn't right. It takes up too much space from the main column.Anybody got a better layout?