fit.js
fit.js copied to clipboard
vAlign
vAlign: fit.CENTER
Seems to only center an item if it has dimensions, the docs give the impression that fit.js would circumvent the problem of vertically centering an element that one does not know the height of... If you already have a set height why on earth do you need a plugin? or would you do this through javascript? Seems like an anit-pattern.
The purpose of the script isn't to align elements, it's to fit them. I would certainly discourage using it just to vertically align something, in fact you wouldn't get the desired behavior if you did and there's little point using JS to do something which you can do with CSS.
The alignment options are additions to the fit logic, because depending on the aspect ratio of the elements you're using you will likely end up with vertical or horizontal space (unless you use the cover
option), therefor you want to be able to specify how fit deals with this space.
This fiddle shows the before and after of a fit call - you can see how fit is used to scale the object, not just align it.
To summarise, fit was written for eventualities where using generic CSS rules alone is simply not possible. Here's another example that should illustrate this. Can you write a general CSS rule for bar
elements that has them fit into foo
s and maintain their aspect ratio?
As for only centering an element if it has dimensions, can you share an example please? It shouldn't need dimensions (for HTMLElements they are determined by querying offsetWidth
and offsetHeight
during each fit call), though you will need to set position
to absolute
if you're using the cssTransform
fitting technique.
I hope that explains why it's not an anti-pattern. Perhaps the docs aren't explicit enough about the eventualities in which you would use fit.js. My logic was that if you'd come across that eventuality then you would know why fit is useful, but I might need to call out what it's not supposed to be for if it's misleading some people.