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

Improvement Suggestion #81

Closed
ascendantofrain opened this Issue Mar 2, 2015 · 5 comments

Comments

Projects
None yet
6 participants
@ascendantofrain
Contributor

ascendantofrain commented Mar 2, 2015

Just a little something I made for my own project using this framework.

I use SASS with my application and using this little snippet makes adjusting grids MUCH easier.

.grid-stack-item {

    $gridstack-columns: 12;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}
@troolee

This comment has been minimized.

Show comment
Hide comment
@troolee

troolee Mar 2, 2015

Member

I've update README with your snippet. Thank you.

Member

troolee commented Mar 2, 2015

I've update README with your snippet. Thank you.

@troolee troolee closed this Mar 2, 2015

@abologna-r7

This comment has been minimized.

Show comment
Hide comment
@abologna-r7

abologna-r7 Apr 28, 2015

Late to the conversation but you might also want to have the width variable, either in percentage or pixels, since being responsive and fluid not always works hand to hand... One thing is to have a responsive container, and another one is to have a responsive widget so sometimes having pixel dimensions is not a bad idea.

So if you put that logic inside a media query you can have different pixel/percentage based widgets sizes.

$gridstack-columns: 12;
$resolution: 1440px;

@media (min-width: 1440px) {
   .container {
      .grid-stack {
         .grid-stack-item {
            position: absolute !important;

            @for $i from 1 through $gridstack-columns {
               &[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
               &[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
            }
         }
      }
   }
}

abologna-r7 commented Apr 28, 2015

Late to the conversation but you might also want to have the width variable, either in percentage or pixels, since being responsive and fluid not always works hand to hand... One thing is to have a responsive container, and another one is to have a responsive widget so sometimes having pixel dimensions is not a bad idea.

So if you put that logic inside a media query you can have different pixel/percentage based widgets sizes.

$gridstack-columns: 12;
$resolution: 1440px;

@media (min-width: 1440px) {
   .container {
      .grid-stack {
         .grid-stack-item {
            position: absolute !important;

            @for $i from 1 through $gridstack-columns {
               &[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
               &[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
            }
         }
      }
   }
}
@cspeer

This comment has been minimized.

Show comment
Hide comment
@cspeer

cspeer Dec 9, 2015

Here is a less css version:

@columns: 6;
.gs-item(@n) when (@n > 0) {
  .gs-item(@n - 1);

  &[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
  &[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
  &[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
  &[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}

.grid-stack-item {
  .gs-item(@columns);
}

cspeer commented Dec 9, 2015

Here is a less css version:

@columns: 6;
.gs-item(@n) when (@n > 0) {
  .gs-item(@n - 1);

  &[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
  &[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
  &[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
  &[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}

.grid-stack-item {
  .gs-item(@columns);
}
@mandys

This comment has been minimized.

Show comment
Hide comment
@mandys

mandys May 15, 2017

@ascendantofrain @cspeer @troolee @radiolips does this still work ?
i made columns as 36, ran sass, used it in the code, the widths now use %s based on 36 columns, but drag/drop has undesired experience. I am unable to drag and drop in a 36 column grid, it keeps moving here and there. Did we need js changes as well ? Doesn't look like...

mandys commented May 15, 2017

@ascendantofrain @cspeer @troolee @radiolips does this still work ?
i made columns as 36, ran sass, used it in the code, the widths now use %s based on 36 columns, but drag/drop has undesired experience. I am unable to drag and drop in a 36 column grid, it keeps moving here and there. Did we need js changes as well ? Doesn't look like...

@mrmowji

This comment has been minimized.

Show comment
Hide comment
@mrmowji

mrmowji Feb 10, 2018

@mandys @ascendantofrain I think it's because of core gridstack.css styles. You must override them:

.grid-stack > .grid-stack-item {

    $gridstack-columns: 200;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

But I couldn't solve the overlapping items problem yet.

mrmowji commented Feb 10, 2018

@mandys @ascendantofrain I think it's because of core gridstack.css styles. You must override them:

.grid-stack > .grid-stack-item {

    $gridstack-columns: 200;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

But I couldn't solve the overlapping items problem yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment