Skip to content

Conversation

@ttkapostol
Copy link

Hello!

We have tried to fix the issue #934 as part of an Open Source Event in Madrid. We have incorporated all repeated measurements in variables. The variables were created according to this table:

Declaration of common measurements for margin and padding
$m-0: 0rem
$m-1: 0.5rem
$m-2: 1rem
$m-3: 1.5rem
$m-4: 2rem
$m-5: 2.5rem
$m-6: 3rem
$m-7: 3.5rem
$m-8: 4rem
$m-9: 4.5rem
$m-10: 5rem
$m-11: 5.5rem
$m-12: 6rem

(Padding is obviously the same but substituting m for p.)

We hope to hear from you soon and collaborate more with you in the future.

@ttkapostol
Copy link
Author

We have tried fixing the following errors:

10:49:28 AM: 12:12 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
10:49:28 AM: src/css/components/_c-featured.scss
10:49:28 AM: 17:12 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
10:49:28 AM: src/css/components/_c-form.scss
10:49:28 AM: 70:13 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
10:49:28 AM: src/css/components/_c-linkroll.scss
10:49:28 AM: 13:12 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
10:49:28 AM: src/css/components/_c-recommended-reading.scss
10:49:28 AM: 34:12 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
10:49:28 AM: src/css/vendor/_v-toc.scss
10:49:28 AM: 143:13 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after
10:49:28 AM: 144:63 ✖ Expected newline after "," in a multi-line list value-list-comma-newline-after
10:49:28 AM: [08:49:28] 'lintStyles' errored after 4.74 s
10:49:28 AM: [08:49:28] Error in plugin "gulp-stylelint"

And leave formatting as you had it previously. However, they still appear in our terminal.

Plus, we didn't do the npm run publish because we didn´t want to deploy. We were just tring to create unified variables for margins and paddings.

Hope this helps you!

@davatron5000
Copy link
Contributor

@ttkapostol Thanks for the work on this. Those errors are minor but are preventing the site from building a preview. I think it's maybe an issue with character encodings? Or a formatter gone wild.

I'll have a fix for this in a bit that hopefully let's the site build. Are you on Windows?

@ttkapostol
Copy link
Author

@ttkapostol Thanks for the work on this. Those errors are minor but are preventing the site from building a preview. I think it's maybe an issue with character encodings? Or a formatter gone wild.

I'll have a fix for this in a bit that hopefully let's the site build. Are you on Windows?

Thank you very much @davatron5000 !

@SaptakS
Copy link
Member

SaptakS commented Jun 21, 2023

@davatron5000 are you going to review this? Else I am happy to review it some time around end of this week.

@davatron5000
Copy link
Contributor

davatron5000 commented Jul 4, 2023

@SaptakS If you don't mind taking a look. I'll try to review it as well. Sorry this has taken so long.

So far it looks good to me. Pretty straight forward.

@davatron5000 davatron5000 requested a review from SaptakS July 4, 2023 00:59
@SaptakS
Copy link
Member

SaptakS commented Jul 4, 2023

Will do.

@SaptakS SaptakS self-assigned this Aug 10, 2023
Copy link
Member

@SaptakS SaptakS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies for the delay in reviewing. This PR looks great! I have left few inline comments on lines I think were maybe mistakenly left from a previous iteration and hasn't been updated? Once those are addressed, I think this PR should be good to be merged.

@include preserve-list-semantics();

margin-top: 1rem;
margin-top: $m-3;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be $m-2

// Text-level formatting
li {
margin-top: 0.5rem;
margin-top: $m-2;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be $m-1

.c-homepage-card__description {
font-family: $font-family-secondary;
margin-top: 1rem;
margin-top: $m-3;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be $m-2

@include var(color, secondary-link-text);
font-family: $font-family-secondary;
margin-top: 1rem;
margin-top: $m-3;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be $m-2



.c-linkroll__category--featured {
padding-top: 1rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not update this?

}

.u-spacing-left-longest {
margin-left: 3rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be $m-6

}

.u-spacing-bottom-long {
margin-bottom: 1.5rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be $m-3?

@SaptakS
Copy link
Member

SaptakS commented Aug 21, 2023

Ideally, I would also want to reduce the number of variables and maybe normalize some of the spacing to avoid having to need so many different variables

$m-9: 4.5rem;
$m-10: 5rem;
$m-11: 5.5rem;
$m-12: 6rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was also thinking if we could have something more like:

$m-0: 0;
$m-xxs: 0.5rem;
$m-xs: 1rem;
$m-s: 1.5rem;
$m-m: 2rem;
$m-l: 3rem;
$m-xl: 4rem;
$m-xl: 6rem;

Since it seems like the rest of the variables are never used and changing the naming of the variables removes the need to have every 0.5 step measure defined. @ErriGarcia thoughts?

@davatron5000 davatron5000 linked an issue Sep 3, 2023 that may be closed by this pull request
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Audit redesign spacing sizes and turn them into variables

5 participants