search

Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 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...

kaelig commented 9 years ago

v3.0.0 will allow that (in a sense), as products and modules will be able to detect what layout is currently being displayed to the user: https://github.com/Financial-Times/o-grid/blob/refactor-mqs/src/js/getCurrentLayout.js

kaelig commented 9 years ago

As stated previously: getCurrentLayout() will return the… current layout. Closing this.

kaelig commented 9 years ago

@AlbertoElias can we pair to write a test for the utility?

AlbertoElias commented 9 years ago

Not sure it's worth adding all the bloat to test one function which is making sure a Sass mixin works =/

This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723.

kaelig commented 9 years ago

What about cross browser compatibility tests? Could we automate them?

AlbertoElias commented 9 years ago

Once the smoke test thing is set up (I'm working on adding it to obt), we can look at adding them to o-grid. @spriggsha has worked on creating them for o-overlay

kaelig commented 9 years ago

Great, ping me and we can pair on it.