Image size about objects.flag HOT 10 CLOSED

But for me the media-query palm should be integrated inside this package (as another class, why not), notably because it’s kind of standard.
For me it’s not so specific.

@tibastral Then it would depend on the settings.responsive module to be present. In other words: Sass would fail, when it searches for the palm breakpoint and cannot find it. To make this work, settings.responsive has to be a dependency for this module. I'd not vote for that.

Apart from this, I was never a fan of $inuit-flag-collapse-at due to its inflexible nature, meaning: one breakpoint for such an abstract object (the flag object) used all over the place in every possible setting. If it was an element query rather than a media query, it would be much more helpful.

The way I handle it is not using .flag--responsive at all. Instead I handle the collapsing via a component class, e.g.:

<div class="flag  bio">
    <div class="flag__img  bio__img"></div>
    <div class="flag__body  bio__body"></div>
</div>

.bio {

    @media screen and (max-width: $bio-collapse-at) {

        &,
        > .bio__img,
        > .bio__body {
            display: block;
        }

    }

}

This way I can have different breakpoints for different components, but they all use the flag-object.

from objects.flag.

Yep :)

TY all !

from objects.flag.

@tibastral overall, I think these options are too specific to be treated at objects level.

For basic use I set a fixed width to the image like so :

...
<div class="flag__img">
    <img width="200" src="path/to/my/image.jpg" alt="">
</div>
...

For advanced use I create components to fit my UI needs like so :

HTML

<div class="avatar flag">
    <div class="flag__img">
        <img class="avatar__img" src="path/to/my/image.jpg" alt="">
    </div>
...

CSS

.avatar__img
    max-width: 200px;

    @include media-query('palm') {
        width: 100%;
    }
}

from objects.flag.

Ok thank you. But for me the media-query palm should be integrated inside this package (as another class, why not), notably because it’s kind of standard.
For me it’s not so specific.

• Thibaut

On Tuesday 22 March 2016 at 14:39, Florian Bouvot wrote:

@tibastral (https://github.com/tibastral) overall, I think these options are too specific to be treated at objects level.
My basic use is to set a fixed width to the image like so :
...

...

And usually when I need more I create components to fit my UI needs like so :
HTML

CSS
.avatar__img max-width: 200px; @include media-query('palm') { width: 100%; } }

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub (#9 (comment))

from objects.flag.

@tibastral I shared my opinion but I am not part of the team of inuitcss so I could be wrong...

IMO palm media query are not use in this case to reduce dependency : we only need one value for flag--responsive so you can use this module without inuit responsive settings and tools. And if you want to follow palm value, you can easily customize the flag object (inuit-flag-collapse-at).

Edit : If someone customize $breakpoints in `settings.responsive, palm value may not exist !

from objects.flag.

IMO palm media query are not use in this case to reduce dependency

@florianbouvot @tibastral I agree with that

from objects.flag.

@florianbouvot Understood, and agreed.
@csshugs Thank you for this answer, it clarifies a lot, and I agree with you this ‘flag—responsive’ should be deprecated. It’s confusing.
Your solution looks a lot better.

from objects.flag.

@csshugs totally agree with you, my English fails to be as clear as you :(

from objects.flag.

my English fails to be as clear as you

I'm agree but on another side this option is suitable for certain project...

from objects.flag.

my English fails to be as clear as you :(

@florianbouvot 😄 No worries. French people are excused in this matter 😉

@tibastral Thank you. So is everything clarified for you? Can you close this issue then?

from objects.flag.