girouette 2021-03-02

Is there anything you wish to change in Girouette to help you with CSS?

So it looks like text-xl and things like that work. font-size-8wv and things like that also work. text-8wv does not. I would like to see a bit more consistency in the grammar. This program could also use documentation and a grammar reference.

šŸ‘ 1

font-size-... was added because I thought that there was a conflict with the Tailwind geammar, but now I think that there are no problem. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

I did not. I haven’t been doing much with code lately in general though.

Ah I just thought of something. What if for font size I want to use ā€˜em’ instead of ā€˜rem’ as a unit. This is a fairly common thing I think.

Did you try if it is already supported?

@c.westrom I am back on my computer and now I understand why I made a separate component for font-size- and not just extended the existing text- one. The existing text- component is doing multiple things together.

{:id :font-size
    :rules "
    font-size = <'text-'> ('xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' |
                           '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl')
    "
    :garden (fn [{[font-size] :component-data}]
              (let [[size height] ({"xs"   [0.75  1]
                                    "sm"   [0.875 1.25]
                                    "base" [1     1.5]
                                    "lg"   [1.125 1.75]
                                    "xl"   [1.25  1.75]
                                    "2xl"  [1.5   2]
                                    "3xl"  [1.875 2.25]
                                    "4xl"  [2.25  2.5]
                                    "5xl"  [3     1]
                                    "6xl"  [3.75  1]
                                    "7xl"  [4.5   1]
                                    "8xl"  [6     1]
                                    "9xl"  [8     1]} font-size)]
                   {:font-size (str size "rem")
                    :line-height (str height "rem")}))}
It sets the line-height property on the top of font-size .

Cool, that looks good.

So currently I'm using tailwind to build an electron app, Maybe I can get girouette to work there.

How might I edit the root(<html>) or body element? I usually need to do that for backgrounds. I don’t think adding the class in index.html will work.

The only thing girouette is doing is generating garden or css data. Everything else is related to the other tools you are using.

Maybe you can find what you need in the hiccup library.

I’d be happy to write some docs, but I don’t know all the relevant features that should be included.

Every public function also aught to have a docstring, but I haven’t looked at the source code yet so maybe you already have that.

Looks like most of them do.