이 문서는 elm meetup tokyo #4에서 사용한 자료입니다.

많은 설명이 부족하지만 걱정하지 마십시오.

자기 소개 부분 약어

CSS 좀 잘 모르겠어

CSS를 하고 싶지 않아

Style Elements

CSS의 Layout 부분과 Style 부분을 나누어 재정의한 접근입니다!

Element는 Layout가 들어간 Html

Style은 Css의 본 목적 부분

ChatClient의 Aizuchi를 개발하고 있습니다!

대부분 row와 column로 레이아웃

flexbox가 되십시오

comment : Comment -> Element Styles variation msg
comment { content, postedAt, postedBy, format, index } =
    row None
        [ padding 5
        , spacing 8
        , width <| fill 1
        ]
        [ image ("https://flathash.com/" ++ postedBy.name) None [ width <| px 64, height <| px 64 ] empty
        , column None
            [ paddingTop 17, spacing 10 ]
            [ row None [ spacing 20 ] []
            , commentContent format content
            ]
        ]

Attribute로 크기를 지정합니다.

width, height

padding, spacing

scrollBar

배치(center, alignTop, justify

column None
        [ spacing 1
        , width <| fill 1
        , center
        ]

ClassName 같은 것은 Union Type으로 만든다

type Styles
    = None
    | TestStyle
    | Main
    | Logo
    | FormCard
    | Card
    | CardHeader
    | Button
    | Input
    | Tag

StyleSheet 정의

styleSheet : StyleSheet Styles variation
styleSheet =
    Style.styleSheet <|
        [ style None []
        , style Main
            [ Color.background <| Mixing.fade 0.8 Colors.white
            , Color.text Colors.ultramarine
            ]
        , style Logo
            [ fontSize.size1
            , Font.justifyAll
            , Font.bold
            ]
        , style FormCard
            [ shadows
                [ Shadow.box { shadow | offset = ( 0, 2 ), blur = 3 }
                , Shadow.box { shadow | blur = 1 }
                ]
            ]
        ]

Element styles variation msg 이 스타일의 일부가된다.

el None [] <| text "divになるよ"
column Main [] [text "flexboxになるよ"]
row FormCard [] [text "rowなflexboxになるよ"]

각 요소에 하나씩 넘어갈 수 없다

실제로는 logo__1300303634처럼 붙는다 (hash guard는 제외할 수도 있다

styleSheet <style>~</style>

의사 클래스도 사용할 수 있습니다

무엇이 기쁘다.

layout 훨씬 쉬워졌습니다.

css 보지 않아도 좋다

Style이 Elm에 작성되었습니다

개인적으로

CSS를 조금 알게되었습니다.

Style.Font 또는 Style.Shadow에 집착하고 공부하기 쉽다

CSS 프레임 워크? ? 모르겠어! ! 스스로 스타일 만들기 시작했습니다

어쩌면 단점 (사용할 수 없다고 생각한다)

새로운 방법

Elm은 원래 독자적인 Graphics 라이브러리만으로 html 라이브러리가 없거나 GUI를 만드는데 좋은 방법을 목표로 하고 있는 곳이라고 생각합니다.

당신도 style-elements way로 만들어 보지 않겠습니까?

elm slack에 #style-elements 채널이 있습니다.


Elm에서 애니메이션하고 싶지만 상태 관리라든지 없어. CSS 애니메이션 등으로 할 수 있습니다.

style Button
    [ Style.shadows
        [ Shadow.box { shadow | offset = ( 0, 5 ), color = Mixing.darken 0.2 Colors.primary } ]
    , Transition.transitions
        [ { transition | duration = 200, props = [ "box-shadow", "transform" ] }
        , { transition | duration = 400, props = [ "background" ] }
        ]
    , hover
        [ Style.translate 0 1 0
        , Style.shadows
            [ Shadow.box { shadow | offset = ( 0, 4 ), color = Mixing.darken 0.2 Colors.primary } ]
        ]
    , pseudo "active"
        [ Color.background <| Mixing.darken 0.1 Colors.primary
        , Style.translate 0 5 0
        , Style.shadows
            [ Shadow.box { shadow | color = Mixing.darken 0.5 Colors.primary } ]
        ]
    ]

(사진 약어)
버튼 구니 쵸 니 밀 수있다! 재미! (완료)

애니메이션은 CSS로 할까 ...