Spectre: Col size small, medium, large

[mgohin]

Hi,

can I choose col- depending on screen size like in Bootstrap or Foundation ?

I don't want the same % of width on mobile and desktop.

[picturepan2]

I am doing this right now in a new branch. 👍

[mgohin]

Holy crap, that's fast ! 👍

[mgohin]

Any chance to get an option like small-hide small-show ?
Same for medium, large ?

I'll allow us to show/hide thing depending on screen size ?

[picturepan2]

There are some hide utilities in src/utilities.less. Still working on more responsive things.

[mgohin]

will check that

[picturepan2]

Please check feature/add-responsive-grid branch. I updated the doc as well. Thanks.

Though I add more col-xs-, col-sm- and col-md- options, another responsive thing form-horizontal is broken. I will fix it.

[mgohin]

seems to be working well ! Will you merge it soon ? Can't tell npm to use a branch I guess ^^

[mgohin]

About the hide thing, in utilities there is nothing about hide/show in xs, sm (etc)

[mgohin]

looks like I didn't check enough :

@media screen and (max-width: 480px) {
.hide-xs {
    display: none !important;
    }
}

[mgohin]

But missing same thing for show-xs, like :

[class^="show-"], [class*=" show-"] {
  display: none !important;
}

@media screen and (max-width: 480px) {
  .show-xs {
    display: inherit !important;
  }
}
@media screen and (max-width: 600px) {
  .show-sm {
    display: inherit !important;
  }
}
@media screen and (max-width: 840px) {
  .show-md {
    display: inherit !important;
  }
}
@media screen and (max-width: 960px) {
  .show-lg {
    display: inherit !important;
  }
}
@media screen and (max-width: 1280px) {
  .show-xl {
    display: inherit !important;
  }
}

[picturepan2]

Sorry, it is in src/layout.less.

[picturepan2]

Merged. https://github.com/picturepan2/spectre/pull/23

[picturepan2]

@mgohin Sorry, no show- related classes yet. Still considering.

[mgohin]

It's very usefull to display something elsewhere depending on screen size