Add wrapper mixin about breakpoint HOT 11 CLOSED

Yes, I do like my work there myself :P

I think we need to dig a little bit deeper on the fallback support because there are some people who do wrapper classes and some who would prefer a separate IE stylesheet and we need a way to accommodate both/not force one.

Take a look at the IE branch I made for how I was implementing the IE stylesheet version. Maybe we add both as an option? I also think the semantics are better served like the following:

@mixin breakpoint($breakpoint-variable, $media, $no-query-wrapper-class:false) {
  @if $no-query-wrapper-class != false {
    .#{$no-query-wrapper-class} & {
      @content;
    }  
  }
  ... the rest of breakpoint ...
}

I'm a big proponent of calling all fallback stuff "no query" to drill home the fact that these changes should only target things w/no query support, not "ie", and that wrapper classes don't wrap the queries and are meant for when there is no query support.

from breakpoint.

Also like calling it 'no-query'.

I'm thinking of setting a keyword to the wrapper to accomodate that use.

@mixin breakpoint($breakpoint-variable, $media, $no-query-wrapper-class:false) {
  @if $no-query-wrapper-class != false {
    @if $no-query-wrapper-class == 'no-wrapper' {
      @content;
    }
    @else {
      .#{$no-query-wrapper-class} & {
        @content;
      }  
    }
  }
  ... the rest of breakpoint ...
}

from breakpoint.

I like where this is going. However I am afraid that, with this method, I would end up with one huge stylesheet that serves both HTML5 browsers and old IE. Is there anyway this method can incorporate the use of rendering IE/wrapper styles in an external stylesheet?

from breakpoint.

Have no fear, this is still under obstruction and I wouldn't dare leave your use case out :p

~ Sam Richard
http://snug.ug

On Thursday, August 9, 2012 at 11:27 AM, Oliver Joseph Ash wrote:

I like where this is going. However I am afraid that, with this method, I would end up with one huge stylesheet that serves both HTML5 browsers and old IE. Is there anyway this method can incorporate the use of rendering IE/wrapper styles in an external stylesheet (https://github.com/canarymason/breakpoint/pull/8)?

—
Reply to this email directly or view it on GitHub (https://github.com/canarymason/breakpoint/issues/12#issuecomment-7617287).

from breakpoint.

I think I might prefer that everything is in one stylesheet since I can't assume that lack of media query support == IE

from breakpoint.

We're designing this as a "no query" solution as opposed to an "ie" solution, but we need to account for all use cases.

~ Sam Richard
http://snug.ug

On Friday, August 10, 2012 at 7:25 PM, Paul Young wrote:

I think I might prefer that everything is in one stylesheet since I can't assume that lack of media query support == IE

—
Reply to this email directly or view it on GitHub (https://github.com/canarymason/breakpoint/issues/12#issuecomment-7661475).

from breakpoint.

So I guess here's the most pressing question I have.

There appears to be two distinct use cases, one where a user would want to print out a separate no-query only stylesheet, and one where a user would like to wrap no-query styles in a wrapper class in the same stylesheet. My question is, is there real third usecase where a user would like to print out a separate no-query stylesheet with wrapped classes?

from breakpoint.

If you'd like to test this feature, check out this branch. I know I called the branch IE, deal with it, it's the no-query branch.

Basically, the code should cover all three usecases, adds one new variable input to the Breakpoint mixin, and adds two breakpoint flags.

Both of the new breakpoint flags, $breakpoint-no-queries and $breakpoint-no-query-wrappers default to false, toggling them to true activates them. For the purposes of clarity in the preceding code samples, I'm including both flags even though the false flags are not explicitly needed.

Wrapping Selector Fallback, Same Stylesheet

// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: true;

#foo {
  background: red;
  @include breakpoint(567px, $no-query: '.no-mqs') {
    background: green;
  }
}

/* style.css */
#foo {
  background: red;
}

.no-mqs #foo {
  background: green;
}

@media (min-width: 567px) {
  #foo {
    background: green;
  }
}

No Wrapping Selector, Separate Output

// _layout.scss
#foo {
  background: red;
  @include breakpoint(567px, $no-query: true) {
    background: green;
  }
}

// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: false;

@import 'layout';

// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-wrappers: false;

@import 'layout';

/* style.css */
#foo {
  background: red;
}

@media (min-width: 567px) {
  #foo {
    background: green;
  }
}

/* no-mq.css */
#foo {
  background: red;
  background: green;
}

Wrapping Selector, Separate Output

// _layout.scss
#foo {
  background: red;
  @include breakpoint(567px, $no-query: '.no-mq') {
    background: green;
  }
}

// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: false;

@import 'layout';

// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-wrappers: true;

@import 'layout';

/* style.css */
#foo {
  background: red;
}

@media (min-width: 567px) {
  #foo {
    background: green;
  }
}

/* no-mq.css */
.no-mq #foo {
  background: red;
  background: green;
}

Thoughts?

from breakpoint.

Perfect.

Oliver

On 11 Aug 2012, at 19:30, Snugug [email protected] wrote:

If you'd like to test this feature, check out this branch. I know I called the branch IE, deal with it, it's the no-query branch.

Basically, the code should cover all three usecases, adds one new variable input to the Breakpoint mixin, and adds two breakpoint flags.

Both of the new breakpoint flags, $breakpoint-no-queries and $breakpoint-no-query-wrappers default to false, toggling them to true activates them. For the purposes of clarity in the preceding code samples, I'm including both flags even though the false flags are not explicitly needed.

Wrapping Selector Fallback, Same Stylesheet

// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: true;

#foo {
background: red;
@include breakpoint(567px, $no-query: '.no-mqs') {
background: green;
}
}
/* style.css */
#foo {
background: red;
}

.no-mqs #foo {
background: green;
}

@media (min-width: 567px) {
#foo {
background: green;
}
}
No Wrapper Class, Separate Output

// _layout.scss
#foo {
background: red;
@include breakpoint(567px, $no-query: true) {
background: green;
}
}
// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: false;

@import 'layout';
// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-wrappers: false;

@import 'layout';
/* style.css */
#foo {
background: red;
}

@media (min-width: 567px) {
#foo {
background: green;
}
}
#foo {
background: red;
background: green;
}
Wrapping Selector, Separate Output

// _layout.scss
#foo {
background: red;
@include breakpoint(567px, $no-query: '.no-mq') {
background: green;
}
}
// style.scss
$breakpoint-no-queries: false;
$breakpoint-no-query-wrappers: false;

@import 'layout';
// no-mq.scss
$breakpoint-no-queries: true;
$breakpoint-no-query-wrappers: true;

@import 'layout';
/* style.css */
#foo {
background: red;
}

@media (min-width: 567px) {
#foo {
background: green;
}
}
.no-mq #foo {
background: red;
background: green;
}
Thoughts?

—
Reply to this email directly or view it on GitHub.

from breakpoint.

I haven't tested it yet, but I like this way this looks. Let's plan to move this into master once I do.

from breakpoint.

this is done, and in master

from breakpoint.