Added a new function for use in fluid/responsive layouts

[razialx]

Added a new function: fluid(target, container)

Converts two tree.Dimensions with type 'px' (or null) to their ration expressed as a percentage ('%')

Examples:
fluid(10px,200px) -> 5%
fluid(48,900) -> 5.3333333333%

Also, updated the unit tests appropriately.

[matthew-dean]

Can you explain what this function is intended to do?

[razialx]

Hey Matthew,

When creating fluid or responsive layouts you work with percentages instead
of pixels. Your initial design will start in pixels, but you compute the
percentages in the final css. For example, if my page container is designed
at 900px and my blog post is to be 500px wide inside that, the real width
for the blog post would be 500px / 900px * 100.0, or 55.55555555%.
Computing these percentages is an annoying manual process, so I thought I
would be able to make things easier using Less. After all, recomputing
everything when the designer decides to change one little thing is not how
I want to spend my time.

My initial experiments showed I could do the following:

@container : 900px;
@post : 500px;

.blog_post {
width: 100.0% * @post/@container;
}

and I would get the results I wanted. However, I wasn't sure this was the
best way to do things, as it was ending up as a percentage only because the
first operand was typed as a percentage. It could be possible that this
would change in the future as there was no contract with regards to typing
in the documentation.

I considered writing the function as a plugin, but that wouldn't be
reliable because the 'tree' object is entirely internal and as such gets
renamed when Less is minimized (to 'a' in the current version), so I
couldn't reliable know what it was. This is what led me to fork Less and
add the function to the source.

Unfortunately, naming things is difficult. I just threw out 'fluid' because
I couldn't think up a better name.
If this isn't an appropriate addition to Less, no worries :) Just thought I
would put it out there.

Thanks for making this awesome tool.
Tim Reyolds

Thanks for contacting me so quickly.

On Wed, Nov 23, 2011 at 1:47 PM, matthewdl <
[email protected]

wrote:

Can you explain what this function is intended to do?

---

Reply to this email directly or view it on GitHub:
#481 (comment)

Tim Reynolds

[razialx]

Hmm.. This wasn't meant to go onto this pull request. It was meant as a new pull request. Sorry. Trying to figure out what I should do here...

[neonstalwart]

@razialx you should create a new branch for each pull request. once you open a pull request anything you commit to that branch is included in that existing pull request. this allows you to iterate on your open pull request without needing to open a new one every time you need to tweak the code.

[razialx]

Thanks. Took a little bit to get it right but I managed. Pretty new to Git.

On Thu, Dec 1, 2011 at 4:41 PM, Ben Hockey <
[email protected]

wrote:

@razialx you should create a new branch for each pull request. once you
open a pull request anything you commit to that branch is included in that
existing pull request. this allows you to iterate on your open pull
request without needing to open a new one every time you need to tweak the
code.

---

Reply to this email directly or view it on GitHub:
#481 (comment)

Tim Reynolds

[matthew-dean]

I think there's actually an undocumented percentage function in LESS, but I'm not sure if it handles this or not. I found it the other day whilst browsing the source code, as one does when one is in need for some R&R.

[matthew-dean]

I think I was on crack, because I don't see it. Where did I see that? head scratch

[razialx]

Hmm, not sure. I actually thought I saw something like what I wanted in
there.

The function here is just a nice shortcut.

On Thu, Dec 29, 2011 at 2:33 PM, matthewdl <
[email protected]

wrote:

I think I was on crack, because I don't see it. Where did I see that?
head scratch

---

Reply to this email directly or view it on GitHub:
#481 (comment)

Tim Reynolds

[razialx]

Though, without it, the workaround is based on undocumented functionality,
so it might not work in the future.

  width: 100.0% * @post/@container;

It seems it works by chance that the result is in percentages vs by design.
That is to say, there is no 'contract' that says the type of an expression
will be the type of the left most value. If that will always be the case,
then using the above would be more reasonable. /shrug

Thanks
Tim

On Thu, Dec 29, 2011 at 3:28 PM, Tim Reynolds [email protected] wrote:

Hmm, not sure. I actually thought I saw something like what I wanted in
there.

The function here is just a nice shortcut.

On Thu, Dec 29, 2011 at 2:33 PM, matthewdl <
[email protected]

wrote:

I think I was on crack, because I don't see it. Where did I see that?
head scratch

---

Reply to this email directly or view it on GitHub:
#481 (comment)

Tim Reynolds

Tim Reynolds

[matthew-dean]

Yep, I've had to use the same percentage hack. Usually you can "cast" a unit that way, so it's not a huge big deal, but I could see the convenience of having a dedicated function.

[cloudhead]

There is indeed a percentage function now.