Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prefixed class names #19

Open
alvarotrigo opened this issue Jun 8, 2016 · 2 comments
Open

Prefixed class names #19

alvarotrigo opened this issue Jun 8, 2016 · 2 comments

Comments

@alvarotrigo
Copy link

alvarotrigo commented Jun 8, 2016

Great library!
Just one thing, it would be great to have prefixed class names.

Instead of item, which can be quite common in any page, use flex-item.

And yep, I know you can customize it using the container option, but takes a bit to figure out we also have to add the following styles added by default in flexImages.

.flex-item img{
    display: block;
    width: auto;
    height: 100%;
}
.flex-item { float: left; margin: 4px; border: 1px solid #eee; box-sizing: content-box; overflow: hidden; position: relative;  }

Another option is to use an internal class name but still making the class name configurable.
Something like...

// within the library code 
function addInternalSelector(){
    //with a configurable `container` variable
    $(container).addClass('flex-image');
}

Then, even when the user modifies the selector your CSS class will still be applied:

<img class="myCustomSelector flex-image" />
.flex-item img{
    display: block;
    width: auto;
    height: 100%;
}
@SimonSteinberger
Copy link

If others need this too, we can implement this option. Otherwise, I'd suggest to just leave it as it is to keep things as simple as possible.

@alvarotrigo
Copy link
Author

alvarotrigo commented Jun 11, 2016

@SimonSteinberger I realised there's so little CSS :) So kind of make sense. It would just be great if you could mention in the doc we need to change the CSSs when using the custom selector.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants