GitLab Digital Experience, 24 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Slippers design system foundations: Grid conversation

Description

Javi and Laura discuss the difference between breakpoints and ranges, and what a grid might look like on each screen size.

Slippers Design System repo: https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui

Storybook instance: https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui

Digital Experience handbook page: https://about.gitlab.com/handbook/marketing/inbound-marketing/digital-experience/

A

Okay, all right, what's up everybody, uh this is javier and laura from digital experience and we're going to be talking about break points and grids. This has been like a big backlog item for us just because we've been up and running for a while, and we haven't really talked about like what's happening.

A

So let me just like start off by giving off some context so like this right here that I'm sharing is our figma slippers foundation, and so then, this right here is taken from the pajamas design system and it was like kind of our starting point with like trying to get like you know up and running with assets and communicating to stakeholders that we are like mobile friendly. That, like responsiveness, is important, but also giving designers like a clear set of deliverables and assets that they can hand off to the developer.

A

That has been great and all um sometimes, there's been like confusion on like how things shrink or grow based on like the viewport and like different things, and it gets real like you can get really nitty-gritty um about that. So like something that we've done in terms of the slippers design system is within the tailwind configuration file, we've set breakpoints um that are essentially ones that we've defined ourselves. um um I don't really know how else to explain it other than that, but like all right.

A

So what I did here is essentially I took like what tailwind is doing at different break points, and I wanted to illustrate that just so that it gives people, and it gives myself included like a very clear understanding about why, like how things react in different ways so like if you don't like in tailwind, um if you don't specify a breakpoint object, um things will just like shrink and grow um so like anything in this range will just like you know, yeah that, like I hope that makes sense like that illustrates, I don't think I did a great job of explaining it, but, like that's like what's happening um so then like as you get into like the actual defined breakpoints that you have, which is like if we go to.

A

Oh goodness, okay- if we go to this just just so that I can show you where this is being pulled from um this right here so line 107 to 1010 is the small medium large.

A

And so then, if I go back to slippers foundation, this is where the 640 1024 and then 1400 is being pulled in so what's happening. Is that the small? No so something that I think is like a misnomer between like design and developer, is like this break point concept, like I think in my head. I think of it more as like a range and what I mean by that is like whenever something whenever you assign something the small break point. It's really talking about the space between 641 pixels and 10 24 pixels.

A

So anything that's assigned that break point is going to behave in this way.

A

So we have something called a container in tailwind and essentially, what this is doing is it's like centering like this, so that you have like padding on the sides to make sure that, like things are being like, you know, centered and whatnot, and I think this is like a concept that helps with like making sure like plainly put it's like tran, the design translates better um it's harder to design like fully responsive like widths like this one at all break points just because it gets really complicated.

A

So this concept of a container was really popularized by that, and essentially, what happens is that anything in this range? This container is just like sta stuck stuck in the middle. So this means that, like at 641 like there is a half like pixel padding on both sides and then at like the 1024 size, it's like just whatever it's like it's staying, centered and then the same thing with the medium and the same same thing with the large.

A

um I just wanted to make like a quick video like demoing, some of that, uh so that other people in our team can see also just to bring up some visibility into the work that we're doing into trying to like figure this out. I know we talked a little bit about like what's happening here beforehand, laura, but I don't know if you have any particular questions about what I said.

B

No, I mean there's like um like in these screens that you're showing the small um screen like you, can see that it has eight um columns of equal width um and then the medium screen has, I think, 12 I'm quickly, counting, probably and a large also just keeps 12, uh but stretched, um probably to a max width of like I don't know if 1200 pixels or 1440 or whatever whatever we chose, is like our largest container yeah.

A

So possible yeah, for so for the largest container that we have. There is no like the range is like 1400 to like infinity, so that makes sense so like if we had a screen that was like theoretically, like you know, like 6000 pixels long. It would just like do this. If that makes sense and like could we define like more break points um and have like further definitions, sure it kind of comes down to like simplicity versus like effectiveness and like?

A

Where do we think our target audience is like mostly coming from in terms of like the break points? um More break points means more work to like, because that means like we have to now develop in an extra break point which slows us down, which means, like things, get rolled out slower. So it's kind of like this trade-off in my head at least like what is effective and like what also delivers to the most devices as possible, and we I think, like in our head.

A

This was like kind of what we came to um an action item for us. I think is like to try to resolve this like temporary working solution with, like this other temporary working solution that we have over here. um The reason why I say they're both temporary working solutions is because there's a is there a? Is there like rhyme or reason behind why those decisions were made at some point?

A

Yes, but, like, I think, like we're getting to a point where, like as we're starting to grow, like the reasoning in like from what I've seen so far is like becoming less and less relevant to what the work that we do. So we might have to re-examine this further um and laura. Has this big issue and like what prompted all of this pretty much is that laura has this issue of like trying to like resolve like these foundational elements, um so the grade in particular was something that we're trying to add to our storybook instance.

A

That is blocked like all by this pretty much like if we don't have like us, like some resolution here, it like kind of makes it difficult to design, because it's like yeah like if we don't have breakpoints, we don't have grids so um yeah.

B

A

In my head, I don't know if yeah.

B

They're definitely like intrinsically linked, so I guess like in terms of uh next kind of action items or deliverables. For me, as I'm kind of working through this grid um issue is like we'll have a mobile view, for example, like our smallest size, that'll, be four columns um like in the existing kind of small view and then a version that has four uh eight columns and then a version that has 12 columns.

B

um It seems to be those are like kind of the three thresholds that we're breaking at kind of thing.

A

Yeah something so something I will say about that is like this is like the bottom stuff is like stuff that I've had the opinion of, so I think it might make sense like if I'm just being blunt like these are things opinions that I've come up with um and so like. I think what needs to happen is like I think design needs to come in and like kind of like share their perspective of like because they're the ones at the end of the day that are going to be like actually generating the assets so like.

A

I think they should have like a larger say in this. I think, like implementation wise. This is like what's happening like so far, but, like you know, that's not to say that we can change this. I'm just saying like I think we. I think it helps to illustrate like what is actually happening. Code side.

B

A

I think it helps like it gives people a better way of like trying to come up with like answers to these questions. I think.

B

Yeah fair because, as it currently stands, I mean the the bottom row with there being a version with eight columns. That does add an extra potentially design.

B

You know requirement of having three different screen versions, which might be a little tough, but I also think that for the most part, the idea of this system is that it'll account for like. If we have the small small mobile view and the full screen view, we can kind of assume like the the system should be able to handle what happens in between. Yes, that's.

A

That's that's kind of like the opinion that I'm like holding um is like the generated assets like what designers will give us. It will still be two like in my head: it's. It should still be two screen sizes but like if we want like more like. I think I think it's like about like filling in the gaps right like on the engineering side like and explaining to designers like this is what's happening like in between.

A

Does that make sense to you, yeah yeah,.

B

A

All right sweet, I mean we don't have.

B

A

B

Yeah all right! Well, thanks. Everyone.

A

All right, this is a mess, but let's do it.