{"id":13561869,"url":"https://github.com/rtfeldman/elm-css","last_synced_at":"2025-05-14T21:10:41.568Z","repository":{"id":37580262,"uuid":"42820959","full_name":"rtfeldman/elm-css","owner":"rtfeldman","description":"Typed CSS in Elm.","archived":false,"fork":false,"pushed_at":"2024-04-01T22:10:10.000Z","size":8092,"stargazers_count":1246,"open_issues_count":80,"forks_count":197,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-07T21:09:46.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/rtfeldman/elm-css/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rtfeldman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-20T16:52:06.000Z","updated_at":"2025-05-05T18:58:24.000Z","dependencies_parsed_at":"2023-02-09T20:01:20.075Z","dependency_job_id":"a2766b95-310d-44c2-ba20-acf56117e5b2","html_url":"https://github.com/rtfeldman/elm-css","commit_stats":{"total_commits":1117,"total_committers":105,"mean_commits":"10.638095238095238","dds":0.3294538943598926,"last_synced_commit":"551376deabbfa50eec40a0a735941b4edf7ea592"},"previous_names":["rtfeldman/elm-stylesheets"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtfeldman%2Felm-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rtfeldman","download_url":"https://codeload.github.com/rtfeldman/elm-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227631,"owners_count":22035671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:01:02.091Z","updated_at":"2025-05-14T21:10:41.490Z","avatar_url":"https://github.com/rtfeldman.png","language":"Elm","funding_links":[],"categories":["Elm","Technologies"],"sub_categories":[],"readme":"# elm-css\n\n`elm-css` lets you define CSS in Elm. (For an Elm styling system that is a\ncomplete departure from CSS, check out [Elm-UI](https://github.com/mdgriffith/elm-ui).)\n\nHere's an example of how to define some `elm-css` styles:\n\n```elm\nmodule MyCss exposing (main)\n\nimport Css exposing (..)\nimport Html\nimport Html.Styled exposing (..)\nimport Html.Styled.Attributes exposing (css, href, src)\nimport Html.Styled.Events exposing (onClick)\n\n\n{-| A logo image, with inline styles that change on hover.\n-}\nlogo : Html msg\nlogo =\n    img\n        [ src \"logo.png\"\n        , css\n            [ display inlineBlock\n            , padding (px 20)\n            , border3 (px 5) solid (rgb 120 120 120)\n            , hover\n                [ borderColor theme.primary\n                , borderRadius (px 10)\n                ]\n            ]\n        ]\n        []\n\n\n{-| A plain old record holding a couple of theme colors.\n-}\ntheme : { secondary : Color, primary : Color }\ntheme =\n    { primary = hex \"55af6a\"\n    , secondary = rgb 250 240 230\n    }\n\n\n{-| A reusable button which has some styles pre-applied to it.\n-}\nbtn : List (Attribute msg) -\u003e List (Html msg) -\u003e Html msg\nbtn =\n    styled button\n        [ margin (px 12)\n        , color (rgb 250 250 250)\n        , hover\n            [ backgroundColor theme.primary\n            , textDecoration underline\n            ]\n        ]\n\n\n{-| A reusable style. Css.batch combines multiple styles into one, much\nlike mixins in CSS preprocessors.\n-}\nparagraphFont : Style\nparagraphFont =\n    Css.batch\n        [ fontFamilies [ \"Palatino Linotype\", \"Georgia\", \"serif\" ]\n        , fontSize (px 16)\n        , fontWeight normal\n        ]\n\n\n{-| Css.property lets you define custom properties, using strings as their values.\n-}\nlegacyBorderRadius : String -\u003e Style\nlegacyBorderRadius amount =\n    Css.batch\n        [ property \"-moz-border-radius\" amount\n        , property \"-webkit-border-top-left-radius\" amount\n        , property \"-webkit-border-top-right-radius\" amount\n        , property \"-webkit-border-bottom-right-radius\" amount\n        , property \"-webkit-border-bottom-left-radius\" amount\n        , property \"border-radius\" amount\n        ]\n\n\nview : Model -\u003e Html Msg\nview model =\n    nav []\n        [ img [ src \"assets/backdrop.jpg\", css [ width (pct 100) ] ] []\n        , btn [ onClick DoSomething ] [ text \"Click me!\" ]\n        ]\n\n\nmain : Program Never Model Msg\nmain =\n    Html.beginnerProgram\n        { view = view \u003e\u003e toUnstyled\n        , update = update\n        , model = initialModel\n        }\n```\n\nSee [the `Css` module documentation](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css) for an explanation of how this code works.\n\n`elm-css` draws inspiration from the excellent [Sass](http://sass-lang.com/), [Stylus](http://stylus-lang.com/), [CSS Modules](http://glenmaddern.com/articles/css-modules), and [styled-components](https://www.styled-components.com) libraries. It includes features like:\n\n- [locally scoped CSS](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284)\n- [mixins](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#batch)\n- [nested media queries](https://davidwalsh.name/write-media-queries-sass) (as well as pseudo-classes like `:hover` and pseudo-elements like `::after`)\n\n### Examples\n\n- A [reusable datepicker](https://github.com/abadi199/datetimepicker) built by Abadi Kurniawan\n- The [website](https://noredink.github.io/json-to-elm) for [json-to-elm](https://github.com/eeue56/json-to-elm)\n- This project's [examples](https://github.com/rtfeldman/elm-css/tree/master/examples) folder\n\n## Related Projects\n\n- [Elm CSS Normalize](https://github.com/scottcorgan/elm-css-normalize)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtfeldman%2Felm-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frtfeldman%2Felm-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtfeldman%2Felm-css/lists"}