js utility for applying the grid's breakpoints to modules

Financial-Times / o-grid

Responsive grid system

http://registry.origami.ft.com/components/o-grid

93 stars 14 forks source link

js utility for applying the grid's breakpoints to modules #38

Closed wheresrhys closed 9 years ago

wheresrhys commented 10 years ago

Related to the decision on how modules do responsiveness https://github.com/Financial-Times/ft-origami/issues/68 I think o-grid now needs a js utility for products. Something like.

grid.applyResponsiveClasses({
   el: '.o-gallery', // selector or HTML el
   rules: [{
        layout: 'XL',
        class: 'o-gallery-massive'
      },{
        layout: '>S<XL',
        class: 'o-gallery-medium'
      }]
})

Arguably (because there are a few ways you can measure viewport width, and most are unreliable across devices) we could also do with another module which has a more generic implementation for applying any media query.

thoughts? @triblondon @dansearle-ft @richard-still-ft

triblondon commented 10 years ago

I don't think the need is compelling enough to justify this, and it adds complexity to an already very complex module.

matthew-andrews commented 10 years ago

We have a dedicated micro-library that builds on top of fruitmachine that does this exact job:- https://github.com/ftlabs/fruitmachine-media

Syntax is:

[...]
media: {
    '(max-width: 699px), (max-height: 699px)': 'small',
    '(min-width: 700px) and (min-height: 700px)': 'large'
  },
[...]

This would add small class on the component when the first breakpoint met, and large class when the large breakpoint met - and there's also a way to easily add javascript callbacks for the setup/teardown of each state

If there are a way to make that lib more generic (decouple it from fruitmachine) so it that could be used more easily in other applications I'd be very supportive...