Issue#934 #1565

ttkapostol · 2023-06-20T08:48:53Z

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 · 2023-06-20T08:54:29Z

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 · 2023-06-20T17:33:27Z

@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 · 2023-06-21T05:34:06Z

@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 · 2023-06-21T08:22:04Z

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

davatron5000 · 2023-07-04T00:58:25Z

@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.

SaptakS · 2023-07-04T07:16:21Z

Will do.

SaptakS

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.

SaptakS · 2023-08-21T14:59:15Z

src/css/components/_c-footer.scss

 .c-footer__list {
 	@include preserve-list-semantics();

-	margin-top: 1rem;
+	margin-top: $m-3;


I think this should be $m-2

SaptakS · 2023-08-21T14:59:24Z

src/css/components/_c-footer.scss

 	margin-left: 0.4rem;

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


I think this should be $m-1

SaptakS · 2023-08-21T14:59:55Z

src/css/components/_c-homepage-card.scss

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


I think this should be $m-2

SaptakS · 2023-08-21T15:00:02Z

src/css/components/_c-homepage-card.scss

@@ -74,7 +66,7 @@
 	@include var(border-color, secondary-link-accent);
 	@include var(color, secondary-link-text);
 	font-family: $font-family-secondary;
-	margin-top: 1rem;
+	margin-top: $m-3;


I think this should be $m-2

SaptakS · 2023-08-21T15:00:22Z

src/css/components/_c-linkroll.scss

 .c-linkroll__category {
 	@include var(color, card-meta-text);
 }

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


Why not update this?

SaptakS · 2023-08-21T15:02:55Z

src/css/utilities/_spacing.scss

 }

 .u-spacing-left-longer {
-	margin-left: 2rem;
+	margin-left: $m-4;
 }

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


I think this should be $m-6

SaptakS · 2023-08-21T15:03:07Z

src/css/utilities/_spacing.scss

 }

 .u-spacing-bottom-short {
 	margin-bottom: 0.75rem;
 }

 .u-spacing-bottom-medium {
-	margin-bottom: 1rem;
+	margin-bottom: $m-2;
 }

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


I think this should be $m-3?

SaptakS · 2023-08-21T15:10:14Z

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

SaptakS · 2023-08-21T15:15:43Z

src/css/utilities/_variables.scss

+$m-9: 4.5rem;
+$m-10: 5rem;
+$m-11: 5.5rem;
+$m-12: 6rem;


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?

ErriGarcia and others added 6 commits June 19, 2023 11:39

fix: issue#934

29d10fe

feat: incorporate variables into existing spacing utility classes

285d716

feat: import variables into screen sheet

90eb6df

feat: change import order of variables

93bd223

feat: fix declaration of variables for margin and padding

035064d

fix: formatting

2932a94

fix: fix whitespace linting errors

7c5685b

davatron5000 requested a review from SaptakS July 4, 2023 00:59

SaptakS self-assigned this Aug 10, 2023

SaptakS requested changes Aug 21, 2023

View reviewed changes

SaptakS reviewed Aug 21, 2023

View reviewed changes

davatron5000 linked an issue Sep 3, 2023 that may be closed by this pull request

Audit redesign spacing sizes and turn them into variables #934

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue#934 #1565

Issue#934 #1565

ttkapostol commented Jun 20, 2023

ttkapostol commented Jun 20, 2023

davatron5000 commented Jun 20, 2023

ttkapostol commented Jun 21, 2023

SaptakS commented Jun 21, 2023

davatron5000 commented Jul 4, 2023 •

edited

Loading

SaptakS commented Jul 4, 2023

SaptakS left a comment

SaptakS Aug 21, 2023

SaptakS Aug 21, 2023

SaptakS Aug 21, 2023

SaptakS Aug 21, 2023

SaptakS Aug 21, 2023

SaptakS Aug 21, 2023

SaptakS Aug 21, 2023

SaptakS commented Aug 21, 2023

SaptakS Aug 21, 2023

Issue#934 #1565

Are you sure you want to change the base?

Issue#934 #1565

Conversation

ttkapostol commented Jun 20, 2023

ttkapostol commented Jun 20, 2023

davatron5000 commented Jun 20, 2023

ttkapostol commented Jun 21, 2023

SaptakS commented Jun 21, 2023

davatron5000 commented Jul 4, 2023 • edited Loading

SaptakS commented Jul 4, 2023

SaptakS left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SaptakS commented Aug 21, 2023

Choose a reason for hiding this comment

davatron5000 commented Jul 4, 2023 •

edited

Loading