girouette 2021-03-02 | Slack Archive

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.

👍 3

Vincent Cantin05:03:07

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

Vincent Cantin07:03:48

#Also sent to the channel

@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 .

West19:03:05

Cool, that looks good.

West19:03:55

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

West20:03:50

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.

Vincent Cantin07:03:43

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

Vincent Cantin07:03:44

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

West08:03:39

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.

Vincent Cantin01:03:29

#Also sent to the channel

Did you try if it is already supported?

West21:03:37

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

West05:03:00

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

West05:03:53

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.

West05:03:24

Looks like most of them do.

Vincent Cantin07:03:48

replied to a thread: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.

{: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 .

Vincent Cantin01:03:29

Did you try if it is already supported?

2021-03-02

Channels