Responsive Demo

[radiovisual]

I love working with this component, but it took me a while to finally get up and running.

So my humble request: It would be awesome if one of the many SUIT [Sages|Wizards|Magicians|Ninjas|Unicorns] could throw together a fully responsive demo of components-grid in action (and/or point to real-world examples or online tutorials?), utilizing best practices. The readme has a passive note about responsiveness:

Cell widths and offsets can be controlled using the responsive sizing utilities and responsive offset utilities, respectively.

Which meant a bit of trial and error and jumping around to the different plugin readmes.

A demo could also help avoid a few common pitfalls, like if I was new to SUIT and I wanted to use a copy-paste from some of the documentation, I might end up with a simple setup like this:

<div class="Grid Grid--fit Grid--withGutter">
    <div class="Grid-cell u-size12of12 u-lg-size3of12"></div>
    <div class="Grid-cell u-size12of12 u-lg-size3of12"></div>
    <div class="Grid-cell u-size12of12 u-lg-size3of12"></div>
    <div class="Grid-cell u-size12of12 u-lg-size3of12"></div>
</div>

...where one might have to bang their head against the wall for an hour before figuring out that the Grid--fit modifier might override all of the sizing utilities placed on Grid-cell descendants -- breaking the responsiveness of the Grid.

🦄 ❤️

[radiovisual]

If there is not already a good demo that you know of, I can throw a demo together, if one of the many SUIT [Sages|Wizards|Magicians|Ninjas|Unicorns] could vet it for best practices, we could somehow include it here, or link to it externally? Happy to help if I can.

[simonsmith]

Does the test page provide the examples you were after?

http://suitcss.github.io/components-grid/test/

If not then we could certainly add some examples to the repository

[radiovisual]

@simonsmith : the examples on the test page are really great to show the options of the components-grid itself, but they are not necessarily fully-responsive examples that show you how to adapt your grid to different screen sizes (like adapting your cell layout strategy to different screen sizes), the examples on the test page really just show off the naturally-fluid nature of the grid component itself (which is, no doubt, the first step towards a responsive layout), but the fluid nature of the grid component is not always enough to get you all the way to a fully responsive grid capable of adapting to different screen sizes. For that, one would have to bring in a plugin like utils-size or utils-offset. So it would be cool to see some examples of these plugins being used to create fully-responsive demos.

Something like you see on a lot of the other grid system pages (but perhaps something a little more interesting than just the break-every-cell-to-its-own-row-on-mobile-style demos which are common in the wild:

I think SUIT is awesome, but it is hard to find good write-ups and concrete examples of SUIT in action (outside of the documentation and examples in the repositories, of course), so having a nice write-up of how SUIT can be be used to solve "all your responsive needs" would be the first step towards SUIT's global domination.

[simonsmith]

This is old and not valid, but do you perhaps mean a realistic example like this? - http://necolas.github.io/suit-grid-layouts/

Were there any particular things you found unclear that we can fix in the documentation?

[radiovisual]

An updated example like that would be great!

But if that is too much work, then I think simply extracting this comment from the readme:

Cell widths and offsets can be controlled using the responsive sizing utilities and responsive offset utilities, respectively.

and turning it into something a bit more concrete (like examples of both of them in action under the context of the components-grid).

Something like this:

To get more granular control over your grids, making them fully-responsive, you will need the help of either the utils-size or utils-offset plugins:

• suitcss/utils-size: Sizing utilities for your responsive grids. DEMO HERE
• suitcss/utils-offset: Take control of your media queries and breakpoints. DEMO HERE

Where the DEMO HERE links would be replaced with links to actual demos of components-grid being used with the respective plugins.

---

If you visit the readmes of both of the plugins linked to above then you still can't find any examples (or mentions for that matter) of them being used with components-grid, even though they need each other to make responsive grids. So I think just a way of tying them all together is good enough.

[simonsmith]

That sounds like a good addition.

Perhaps we can add singular examples and an overall example like the fake news page I linked too but recreated with the up to date SUIT packages. Should serve as a good showcase for the tools and act as a place for users to reference their usage.

[radiovisual]

That would be awesome. 🥇 If something like that existed it would be useful for me as a self-proclaimed SUIT evangelist. Its pretty common for me to find people who know about BEM but have never heard of SUIT, so it would be awesome to point people to some quality real-world demos to reference.

[simonsmith]

Your feedback is appreciated. If you think there are any gaps in the documentation elsewhere please do open an issue. It's certainly an area I've had on my list to improve.

[radiovisual]

Ok, I am happy to help. If I see anything, I will open issues. I am an issue-opening machine!

[simonsmith]

PRs are welcome too!

[mlnmln]

@simonsmith

I think grid is one of the more powerful and useful components.
We had trouble with people not understanding the concepts behind it as well.
Having better documentation and demos that help its adoption rate would be great.
I could recreate the responsive demo using the current syntax, then we'd link that in a prominent location.

What do you think?

[oleersoy]

Here's a responsive grid demo - Obviously feel free to copy it back to suit. Rendered test link (It's test 2):

https://superflycss.github.io/component-grid/target/test/html/

{% set when1 %}
<code class="u-text-color-md-pink-400">Grid </code> is applied.
{% endset %}
{% call Test.component( 'Grid', when1, 'Cells are rendered with the sizing utility applied when the viewport is large otherwise they are full width.' ) %}
<div class="Grid Grid--withGutter">
  <div class="u-lg-size1of4">
    <div class="TestBox">1</div>
  </div>
  <div class="u-lg-size1of4">
    <div class="TestBox">2</div>
  </div>
  <div class="u-lg-size1of4">
    <div class="TestBox">3</div>
  </div>
  <div class="u-lg-size1of4">
    <div class="TestBox">4</div>
  </div>
</div>
{% endcall %}

[simonsmith]

I could recreate the responsive demo using the current syntax, then we'd link that in a prominent location.

@mlnmln Yeah, I think a real world example as opposed to a test page is the way forward here

[oleersoy]

Could be this simple:
https://medium.com/@ole.ersoy/building-a-responsive-grid-with-superflycss-be6c1f28bebf