Skip to content
This repository has been archived by the owner on Jan 24, 2024. It is now read-only.

Add fluid spacing scale #102

Merged
merged 2 commits into from Aug 28, 2023
Merged

Add fluid spacing scale #102

merged 2 commits into from Aug 28, 2023

Conversation

richtabor
Copy link
Member

@richtabor richtabor commented Aug 27, 2023

Description

Add a consistent fluid spacing scale that we can start leveraging in patterns, instead of using arbitrary values. This proposal uses the Fibonacci sequence.

We can continue to iterate and refine the values, but I think it'd be good to have a consistent set to start working from.

Testing Instructions

  1. Activate the theme.
  2. Add spacer block.
  3. Adjust the height to see the spacing presets.
  4. View on mobile to see the fluidity.

Screenshots

Desktop:
CleanShot 2023-08-27 at 10 56 52

Mobile:
CleanShot 2023-08-27 at 11 04 14

Example of this fluid spacing expressed in a pattern, with 40 as the outer padding:
CleanShot 2023-08-28 at 09 44 47
CleanShot 2023-08-28 at 09 44 58

theme.json Outdated Show resolved Hide resolved
Copy link
Collaborator

@MaggieCabrera MaggieCabrera left a comment

Choose a reason for hiding this comment

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

Love this, thank you!

@MaggieCabrera MaggieCabrera merged commit 8522219 into trunk Aug 28, 2023
2 checks passed
@richtabor richtabor deleted the try/fluid-spacing-sizes branch August 29, 2023 00:14
@beafialho
Copy link

These presets look good!

I'm seeing a lot of spacing that was not supposed to be there, particularly in stack blocks in the home template. This may have happened everywhere else. It seems that it may have inheriting one of the presets, but one that's way too high? Here's what I mean, comparing it to a demo site I created with the intended spacings:

spacings.mp4

@richtabor
Copy link
Member Author

Yea, we need to adjust the templates to use the system.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants