search

Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

Why does this project exist? #22

Closed matthew-andrews closed 10 years ago

matthew-andrews commented 10 years ago

This is FT Origami's first principle:

Everything governed by standards

We’ll favour solutions that use industry standards over those that define anything FT specific. Equally we’ll favour widely applicable FT standards over those that are specific or narrow in focus. Standards, where defined, will be clear, specific in scope, and unambiguous.

Given that there are many, many high quality grid layout CSS libraries already in existence would it not be better to apply the above Origami principle to this and find an already widely supported, well tested grid library to add to the Third Party component A list rather than develop and maintain our own?

If none really meet the FT's specific use cases even then would it not be better to at least build on top of an existing, popular open source library rather than building something bespoke to the FT from scratch?

Some popular grid libraries (a quick search on GitHub reveal literally dozens, if not hundreds):-

dan-searle commented 10 years ago

This module was created (initially) for the FT Responsive Article project which has a requirement for:

I looked at various existing grid libraries before we started and concluded that they wouldn't support all these requirements without quite significant changes, and, as something quite fundamental, it would be better to create our own.

matthew-andrews commented 10 years ago

That's really surprising - these requirements don't seem unusual at all - may I ask which grid libraries were evaluated?

dan-searle commented 10 years ago

Sorry, there's some things I neglected to mention...

Design had indicated there were 4 device types (see http://goo.gl/dcU3c9) that the grid would need to be able to respond to. Also we needed to support IE7 and IE8 and we didn't want to make the grid JS-dependent in those browsers.

We also wanted the grid CSS classes to be namespaced, as we have to allow for a lot of 3rd party code ending up on our pages.

I looked at Bootstrap, Foundation, Semantic Grid and various others (sorry, I can't remember which ones exactly) and it seemed they only supported 2 or 3 layout modes, or relied on a media-query JS polyfill (respond.js particularly) for IE7 and IE8 support (or didn't support IE7 at all). A lot of them also have classes like "row" or "column" which IMO are vulnerable to corruption from third party code. Many of them also include a whole load of stuff we wouldn't be using.

I dare say there's a grid system out there somewhere that fits our needs, or could be forked and changed to do so, but it seemed to me at the time that creating our own was the best course of action.

Support for IE7 has since been dropped, but all the current indications are that support for IE8 won't be dropped for quite some time.

triblondon commented 10 years ago

Personally I think it's sensible to have our own grid. I'm going to make an executive call here and close this - I'm happy for us to continue to debate issues and challenge our implementation decisions, but we're invested in having our own grid, and I think accepting this as a given allows us to focus on improving it without concern about potentially wasting our time.

The grid's here to stay, let's just get it right.

kavanagh commented 10 years ago

Sorry to add to an already closed issue.

With the changes discussed in #23, do you think it would be a preferable to split the legacy grid from the responsive grid as two separate components that can be used together?

As class selectors have greater support and in older browsers are quicker, the legacy grid could use a seperate system of classes. e.g. 

<div class="o-legacygrid-col" data-o-grid-sizing="5 S12 XL3">

This means product developers who are not interested in older browsers don't have to have all that legacy junk and think purely using the responsive grid system.

triblondon commented 10 years ago

I'm not aware of a plan to keep the legacy grid or junk. The data-attribute syntax works in IE7 upwards and everything else of consequence, that's well over 95% of browsers.

kavanagh commented 10 years ago

For this requirement mentioned by Dan.

This module was created (initially) for the FT Responsive Article project which has a requirement for: ...

  • fixed 'desktop' grid (for old non-media query supporting large-screen devices) - e.g. IE7/IE8

I assumed this case meant we had extra css supporting a multi-column layout that could otherwise be removed if you didn't need to support browsers without media queries.

triblondon commented 10 years ago

No, I don't think so. If the browser doesn't support media queries, it will just use the default column span number, so:

data-o-grid-sizing="5 S12 XL3"

Would mean a 5-column span on UAs that don't support media queries.

wheresrhys commented 10 years ago

@kavanagh - just seen this. There's a sass variable that can be used to switch off the legacy grid