Additional (custom) screen sizes in addition to existing mobile/tablet/desktop

[e-dantes]

Hello,

Is there any way to create custom screen sizes in addition to existing mobile/tablet/desktop with preserving the same functionality? For example: media query for screens bigger than 1400px with name 'big' and all necessary classes like "big-grid-100", "hide-on-big" etc. Would really appreciate any help on this.

[nathansmith]

Yes, using Sass you can generate your own CSS files, with the words of your choosing…

http://unsemantic.com/sass-documentation#15-roll-your-own

[e-dantes]

Hello Nathan,

Thanks a lot pointing me to right place :) And for the great library you did!

So, as soon as I understand, to get what I need I should add ----------- @media screen and (min-width: 1400px) { @include unsemantic-grid-placeholders(big); @include unsemantic-grid-scoped(big);

}

to _unsemantic-grid-responsive-tablet.scss and recompile it, right?

Nathan Smith wrote:

Yes, using Sass you can generate your own CSS files, with the words of your choosing…

http://unsemantic.com/sass-documentation#15-roll-your-own

---

Reply to this email directly or view it on GitHub: https://github.com/nathansmith/unsemantic/issues/89#issuecomment-182916931

[nathansmith]

Well, you'd need to cap off the "desktop" size with a maximum.

Also, make sure that the global (not within @media query) .big- classes get picked up.

I just realized I should make unsemantic-grid-base-tablet just be…

unsemantic-grid-base(mobile, tablet, desktop)

Which would allow you to do…

unsemantic-grid-base(mobile, tablet, desktop, big)

But, I'll have to make that change at a later date.

For now, something like this should work…

$media-mobile-max: 767px !default;
$media-tablet-min: 768px !default;
$media-tablet-max: 1024px !default;
$media-desktop-min: 1025px !default;
$media-desktop-max: 1399px !default;
$media-big-min: 1400px !default;

@import "unsemantic-vars";
@import "unsemantic-ie-snap";

@include unsemantic-grid-placeholders;
@include unsemantic-grid-base-tablet;

// ======================
// SHARED "GLOBAL" SCOPE.
// ======================

// For 5 through 100 percent.
@for $i from 1 through 20 {
  $num: $i * 5;

  .big-grid-#{$num} {
    @extend %grid-columns-all;
  }
}

// For one-third and two-thirds.
@for $i from 1 through 2 {
  $num: $i * 33;

  .big-grid-#{$num} {
    @extend %grid-columns-all;
  }
}

// ==================
// MEDIA QUERY SCOPE.
// ==================

@media (max-width: $media-mobile-max) {
  @include unsemantic-grid-placeholders(mobile);
  @include unsemantic-grid-scoped(mobile);
}

@media (min-width: $media-tablet-min) and (max-width: $media-tablet-max) {
  @include unsemantic-grid-placeholders(tablet);
  @include unsemantic-grid-scoped(tablet);
}

@media (min-width: $media-desktop-min) and (max-width: $media-desktop-max) {
  @include unsemantic-grid-placeholders(desktop);
  @include unsemantic-grid-scoped(desktop);
}

@media (min-width: $media-big-min) {
  @include unsemantic-grid-placeholders(big);
  @include unsemantic-grid-scoped(big);
}

[e-dantes]

Ok, I got the idea! Thanks again for your attention.

Nathan Smith wrote:

Well, you'd also need to cap off the "desktop" size with a maximum.

And, also need to make sure that the global (not within @media query) .big- classes get picked up.

I just realized I should make unsemantic-grid-base-tablet just be…

unsemantic-grid-base(mobile, tablet, desktop)

Which would allow you to do…

unsemantic-grid-base(mobile, tablet, desktop, big)

But, I'll have to make that change at a later date.

For now, something like this should work…

$media-mobile-max: 767px !default;
$media-tablet-min: 768px !default;
$media-tablet-max: 1024px !default;
$media-desktop-min: 1025px !default;
$media-desktop-max: 1399px !default;
$media-big-min: 1400px !default;

@import "unsemantic-vars";
@import "unsemantic-ie-snap";

@include unsemantic-grid-placeholders;
@include unsemantic-grid-base-tablet;

// ======================
// SHARED "GLOBAL" SCOPE.
// ======================

// For 5 through 100 percent.
@for $i from 1 through 20 {
  $num: $i * 5;

  .big-grid-#{$num} {
    @extend %grid-columns-all;
  }
}

// For one-third and two-thirds.
@for $i from 1 through 2 {
  $num: $i * 33;

  .big-grid-#{$num} {
    @extend %grid-columns-all;
  }
}

// ==================
// MEDIA QUERY SCOPE.
// ==================

@media (max-width: $media-mobile-max) {
  @include unsemantic-grid-placeholders(mobile);
  @include unsemantic-grid-scoped(mobile);
}

@media (min-width: $media-tablet-min) and (max-width: $media-tablet-max) {
  @include unsemantic-grid-placeholders(tablet);
  @include unsemantic-grid-scoped(tablet);
}

@media (min-width: $media-desktop-min) and (max-width: $media-desktop-max) {
  @include unsemantic-grid-placeholders(desktop);
  @include unsemantic-grid-scoped(desktop);
}

@media (min-width: $media-big-min) {
  @include unsemantic-grid-placeholders(big);
  @include unsemantic-grid-scoped(big);
}

---

Reply to this email directly or view it on GitHub: https://github.com/nathansmith/unsemantic/issues/89#issuecomment-182945920

[nathansmith]

@e-dantes Okay, it should now be possible to do…

@include unsemantic-grid-base(mobile, tablet, desktop, big);

^ Instead of that "shared 'global' scope" loop that I showed you.

I've killed off the unsemantic-grid-base-tablet and unified it all into unsemantic-grid-base which now takes arguments.

https://github.com/nathansmith/unsemantic/blob/master/assets/sass/partials/_unsemantic-vars.scss#L350-L419

:smile:

[macfire]

Added example to wiki:

• 4 breakpoints (mobile, tablet, laptop, desktop)