GitLab UX Team, 2 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: GitLab UI utilities

Description

Discussion about how to leverage gitlab-ui styling utilities in another project

A

B

A

So I want to share my my screen if, if it is okay, because I want to show you, they point said that I'd like to cover so I have like four points that I think that we can. You know that the array would be to yield up your item. Maybe we could like apply.

C

A

B

Because I was kind of struggling like to understand what exactly you need in this project, especially when there is no actual code, and it might be some common styles that we can put from little pocket or API. But you can be sure a situation needs them, because there is only least viewers. It's very simple.

A

um I think that I got to fit in your mesh request that there were many things in develop, UI that didn't leak in the service page.

B

My first intention, when I've done, MVC I was just I just added compiled in this CSS from KPI, but in fact we don't change at all. As far as sorry as I understand, that's.

A

Right, I think that it would be like creating a very bloated CSS file for a sales page that probably.

C

Should be like.

A

Very small in the first place.

B

A

I went back and see if I could, like only include base CSS of Philippi iobit is like the most essential part.

A

So I followed a similar pattern to what you did with the bootstrap file, where you only great, like all of the parts that you need it and I created ideal up your I file, only things that we could use here. You.

C

A

Create the variables some viable over rights I'll be ready. The time.

C

A

And the three classes, so if you, for example, would need like a different component. For example, I see that the your you seen the badges from develop your eye and.

C

A

Buttons that, by the way, those those components are not like a style gift like we are using, she let the bootstrap styles, and it is okay to use them. We just had we haven't finished, you know creating production, credit, styles ones that they are pretty. We could go to. They go back to the develop you ie file and just include these files here.

A

B

Know just a question like finally inverts a component: it actually comes BC with the styles right, so we don't need to include styles from it'll appear at this point.

A

We do if you, if you import import the bottom component here, it is not coming with the Buddhist arms.

C

A

You want to include them once they are ready. You have to put them here by adding.

C

A

New import statement would be something like this probably mm-hmm.

B

But it's it's not very yet ready.

A

B

Can even my own.

A

So they'll say the first point. Second point: is that probably we don't need to declare more variables here because did love you I are very includes most of the variables that you you declared here even more. Somebody was like this ones that are.

C

A

Lot font size we.

C

A

Updated updated ones, get lucky right that others, they type typography a specific, a shows, the they probably same team has a house in Clemente in in pajamas hostels create the pajamas, so it's gonna be those Y levels are going to be, let's say better because they are already. You know like following the assignment system expects.

A

B

Do be it just didn't, get help TV gets and the import variables from a little API.

A

So in this file, I already include them here.

B

Sorry encode they get lucky I before bootstrap and kind of get variables overrides. It said I had in my project right, but we don't have to duplicate, because we can just import it from it. Why bi.

A

That's right, I, don't even need well in the case of of these variables. Ones are not overriding yeah.

C

A

If you want to overwrite bootstrap variables, you don't.

C

A

Need to declare them before they, they would straddle declarations, because Bushrod marks those variables variable. So.

B

C

A

Them after them.

B

Okay, so we just can include variables and variables overrides from Google API.

C

A

Cool so my third point is: uh we recently implemented typography again a typography style based on very same system, so we could. We could get rid of these ones of these overrides here. That.

C

A

Fit in there, the font, size and the margins so I would like to maybe we can give it a try and see how it works once we do it here. What do you think.

B

Bullying, mine, fun, I can like update this my cheapest, and you can edit SM right now. Just.

B

A

That's that's fine, just what I'd like you know, we can't we could like give it a try and then you can push it and work on something more later, but you know if you brought to it directly. It's.

B

You can do it drink now. However, you like.

A

Also fight, finally, we can use a begin up your utility class library here that is, since they three class library, it's more its race into the same system, respects it is more complete and it's probably like we probably have a lot of the values that you need. While implementing these these styles and.

C

A

We are missing a 3d class. We.

C

A

Back to develop you I, enjoy.

C

A

A

B

The idea is that just importing like variables, utilities, typography and separate component styles from little API, we should be able not to write any.

C

B

And overrides not to create any variables, it's.

A

B

Something very project specific like we all do, maybe some by.

A

The way, let me go back to the to a site type scale thing, because these variations may be alike with we have a lot of documentation about its usage.

C

A

I'm gonna open those Styles now and they in the Gila project.

A

So though, we implemented looser styles as a as I know, some other components Bailey here in the type scale directory in the component, the components directory. So we will have a three type scale. Let me show you the specifications.

C

A

Happen here, no, these are performs.

A

So you can train the two to have to go back to the find a link somewhere, but okay, or probably these ones are, are better sorry.

A

So we will have three different tight scale. Basically, those types calcifying how takes like headers paragraphs and do.

B

A

Look so we have on the commutation mark the commutation, markdown compact markdown and they used interface a type scale. This is the one that would be that we should be using in the status page.

C

A

If you want to use them, they were then we implemented them in kidnap your I say we have these GL packs, tell you I mixing, we apply them and you applied apply it directly to the in the in the body of the. But if.

C

A

Applies away to the body selector, the green they'll pay in you know in the entire website.

C

A

Will first apply these styles to the lip to the body that is like gonna, say: they'd, be proud font size, the default text, color underline hate and therefore the weight, so then it will also create this are this is for headers I'm.

A

Besides that it will create a style that will adapt depending on day on the screen, size, mm-hmm.

C

A

See a demo here.

C

A

All you could see it in indeed appear re. If I go and set up break point for a smart, ass mother viewport, they.

A

So it's like, if we end up using like these styles from DWI, there's.

C

A

Can take advantage of that.

B

I was wondering, did I miss it, some come because I didn't see it be being announced somewhere on the front, end, call or never seen anyone using it. Yes,.

A

This this was released this week, so.

C

It's like something very recent.

B

Exciting work we actually very discussing this distance, it's something like that with people to do, but it's very I mean hard work and long work, and- and if you don't want to do, it is for first status wage. But in fact you were very keen on just yes.

A

Like there are many forts that are happening in parallel, so it's sometimes difficult to coordinate.

C

A

We could just like replace these here.

C

A

Press everything of an overwrite with include GL types, KY.

A

Hopefully we go here and it should work by the way. By default, we decided to set the margin of the headers to zero because we discovered that most of a of the haters in the dealer application we're using margin:0 to to the handling vertical space. So if.

C

A

Want to set the the right margins, you can go to a headlock page here, mm-hmm.

C

A

What is a margin that is using for.

C

A

The case of a h2.

A

Is going to be using the.

A

24 picture for for a top margin when.

C

A

Picks a bottom one, but we.

B

A

Then using utility classes, so we could do the same in the industry. Spanish.

C

B

A new version of my French okay.

A

Then we are already following this. Taking that way, I was like thinking that I, don't know how many like headers would be like with this same, especially where you're gonna be using. But if you feel like you.

B

C

A

Disability glasses to marching off headers you.

C

A

Just you know create like great those styles in a in a CSS.

C

A

The same way that you are doing it here right here.

B

Would be only see only two genders.

A

B

But I figured out, and it's only least in details and sets goods it I, don't have to define those stuff myself.

C

A

That's a type skill, my.

C

A

Is about the utility class library, so maybe we can like. We have utility classes for probably all of those values. The person that I was learning was previewing, how we could use utility classes. You have this header component with some CSS.

A

But then you remove that so probably even you're not doing writing that much CSS anymore.

B

There would be a third component just be very dispersants. That is too much for one for one match request and to be able split it, to least like. Basically, it's not even the least implementation in strategy index, page from which we can navigate to details which, but the list page will have its own implementation. Header will have its implementation, but did you have like some showcase for the headers that you wanted to.

A

Know, but once you you decide like which you open a different mesh request to.

C

A

It you will find all of the variables that in there, it really classes to implemented in the develop utility class library. I was like my my main point like that. You need like to create a component that is called header are implemented in we utility classes. You can do it using that theory class highway.

B

Rotates into account when implemented even implemented, header can be like sum up sis. So basically we can get almost everything from people API and we don't need these custom styles overriding. So we would need to bootstrap right because it's not included and give my opinion. Then we will import. People have a typography really key component styles and then we can just add separate styles for components.

A

That's right and- and you can like ie I, tried like to include a lot of components, a lobster component CSS from GWI, but actually it's not necessary right.

C

A

Only using two components from DW I know, as you will include like more components. You can, just like add those CSS stylesheets.

A

Right in the indication utility classes here we could even replace them, they would yield a pure utility ones. Omission.

C

A

B

We have the document it and because, like for good, strap it's easier to find and they find a few students. I mean get lab project, but for develop utility classes. Do we have a list and each one we can use? Oh no.

A

We don't have documentation, but we can hear what we try to do was to make them as explicit as possible. So if you want to go and find a departing natira classes, I can go to a spacing file and you see all of the list. So we.

C

A

To make them to make them very like easy to read, so we don't need to work on on documentation right now. Okay,.

B

A

Even I I saw the that you had to overwrite a class here, Thank You Barry, so.

C

A

Have that color defined in develop, you are, you know, you love your utility class. You.

C

A

What I say the value of this one.

C

A

So this is so what I usually do in my workflow is that I go and see what is a very soft color here like.

C

A

The color- and this is great 700, so I could go here and just replace that class with a Gila, pure utility class. You.

C

B

It's green suggest.

A

So yes, those are my point. So do you have any comment or.

B

That's very helpful. It would be good to know it before we started because we're very discussing it. It would be nice to have this library, but we didn't know that it actually exists. And what do you think if I create dementia quest from this basic list and will replace my style space, gitlab, gillip utilities, and if you don't assign you wait.

A

B

You tell me versus there is something that I have missed. It I'm.

A

Gonna, send you the content of the develop UI file that I created, like all of the CSS, that you need. That is like a subset. So in that way you don't have like to go through like picking exactly which one you love you I. Do you need again.

A

Well, thank you. A lineThe yeah.

B

Thank you. Thank you, a lot indica for doing Z's, for helping and for reviewing our way more essentially.

A

Well have a weekend you.

B

Have a nice day and a nice weekend.