Media queries via (s)CSS

[kurtommy]

Feature Request

What is the desired behavior?

Use media query via mixin in CSS

What is the use-case or motivation for the desired behavior?

From what i've read in the DOC if i want a style eg a button with different background color based on breakpoints i can only do something like

<button [ngClass.xs]="xs-button" [ngClass.xs]="md-button">HI!</button>

and in CSS

.xs-button {
  background-color: red;
}
.md-button {
  background-color: red;
}

This surely works but leads a lot of pollution in the markup, could you also export a mixins to do the below?

With CSS media query:

<button>HI!</button>

button {
  background-color: yellow;
  @include media-breakpoint(xs) {
     background-color: red;
   }
  @include media-breakpoint(md) {
    background-color: blue;
   }
}

I can of course crate a set of mixins to do the above but would be great if this would exposed by flex-layout matching configured breakpoints..

Thanks

[CaerusKaru]

So, to clarify, what you're asking for is a Flex Layout CSS exported mixin that takes a breakpoint and returns the media query?

[kurtommy]

Exactly!!!
I've added the lib to an A6 project and i'm asking to our web guys to try that and they can only do something like

<button [ngClass.xs]="class1" [ngClass.sm]="class2" [ngClass.gt-md]="class3" [ngClass.xs]="class3">HI!</button>

Which generate a bit of noise in the markup! And some other things are not doable with this approach eg is style an html element or class (like i've written above) with media queries

button {
  background-color: yellow;
  @include media-breakpoint(xs) {
     background-color: red;
   }
  @include media-breakpoint(md) {
    background-color: blue;
   }
}

would be great of you could expose a set of mixin functions like this one @include media-breakpoint(xs), so this lib will be very powerfull

@CaerusKaru How this is addressed now this requirement from people that are using flex-layout? Are they creating a custom set of media query mixin?

[kurtommy]

@CaerusKaru do you think that this is feasible?

[CaerusKaru]

@kurtommy Definitely feasible, just needs design and sign-off from @ThomasBurleson. It might come down to publishing the mixin on the docs to avoid increasing the bundle size for everyone else.

[kurtommy]

@CaerusKaru @ThomasBurleson I'm simply asking for something like this
https://www.npmjs.com/package/sass-mq
in the meantime i think that we could use that lib, matching the breakpoints

[CaerusKaru]

We're going to move ahead with this and try to get it in by the next release (likely early next year).

[ThomasBurleson]

@CaerusKaru means sometime in January '19. ;-)

[CaerusKaru]

First pass is here: #940

[CaerusKaru]

This feature will be included in today's beta 22 release. To use, simply do the following in your SASS files:

@import '~@angular/flex-layout/mq';

// This works for all Flex Layout breakpoints
@include layout-bp(xs) {
	background-color: red;
}

[kurtommy]

Yeah! in the meantime we've switched to bootstrap for gird and material components. we'll evaluate this when stable for new projects!

thanks

[alexfung888]

This feature will be included in today's beta 22 release. To use, simply do the following in your SASS files:

@import '~@angular/flex-layout/mq';

// This works for all Flex Layout breakpoints
@include layout-bp(xs) {
	background-color: red;
}

Does the feature support custom breakpoints, whose boundaries are only supplied at run time? Or are they hard coded to use the 600px etc as boundaries?

[CaerusKaru]

It’s hardcoded right now, but we can workshop adding support for custom bps in a future release depending on interest and design.

[fabiocarneiro]

@CaerusKaru Are the map keys correctly defined for gt and lt? I'm assuming they should be lt- and gt-, but they are the same as the standard breakpoints.

flex-layout/src/lib/core/sass/_layout-bp.scss

Lines 31 to 46 in d9c520f

	$overlapping-gt: (
	xs: 600px,
	sm: 960px,
	md: 1280px,
	lg: 1920px,
	) !default;
	// Overlapping breakpoints that are less than defined
	// Material Design breakpoints
	// @type map
	$overlapping-lt: (
	sm: 599px,
	md: 959px,
	lg: 1279px,
	xl: 1919px,
	) !default;

[CaerusKaru]

@fabiocarneiro I think you’re right, the keys need to be updated, good catch. I’ll put in a PR for that shortly.

[CaerusKaru]

@fabiocarneiro see #987

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}