Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support responsive grid #12

Merged
merged 4 commits into from
Aug 30, 2022
Merged

feat: support responsive grid #12

merged 4 commits into from
Aug 30, 2022

Conversation

thearnica
Copy link
Collaborator

@thearnica thearnica commented Aug 29, 2022

Was looking at tremendous work happening at #11 and probably there are too many changes.

Let's keep in mind why we want responsive grid - only because the target application needs it.

So, let's ask yourself a question - and how the target application gonna do it? How it will provide different grid settings for different media points?

The answer is "somehow", and we want to tap-into that somehow. Be a part of it, not replicate in any way.


Long story short - embrace css variables and let application "CSS configuration" let us know what to do.

Example.parameters = {
    grid: {
        columns: 'var(--columns)',
        gutter: 'var(--gutter)',
        gap: 'var(--gap)',
    }
}

PS: gutters and gap already works this way. Now columns can use css var.

fixes #5
closes #11

@thearnica thearnica requested a review from maraisr August 29, 2022 11:17
src/components/ui.tsx Outdated Show resolved Hide resolved
@maraisr maraisr merged commit 540c793 into main Aug 30, 2022
@maraisr maraisr deleted the responsive-mode branch August 30, 2022 03:49
@maraisr maraisr restored the responsive-mode branch September 20, 2022 06:42
@maraisr maraisr deleted the responsive-mode branch September 20, 2022 06:43
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.

Feature request: Responsive grid
2 participants