Responsiveness for media

[Chalarangelo]

Responsiveness for media needs to be added. Probably a feature to be added later to Fermion.

[Chalarangelo]

Fermion will be releasing without said functionality. This might be added in a later update.

[Chalarangelo]

Update

Resposive media objects might require a lot of work to deal with, so future releases will build try to deal with this issue incrementally. As far as v2.1.0 is concerned, the plan is to release a Media Object, which will deal with the most common media object that web developers struggle with: image on the left, text on the right.

The afforementioned media object will be part of the utility module and will utilize the functionality of flexbox as usual to deal with most of the problems that might arise. Some customization will be available and the whole thing will be enabled by default, but possible to disable using a flag.

[Chalarangelo]

Update 2

Implementing the Media Object as mentioned above was not as easy as originally expected. I was originally thinking of something along the lines of:

<div class="media">
  <img src="...">
  <div>content</div>
</div>

However the above pattern is not possible, due to the fact that an object like <img> will not properly stretch and respond to its surroundings, as required. This made me abandond the pattern.

There is an alternative pattern, which can be easily implemented and looks something like this:

<div class="media">
  <div class="object">
    <img src="...">
  </div>
  <div>content</div>
</div>

The above pattern works and deals with the Media Object pattern. This solution does not require a component of its own in the utility module, but can easily be implemented using the Grid module. A valid example is the following:

<div class="row">
  <div class="col-sm-1">
    <img src="https://placehold.it/800x800">
  </div>
  <div class="col-sm-11">
    <h2>Heading</h2>
    <p>Some text...</p>
  </div>
</div>

Seeing how this pattern can easily be implemented using the existing grid system and how it can be made to be more responsive and versatile than otherwise without burdening the framework, I am now thinking of how to add the new pattern to the next release.

One thing that should be done is add an example in one of the documentation pages to properly showcase how a Media Object can be easily built to deal with this situation. Nesting should also be showcased to prove that this pattern supports the feature. Reverse order should be able to deal with the image presentation, so this can easily be added as well.

I have already considered adding an extra class to the grid module to allow vertical centering of content in columns, which could significantly benefit the Media Object pattern, but I will think about it a bit more.