rtfeldman/elm-css


Typed CSS in Elm.

http://package.elm-lang.org/packages/rtfeldman/elm-css/latest

License: BSD-3-Clause

Language: Elm


elm-css

elm-css lets you define CSS in Elm. (For an Elm styling system that is a complete departure from CSS, check out style-elements.)

Here's an example of how to define some elm-css styles:

module MyCss exposing (main)

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)
import Html.Styled.Events exposing (onClick)


{-| A logo image, with inline styles that change on hover.
-}
logo : Html msg
logo =
    img
        [ src "logo.png"
        , css
            [ display inlineBlock
            , padding (px 20)
            , border3 (px 5) solid (rgb 120 120 120)
            , hover
                [ borderColor theme.primary
                , borderRadius (px 10)
                ]
            ]
        ]
        []


{-| A plain old record holding a couple of theme colors.
-}
theme : { secondary : Color, primary : Color }
theme =
    { primary = hex "55af6a"
    , secondary = rgb 250 240 230
    }


{-| A reusable button which has some styles pre-applied to it.
-}
btn : List (Attribute msg) -> List (Html msg) -> Html msg
btn =
    styled button
        [ margin (px 12)
        , color (rgb 250 250 250)
        , hover
            [ backgroundColor theme.primary
            , textDecoration underline
            ]
        ]


{-| A reusable style. Css.batch combines multiple styles into one, much
like mixins in CSS preprocessors.
-}
paragraphFont : Style
paragraphFont =
    Css.batch
        [ fontFamilies [ "Palatino Linotype", "Georgia", "serif" ]
        , fontSize (px 16)
        , fontWeight normal
        ]


{-| Css.property lets you define custom properties, using strings as their values.
-}
legacyBorderRadius : String -> Style
legacyBorderRadius amount =
    Css.batch
        [ property "-moz-border-radius" amount
        , property "-webkit-border-top-left-radius" amount
        , property "-webkit-border-top-right-radius" amount
        , property "-webkit-border-bottom-right-radius" amount
        , property "-webkit-border-bottom-left-radius" amount
        , property "border-radius" amount
        ]


view : Model -> Html Msg
view model =
    nav []
        [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] []
        , btn [ onClick DoSomething ] [ text "Click me!" ]
        ]


main : Program Never Model Msg
main =
    Html.beginnerProgram
        { view = view >> toUnstyled
        , update = update
        , model = initialModel
        }

See the Css module documentation for an explanation of how this code works.

elm-css draws inspiration from the excellent Sass, Stylus, CSS Modules, and styled-components libraries. It includes features like:

Examples

Related Projects

Project Statistics

Sourcerank 14
Repository Size 7.28 MB
Stars 891
Forks 152
Watchers 34
Open issues 37
Dependencies 53
Contributors 68
Tags 44
Created
Last updated
Last pushed

Top Contributors See all

Richard Feldman Tolga Paksoy Noah Bob Whitelock Luke Westby Willem Joubert Eduard Kovalov Anton Strömkvist Ville Penttinen Ignacio Gutierrez Josiah Witt robrtle colvardrm Vlad GURDIGA Andrey Koppel Roman Gonzalez amarqueslee Max Hallinan Alexis Couronne Rodrigo Moreira de Morais

Packages Referencing this Repo

rtfeldman/elm-css
Typed CSS in Elm.
Latest release 14.0.0 - Updated - 891 stars
elm-stylesheets
Elm-based CSS Preprocessor
Latest release 0.1.0 - Updated - 891 stars
elm-css
Elm-based CSS Preprocessor
Latest release 0.7.0-beta9 - Updated - 891 stars

Recent Tags See all

15.1.0 August 30, 2018
15.0.0 August 30, 2018
rc1-15.0.0 June 24, 2018
beta-15.0.0 June 16, 2018
alpha-14.0.3 May 10, 2018
14.0.0 May 01, 2018
alpha-14.0.2 April 25, 2018
alpha-14.0.1 March 16, 2018
alpha-14.0.0 March 07, 2018
13.1.1 January 31, 2018
13.1.0 January 31, 2018
13.0.1 December 06, 2017
13.0.0 December 05, 2017
12.0.1 December 05, 2017
12.0.0 November 17, 2017

Interesting Forks See all

drathier/elm-css
CSS preprocessor where you can share code between your stylesheets and your Elm views.
Elm - Updated - 1 stars
bruce/elm-css
CSS preprocessor where you can share code between your stylesheets and your Elm views.
Elm - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2018-03-31 22:29:11 UTC

Login to resync this repository