Sen,
Some questions on the new saclug site. https://github.com/brieweb/saclug.org/tree/master/theme/static/css
I am not the CSS expert. It looks like the template now just uses saclug.css? It previously used nblug.css and normalize.css. What was your strategy here?
Brian
I'm glad you asked! So yes, so the new css is part of my initiative to move away from all the old nblug stuff on the site. normalize.css looked like a bunch of twiddly bits to cope with the small inconsistencies between browsers. The copy of normalize.css we have is about 10 years old, so it's not clear to me how many of the cracks it was designed to paper over are still there. We could by all means jump to a new copy of normalize.css, but it's not entirely clear to me if it's necessary. A big part of the reason I moved the site over to CSS grid was to get away from the fiddly nature of floats: https://www.sitepoint.com/css-layouts-floats-flexbox-grid/. Grid behaves a lot more consistently so I suspect we won't run into serious problems across browsers. My long term plan is to continue simplifying the css for the site by debriding a lot of the old twiddling. That's the goal at least.
sen-h. On December 4, 2023 2:54:40 PM PST, "Brian E. Lavender" brian@brie.com wrote:
Sen, Some questions on the new saclug site. https://github.com/brieweb/saclug.org/tree/master/theme/static/css I am not the CSS expert. It looks like the template now just uses saclug.css? It previously used nblug.css and normalize.css. What was your strategy here? Brian
Top post here! This is a response to the CSS tweaks on saclug.
I looked at cached page and the banner at the top looks smaller. Do you think that was a result of the normalize.css, or is that from the different banner image sizes you put in?
You seem to be very good at the CSS. What if we do a meeting on CSS and the saclug site? What do you think?
Brian
On Mon, Dec 04, 2023 at 06:23:49PM -0800, Sen Hastings wrote:
I'm glad you asked! So yes, so the new css is part of my initiative to move away from all the old nblug stuff on the site. normalize.css looked like a bunch of twiddly bits to cope with the small inconsistencies between browsers. The copy of normalize.css we have is about 10 years old, so it's not clear to me how many of the cracks it was designed to paper over are still there. We could by all means jump to a new copy of normalize.css, but it's not entirely clear to me if it's necessary. A big part of the reason I moved the site over to CSS grid was to get away from the fiddly nature of floats: https://www.sitepoint.com/css-layouts-floats-flexbox-grid/. Grid behaves a lot more consistently so I suspect we won't run into serious problems across browsers. My long term plan is to continue simplifying the css for the site by debriding a lot of the old twiddling. That's the goal at least.
sen-h. On December 4, 2023 2:54:40 PM PST, "Brian E. Lavender" brian@brie.com wrote:
Sen, Some questions on the new saclug site. https://github.com/brieweb/saclug.org/tree/master/theme/static/css I am not the CSS expert. It looks like the template now just uses saclug.css? It previously used nblug.css and normalize.css. What was your strategy here? Brian
Lug-nuts mailing list -- lug-nuts@bigbrie.com To unsubscribe send an email to lug-nuts-leave@bigbrie.com
On 12/6/23 10:38, Brian E. Lavender wrote:
Top post here! This is a response to the CSS tweaks on saclug.
I looked at cached page and the banner at the top looks smaller. Do you think that was a result of the normalize.css, or is that from the different banner image sizes you put in?
It was to do with the saclug.css actually, I had specified the size of the logo as a fraction of the current viewport width. Previously It was scaled down to a fixed size that was a much smaller than the original image. We were essentially always loading an 800px wide image and then scaling it down a bunch. That seemed a tad wasteful, so through the magic of srcset, the browser determines the resolution of an image it needs for a given area and downloads one juust big enough.
See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding...
This cuts down on loading time by always downloading the smallest possible file.
But I actually just learned from reading that article again that I can do something even more clever-er-er and maintain the original behaviour while still downloading smaller files! So I just did that. Pull the repo at your leisure.
You seem to be very good at the CSS. What if we do a meeting on CSS and the saclug site? What do you think?
Sure, we can do that. I can't claim to be an expert, but I have used css to do some truly awesome/horrifying things. Such as implementing an entire spreadsheet with sortable columns and collapsible rows. See attached.
sen-h.
Brian
-
Brian E. Lavender -
Sen Hastings