search

fewagency / boilerplate-pattern-library

A boilerplate for a PHP project with a macropiche pattern-library
1 stars 1 forks source link

Add viewport-relative responsive mixin #19

Open bjuppa opened 7 years ago

bjuppa commented 7 years ago

This example can be used to create a responsive mixin that takes a viewport-based value along with a min and max for the attribute, then it calculates the breakpoints automatically: https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/

The mixins we already have in boilerplate-pattern-library/resources/assets/sass/modules/_responsive-locks.scss are based on fixed media-query min and max values along with min and max for the attribute.

bjuppa commented 7 years ago

It'd be interesting to extend this to handle vmin and vmax too... Can one use or-logic in media-queries?

bjuppa commented 7 years ago

Yes, or-logic can be used in media-queries through comma-separation: https://css-tricks.com/logic-in-media-queries/