{"id":16710482,"url":"https://github.com/gdotdesign/elm-html-styles","last_synced_at":"2025-04-10T05:35:18.328Z","repository":{"id":137704525,"uuid":"82441103","full_name":"gdotdesign/elm-html-styles","owner":"gdotdesign","description":"Add CSS styles to your HTML!","archived":false,"fork":false,"pushed_at":"2017-04-20T10:08:49.000Z","size":45,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T06:51:52.059Z","etag":null,"topics":["css","elm","style"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gdotdesign.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-02-19T06:50:40.000Z","updated_at":"2018-08-16T02:29:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"f39b76a9-7513-471e-8141-81c2899ce0ad","html_url":"https://github.com/gdotdesign/elm-html-styles","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdotdesign%2Felm-html-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdotdesign%2Felm-html-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdotdesign%2Felm-html-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdotdesign%2Felm-html-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gdotdesign","download_url":"https://codeload.github.com/gdotdesign/elm-html-styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163902,"owners_count":21058045,"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","elm","style"],"created_at":"2024-10-12T20:08:37.262Z","updated_at":"2025-04-10T05:35:18.316Z","avatar_url":"https://github.com/gdotdesign.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-html-styles\n[![Build Status](https://travis-ci.org/gdotdesign/elm-html-styles.svg?branch=master)](https://travis-ci.org/gdotdesign/elm-html-styles)\n![Elm Package Version](https://img.shields.io/badge/elm%20package-1.1.2-brightgreen.svg)\n\nThis package helps you to add CSS styles simply and dynamically to HTML\nelements.\n\n## Installation\nAdd `gdotdesign/elm-html-styles` to your dependencies:\n\n```json\n\"dependencies\": {\n  \"gdotdesign/elm-html-styles\": \"1.0.0 \u003c= v \u003c 2.0.0\"\n}\n```\n\nAnd install with [elm-github-install](https://github.com/gdotdesign/elm-github-install)\nusing the `elm-install` command.\n\n## Usage\nThis package provides the `Html.Styles` module which exposes the following\nthree functions:\n\n#### `styles : List (String, String) -\u003e List Style -\u003e Html.Attribute msg`\nThis function takes two arguments:\n\n* the first is a list of property-value pairs (tuple) which will be applied to\n  the main element (this is much like the `Html.Attribute.style` function)\n* the second is a list of sub selectors where each can be either a sub selector\n  (like descendant or child selector) or a pseudo selector\n\n#### `pseudo : String -\u003e List (String, String) -\u003e Style`\nThis functions returns a `Style` to use in the `styles` function above, it is\nused to style pseudo elements of the main element. It takes two arguments:\n\n* the first is the pseudo selector `::before`, `::after`, `::placeholder`, etc...\n* the second are the property-value paris (tuple) for the selector\n\n#### `selector : String -\u003e List (String, String) -\u003e Style`\nThis functions returns a `Style` to use in the `styles` function above, it is\nused to style sub elements of the main element. It takes two arguments:\n\n* the first is the pseudo selector `span`, `\u003e div`, `li + li`, etc...\n* the second are the property-value paris (tuple) for the selector\n\n## Example\nThis is a minimal example on how to use this package:\n\n```elm\nimport Html.Styles exposing (..)\nimport Html exposing (..)\n\nmain =\n  div\n  [ styles\n    [ ( \"background\", \"red\" )\n    , ( \"height\", \"200px\" )\n    , ( \"width\", \"200px\" )\n    ]\n    [ pseudo \"::before\"\n      [ ( \"content\", \"'Hello'\" )\n      , ( \"font-size\", \"20px\" )\n      ]\n    , selector \"span\"\n      [ ( \"color\", \"blue\" )\n      ]\n    ]\n  ]\n  [ span [] [ text \"I'm a span!\" ]\n  ]\n\n```\n\nThe HTML equivalent of the following example:\n\n```html\n\u003cstyle\u003e\n  .s-001 {\n    background: red;\n    height: 200px;\n    width: 200px;\n  }\n\n  .s-001::before {\n    content: 'Hello';\n    font-size: 20px\n  }\n\n  .s-001 span {\n    color: blue;\n  }\n\u003c/style\u003e\n\u003cdiv class=\"s-001\"\u003e\n  \u003cspan\u003eI'm a span!\u003c/span\u003e\n\u003c/div\u003e\n```\n\n## FAQ\n\n#### Does this package provide functions for CSS properties or values like `elm-css` does?\nNo it just provides a way to apply the styles, how do you get them is up to you.\n\n#### Does it support `@keyframes`, `@media`, `@import` or `@font-face` rules?\nNot at this time. Support for these will be in a later version.\n\n## How it works?\nIn short it uses some parts of [CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model)\nto provide virtual-dom like implementation for styles.\n\nA more detalied explanation:\n\n* A `style` tag is created and appended to the `head`\n\n* A new setter `styles` is added to `Element.prototype` which does the following:\n  * it creates a unique class for it's element `s-000`\n  * using the previously created `style` tag, it creates rules for it's CSS and\n    it's selectors CSS and stores the reference to them\n  * in a subsequent render the rules are updates with new data\n\n* `Element.prototype.removeChild` and `Element.prototype.replaceChild` functions\n  are patched so when removing an element the created rules for it are\n  also removed.\n\n* The data for the styles are converted to a JS object with `Json.Encode` and then\n  passed to the `Element.prototype.styles` with `Html.Attribute.property`\n  function.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdotdesign%2Felm-html-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgdotdesign%2Felm-html-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdotdesign%2Felm-html-styles/lists"}