tommi, to CSS
@tommi@pan.rent avatar

Hey @piccalilli!

I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.

I used the awesome https://utopia.fyi to generate the vars, (actually, I am using the SCSS library).

Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure #HTML and CSS!

Do you have any ideas or suggestions? 🤔

Thank you so much for all the interesting things you share! ❤️🚀

(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)

Cc: @j98 + @trys

#WebDesign #WebDev #browser #BuildExcellentWebsites #PersonalWebsite #CSSGrid #PageSpeed

inautilo, to music
@inautilo@mastodon.social avatar


Printing music with CSS Grid · A fantastic showcase of what CSS Grid is capable of https://ilo.im/15yrr6

aeveltstra,
@aeveltstra@mastodon.social avatar

@inautilo Awesome! I've been trying to do that for years. I'm happy to see we can use for this purpose!

Luke, to random
@Luke@typo.social avatar

Creating the ideal layout of multiple-sized grid cards that all hold square aspect-ratio images using no media-queries.

Luke,
@Luke@typo.social avatar

Up for a layout challenge?

I’ve browsed several online grid generators and watched several videos, I have yet to find a solution for a grid with items that have a 1/1 aspect ratio image, & featured cards that span multiple columns, AND be responsive w/o media queries.
With the featured card that spans 2 or 3, inevitably end up with squished card (see pic) on mobile.

https://codepen.io/luxuryluke/pens/public

https://www.youtube.com/playlist?list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1

cc
@kevinpowell
@jensimmons

Luke, (edited )
@Luke@typo.social avatar

…it looks like Kevin has already solved why this is happening at small sizes and he added media queries to fix it (column span forces multiple columns @ 28min mark), but as we make our layouts more adaptable and less reliant on queries, I'm curious to see if it can be solved:

https://youtu.be/sKFW3wek21Q?si=KqVHpryPOWnM_mbs&t=1690

Luke,
@Luke@typo.social avatar

…And just to round out the scenario, it looks like some of the image alignment can be simplified using the recently supported of CSS (like four months ago!).

https://youtu.be/IIQa9f0REtM?si=HbPECne0K63FGD1v&t=261

Luke,
@Luke@typo.social avatar

Found the solution, I think, to the overflowing at mobile sizes, it’s an additional min() inside the grid.
https://youtu.be/aKFB5Bjk6KM?si=WWKt5tpzQIM3Atc1
@ min 18:00
Thanks, @kevinpowell

OddBird, to CSS
@OddBird@front-end.social avatar

If you ever feel lost in the weeds, wrestling with the cascade, or you just want to improve your workflow with modern, efficient, and maintainable stylesheets, then this workshop with @mia is for you!

Cascading Style Systems: Resilient & Maintainable CSS
Mon & Tue, Feb 26 – Mar 12, 2024
Hosted by @smashingconf

https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne

cheeaun, to random
@cheeaun@mastodon.social avatar

Very early sneak-peek experiment, still on my local dev, NOT dev site. Might stash it away if it's too much effort.

Use-cases not handled (yet):

  • Filtered posts
  • Sensitive media
  • Need next/prev nav in media modal, on top of existing next/prev of multiple media in a post, else user will need to click on a media one-by-one
  • Aspect ratio?
  • Audio-only media looks weird here
  • Customizable grid dimension? 😩
  • Masonry layout instead? 😩

#PhanpySocialDev

cheeaun,
@cheeaun@mastodon.social avatar

If there's native CSS masonry support in browsers, it would look like this. Only Safari Technology Preview supports it now https://caniuse.com/?search=masonry

Code looks like this:

display: grid;  
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  
grid-template-rows: masonry;  
masonry-auto-flow: pack;  
gap: 2px;

Phanpy site, showing grid of media posts from hashtag timeline from mastodon.social. This time it's rendered with masonry layout, which also can auto-adjust the number of columns as the viewport width is resized.

callie, to CSS

Challenging question for folks. I have a grid with a header and content, the content is scrollable. I need to add padding that's equal to the height of the header to the content. I need it on the first render as well. I feel like I saw some hackery that allowed something like this, but curious if folks might have any ideas.

schizanon, to mastodon

A grid view was my first goal for https://schizo.social. clients all have so much dead-space, and I have wide screens so I want the content to fill them. I use social media for novelty, and without an algorithm it takes a LOT of scrolling to find anything interesting in the federated feed.

schizanon,

But the content of statuses varies a lot, so using a to achieve it leaves wide gaps in the rows. The only solution for that is to truncate the content with max-heights (there's a mode for but it's only supported by and then only with an about:config flag).

So I went with instead which are widely supported and achieve the masonry effect. The problem with those is that content is laid out chronologically down the , not across the rows.

schizanon, to firefox

Only supports the layout for and all the other should be ashamed of themselves for not implementing it yet! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout#creating_a_masonry_layout

janriemer, to firefox

Woah :awesome: did you know that has an implementation of masonry layout?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

It is only implemented in Firefox (behind a flag) and 17 (Technical Preview) at the moment, though (one more reason to ditch Chr**e and Ed*e if you ask me).

https://caniuse.com/?search=masonry

janriemer, to rust

It's alive!🎉

I've built a in , compiled it to and integrated it into a app! :awesome:

It's called selecuery.✨

It can transpile X++ select statements into query expressions. If you think "X++" is a typo and you don't have any idea of what I'm talking about, don't worry.😄

Have a look at the video below.

This project is dear to my heart! ❤️ I've started it 2019 for learning .

I think, I've been transpiled during this project as well.🤪

A video showing a web app with two code editors side-by-side. On the left, source code is entered, which looks like an SQL dialect. As the code is entered on the left, the code editor on the right updates in real-time. The right editor shows the SQL-like statement in a very different form, namely as a sequence of method calls on a query object. So it has just transpiled a declarative SQL-like statement into a procedural query expression. You can think of it a bit like C#'s LINQ: LINQ also has a declarative form and a procedural form.

janriemer,

Ha, I always wanted to do this kind of "sales pitch" thingy.😄

Quite pleased with it.😊

(The styling itself is not ready yet. I've wanted to get the content out first. The grid style itself will stay, though).

janriemer,

Sigh, I just love ! ❤️

Look at this - there is no involved in those animations whatsoever (except for adding the CSS class that does the animation).

So beautiful!😍

I've struggled quite a bit with the following:
use different delay values for the item's scale animation, but do not delay the scale when hovered. The solution has been to wrap the item into an additional element and animate those when hovered. 💡

A video of my webapp "selecuery". When the user scrolls down the page, an animation is happening: different grid items appear by transitioning their scale from 0 to 1, each with (what looks like) a random delay. After the grid items have appeared, the user can hover over them. When doing so, a box shadow surrounds the item and it very slightly scales bigger in size.

keithjgrant, (edited ) to CSS
@keithjgrant@front-end.social avatar

📣 CSS in Depth, 2nd edition, is officially underway! 📖

This will include tons of the improvements CSS has seen in the past five years, along with several chapters taking a deep look at the latest/upcoming tech for code organization (Goodbye, BEM!)

Let's go!!!!

https://shortener.manning.com/a1Qx

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • provamag3
  • InstantRegret
  • mdbf
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • osvaldo12
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • tacticalgear
  • ethstaker
  • cisconetworking
  • modclub
  • tester
  • GTA5RPClips
  • cubers
  • everett
  • normalnudes
  • megavids
  • Leos
  • anitta
  • lostlight
  • All magazines
    •