Add support for margin/padding multi-value syntax

[felipesabino]

Margins can be shortened using two, three or four value syntax, where

{
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

Could be shortened to

{ margin: 10px 20px 30px 40px; }

The same is valid for padding.

[frankmarineau]

Thanks for the input! The problem with shortening margin and padding is when the element has default values for these properties. If the user only overrides one of them with, say, margin-left, then shortening it to only margin: x x x margin-left; would override the default values for the other margins. Same goes with the paddings. Maybe there is some kind of way around this? What I'll do for now though is detect if the combination of all the margin/padding declarations are combinable into a 2, 3 or 4 value shorthand (without altering defaults). We can at least do this much.

If you have any idea, feel free to pitch in!

[otheroom]

The same thing could be done with border.

[porfidev]

I was thinking how do this, and how we will know if only want 2, 3 or 4 margins,decision tree needed. heritance, default values... but we could do the shortening only when the 4 margins are in CSS rule

[frankmarineau]

What I'll probably do is the following:

• If all sides are specified and equal, shorten using 1-value notation.
• If left and right margins are equal AND top and bottom are equal, shorthand to 2-value notation
• If left and right margins are equal AND top and bottom are specified but not equal, use 3-value notation
• If all sides are specified but none of the above cases apply, shorten using 4-value notation.

I think this is the absolute maximum we can do if we want to avoid overriding inherited/default values. If anyone sees a better way to do this, please give a heads up!

[frankmarineau]

Alright, I've pushed a new commit on the shrthnd.js repo that enables support for shortening padding and margin. I'll be looking into border next. Tell me what you think!

[felipesabino]

Gezz, I just realised I created the issue in the wrong repo, sorry about that!

But @frankmarineau, I believe you should have used github pages instead of an extra repository :stuck_out_tongue:

[frankmarineau]

No problem, the reason why I created the second repo is because the engine logic was originally in this repo, embedded with everything related to the site itself. An other user however suggested to separate the logic and make it an npm module, which I did afterwards. Since it's this repo that's gotten all the attention, do you think I should scrap shrthnd.js, put the npm module in this repo and move the website to gh-pages? Thanks!

On Tue, Aug 12, 2014 at 7:41 PM, Felipe Sabino notifications@github.com wrote:

Gezz, I just realised I created the issue in the wrong repo, sorry about that!

But @frankmarineau https://github.com/frankmarineau, I believe you should have used github pages https://pages.github.com/ instead of an extra repository [image: :stuck_out_tongue:]

— Reply to this email directly or view it on GitHub https://github.com/frankmarineau/shorthand/issues/1#issuecomment-51992710 .