Comments (3)
Fermion will be releasing without said functionality. This might be added in a later update.
from mini.css.
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.
from mini.css.
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.
from mini.css.
Related Issues (20)
- Table: flex and word-wrap problem HOT 2
- Table: Tooltip hidden HOT 2
- Need a css and min.css download link so we do not have to use sass. HOT 2
- Border radius missing on non-horizontal table cells
- Please provide examples of a responsive header HOT 2
- Error in doc sample for Forms and Input - Best Practice HOT 1
- Switch component HOT 1
- Header logo not vertically centered when .row is applied to the header HOT 1
- Allow for adjusting header height more easily
- The class="switch" does not work as expected. HOT 2
- Button in form not in line
- RawGit has reached the end of its useful life
- Link color in dark mode is very dark HOT 1
- Generated css HOT 2
- Introductory video not found
- Tooltips get cutoff when used in horizontal table HOT 5
- How to add an item to the documentation notes of modal dialogs ?
- The 'Tabbed app template' example is broken HOT 3
- Getting a table to not wrap
- no dropdown button? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mini.css.