Skip to content

Made Grid-a-licious more responsive - #4

Open
mjcampagna wants to merge 11 commits into
suprb:masterfrom
mjcampagna:master
Open

Made Grid-a-licious more responsive#4
mjcampagna wants to merge 11 commits into
suprb:masterfrom
mjcampagna:master

Conversation

@mjcampagna

Copy link
Copy Markdown

I made a few changes to the script to make it more responsive by eliminating the JS 'width' and 'gutter' options, and fetching the information dynamically from CSS. Works with media queries too.

CHANGES:
- removed 'gutter' and 'width' options
- script now fetches outer-width and margins from CSS and calculates grid dynamically.
- accepts media queries.
- example styling:

 .item {
    float: left;
    margin: 0 8px 24px;
    padding: 8px;
    width: 250px;
    }

@media only screen and (max-width: 600px) {
    .item {
        width: 150px;
        }
    }

This update to the script also resolves the other issues I've filed, btw.

@lukasoppermann

Copy link
Copy Markdown

This is pretty cool. Is this going to be pulled anytime? Otherwise, could you maybe revise it to work with the version 3.0.1?

globeFrEak added a commit to CWCLAN/Grid-A-Licious that referenced this pull request Dec 14, 2014
suprb#4

I made a few changes to the script to make it more responsive by eliminating the JS 'width' and 'gutter' options, and fetching the information dynamically from CSS. Works with media queries too.

CHANGES:
- removed 'gutter' and 'width' options
- script now fetches outer-width and margins from CSS and calculates grid dynamically.
- accepts media queries.
- example styling:

 .item {
    float: left;
    margin: 0 8px 24px;
    padding: 8px;
    width: 250px;
    }

@media only screen and (max-width: 600px) {
    .item {
        width: 150px;
        }
    }
This update to the script also resolves the other issues I've filed, btw.
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.

2 participants