[Question/Proposal] Shorthands in another project

[thyvini]

Hi,

As it is stated in the docs, this project doesn't have all the possible CSS shorthands. While sometimes I agree with this philosophy, sometimes is just so much practical to use shorthands.

Some things like margin: 0 auto happen so often that is even easier to a front-end programmer to get what's happening than when reading it's alternatives.

Also, when you get some design from tools like Figma, it comes with the style using shorthands mostly, and for me at least, it has been harder to find the original form from the shorthand than the opposite, so shorthands could be handy in these moments.

Thinking about that, I don't think that the project should change, but rather allow extensions written in another library, like a FSS.Extras or FSS.Shorthands. Not only extending it for shorthands, but also for common things like a column flex, the margin 0 auto or a readily made reset.css to apply to a project.

• Would you agree with it?
• How could a developer extend this project in places like ILengthUnit, Rule and other core classes?

[Bjorn-Strom]

Hey @LooserName404!

Interesting that you should bring up shorthands.

I have been doing a lot of frontend development with TypeScript for work lately, and man those shorthands are convenient! So I have changed my mind on having them in the library.

I still believe that they can be confusing - but I also believe that F# and Fss can handle them really well - so I want to add them to Fss.

We will have to iron out exactly how to implement them (I have an idea) - but once that is done we can start adding them gradually.

Feel like helping out?

[thyvini]

Yeah, I can help :)

How can I do a border: 1px solid #aaa today? I couldn't find a way to do it, so if there's one, we could use it as a base case, and if it's not, we can start at it.

What do you think?

[Bjorn-Strom]

I am glad to hear it! I do not have many too many hours to dedicate to this during a normal week, so having some help would be greatly appreciated! 🙇

So as I mentioned had thought about this and made a prototype. I went over and added some comments and pushed it on to the branch called shorthand.

You can just check that branch out and search for "shorthand" in the F# code to take a look at it.

You can just ping me if you have any questions we could also do a Discord call or something if anything is unclear 👍

[thyvini]

At a first glance, this seems very good.

I liked the way that it is used, and the implementation is great too.

About the permutations, I think that it is better for maintainability to use optional parameters, with the default args like the default CSS ones (medium, none and currentcolor).

As for using the types, I agree that it can be a little verbose, but doesn't think that it's a big problem, as it keeps consistent with the general API and provides a good clarity of what's happening.

[Bjorn-Strom]

I am glad you like it!

The default parameters is a good idea, I like that!

Do you want to give finishing border shorthand a go? If not I can try to get it done tomorrow.

Then we can use that as a start point to start adding more 🤓

[Bjorn-Strom]

Okay, I just merged the border shorthands right into master. I like having short lived branches, so I figure we can add more in separate PRs as well.

If you feel like adding more, just create a PR!

I will keep this issue open until we are satisified with shorthands as a whole.

I will start working on shorthand for Animation this weekend 👍

Good job on the border shorthand and thank you so much for the help so far! 🙏

[thyvini]

Hello,

First of all, sorry for the delay.

I've made a new branch containing some work over the Background shorthand. https://github.com/LooserName404/FSS/tree/background-shorthand

I'll see later if there is something I'm missing, and if it is all okay, I'll open a PR.

[Bjorn-Strom]

Hey!

No need to apologize, I have been super busy as well and unable to work as much with this as I would like!

Man, that looks great! Make a PR and I will take a proper look 👍 Thanks again!

[Bjorn-Strom]

Just merged the #35 Thank you so much for the help with this 🙏