{"id":15195881,"url":"https://github.com/styled-components/elm-styled","last_synced_at":"2025-10-02T12:30:27.118Z","repository":{"id":65985111,"uuid":"84676227","full_name":"styled-components/elm-styled","owner":"styled-components","description":"Styling your Html Elements with typed Css 💅","archived":true,"fork":false,"pushed_at":"2018-07-18T19:19:08.000Z","size":158,"stargazers_count":180,"open_issues_count":14,"forks_count":8,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-09-29T00:01:45.920Z","etag":null,"topics":["css","css-in-elm","elm","styled-components"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styled-components.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-11T19:58:29.000Z","updated_at":"2023-01-28T17:19:56.000Z","dependencies_parsed_at":"2023-02-19T18:45:22.549Z","dependency_job_id":null,"html_url":"https://github.com/styled-components/elm-styled","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Felm-styled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Felm-styled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Felm-styled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Felm-styled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styled-components","download_url":"https://codeload.github.com/styled-components/elm-styled/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234983187,"owners_count":18917433,"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":["css","css-in-elm","elm","styled-components"],"created_at":"2024-09-28T00:01:01.322Z","updated_at":"2025-10-02T12:30:21.778Z","avatar_url":"https://github.com/styled-components.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"\u003e **Unreleased!** At the moment I can't release this package to the elm package manager because it is [using Native code](https://github.com/styled-components/elm-styled/issues/14). If you still want to expirement with it you can install it directly from GitHub. ❤️\n\n\n\u003ca href=\"https://github.com/styled-components/elm-styled\"\u003e\n    \u003cimg alt=\"elm-styled logo\" src=\"https://cdn.rawgit.com/styled-components/elm-styled/master/assets/logo.png\" height=\"150px\" /\u003e\n\u003c/a\u003e\n\nUse typed CSS inside your Elm files to style your Html elements.\n\n```\nelm-package install styled-components/elm-styled\n```\n\n# Usage\n\n## Basic\n\nThis creates two Elm functions, title and wrapper.\n\n```elm\nimport Html exposing (..)\nimport Styled exposing (..)\nimport Styled.Colors exposing (pink, lightYellow)\n\n\ntitle =\n    styled h1\n        [ fontSize (Styled.em 1.5)\n        , textAlign center\n        , color pink\n        , fontFamily monospace\n        ]\n\n\nwrapper =\n    styled div\n        [ padding (Styled.em 4)\n        , backgroundColor lightYellow\n        ]\n```\n\nYou render them like every other Elm node.\n\n\n```elm\nmain =\n    wrapper []\n        [ title []\n            [ text \"Hello World, this is my first styled function 💅\" ]\n        ]\n```\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"Screenshot of the above code ran in a browser 💅\" src=\"https://i.imgur.com/2NumaGu.jpg\" width=\"743px\" /\u003e\n\u003c/div\u003e\n\n## Overriding Styles\n\nWe can create a simple button function and using this function to create a new styled function. The new styled function will have all of the styles from both styled functions.\n\n```elm\nimport Html exposing (div, text)\nimport Styled exposing (..)\nimport Styled.Colors exposing (white, pink)\n\n\nbutton =\n    styled Html.button\n        [ backgroundColor white\n        , color pink\n        , fontSize (Styled.em 1)\n        , margin (Styled.em 1)\n        , padding2 (Styled.em 0.25) (Styled.em 1)\n        , border (px 2) solid pink\n        , borderRadius (px 3)\n        ]\n\n\nprimaryButton =\n    styled button\n        [ backgroundColor pink\n        , color white\n        ]\n\n\nmain =\n    div\n        []\n        [ button [] [ text \"Normal\" ]\n        , primaryButton [] [ text \"Primary\" ]\n        ]\n```\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"Screenshot of the above code ran in a browser 💅\" src=\"https://i.imgur.com/ihYenDg.jpg\" width=\"250px\" /\u003e\n\u003c/div\u003e\n\n## Dynamic Styles\n\nIf you want to have dynamic styles you can create a function which will return a styled function.\n\n```elm\nimport Html exposing (..)\nimport Styled exposing (..)\nimport Styled.Colors exposing (red, yellow, green)\n\n\nlight paint =\n    styled div\n        [ backgroundColor paint\n        , borderRadius (percent 50)\n        , display inlineBlock\n        , height (px 60)\n        , width (px 60)\n        , margin (px 20)\n        ]\n\n\ntrafficLight =\n    div []\n        [ light red [] []\n        , light yellow [] []\n        , light green [] []\n        ]\n\n\nmain =\n    trafficLight\n```\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"Screenshot of the above code ran in a browser 💅\" src=\"https://i.imgur.com/cSVnQSz.jpg\" width=\"302px\" /\u003e\n\u003c/div\u003e\n\n## Animations\n\nCSS animations with @keyframes aren't scoped to a single function but you still don't want them to be global. This is why we export a keyframes helper which will generate a unique name for your keyframes. You can then use that unique name throughout your app.\n\n```elm\nimport Html exposing (..)\nimport Styled exposing (..)\nimport Styled.Keyframes exposing (keyframes)\nimport Styled.Transforms exposing (rotate)\nimport Styled.Timings exposing (linear)\n\n\nspin =\n    keyframes\n        [ ( 0\n          , [ transform (rotate (deg 0))\n            ]\n          )\n        , ( 100\n          , [ transform (rotate (deg 360))\n            ]\n          )\n        ]\n\n\nloader =\n    styled div\n        [ display inlineBlock\n        , animationName spin\n        , animationDuration (Styled.s 2)\n        , animationTimingFunction linear\n        , animationIterationCount infinite\n        ]\n\n\nmain =\n    loader [] [ text \"[ 💅 ]\" ]\n```\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg alt=\"Screenshot of the above code ran in a browser 💅\" src=\"https://zippy.gfycat.com/DevotedHeavenlyGoldenretriever.gif\" width=\"113px\" /\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Felm-styled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyled-components%2Felm-styled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Felm-styled/lists"}