{"id":15059701,"url":"https://github.com/thinkalexandria/css-in-elm","last_synced_at":"2025-04-10T05:41:35.646Z","repository":{"id":57674736,"uuid":"112525227","full_name":"ThinkAlexandria/css-in-elm","owner":"ThinkAlexandria","description":"Write CSS styles with Elm","archived":false,"fork":false,"pushed_at":"2024-10-07T00:10:24.000Z","size":5210,"stargazers_count":9,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T05:33:55.119Z","etag":null,"topics":["cli","css","css-preprocessor","elm-lang"],"latest_commit_sha":null,"homepage":"","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/ThinkAlexandria.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":"2017-11-29T20:37:30.000Z","updated_at":"2024-10-07T00:09:29.000Z","dependencies_parsed_at":"2025-02-16T17:49:33.818Z","dependency_job_id":null,"html_url":"https://github.com/ThinkAlexandria/css-in-elm","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkAlexandria%2Fcss-in-elm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkAlexandria%2Fcss-in-elm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkAlexandria%2Fcss-in-elm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkAlexandria%2Fcss-in-elm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThinkAlexandria","download_url":"https://codeload.github.com/ThinkAlexandria/css-in-elm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166256,"owners_count":21058475,"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":["cli","css","css-preprocessor","elm-lang"],"created_at":"2024-09-24T22:46:48.611Z","updated_at":"2025-04-10T05:41:35.611Z","avatar_url":"https://github.com/ThinkAlexandria.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fork notice\nThis is a fork of [elm-css](https://github.com/rtfeldman/elm-css). Elm-css is\nabandoning support for generating CSS files and moving to locally scoped CSS\nrules. The original author believes the new locally scoped design is the One\nTrue Way and will be devoting his energy to the new design. This fork is ensure\nthat the 11.x branch (the last version before the design change) of css-in-elm\nwill be ported to future versions of Elm. This fork is commited to maintaining\nthe old stylesheet generating design forward into future versions of Elm.\n\nIf you like using Elm to write CSS rules, i.e. you like the power and\nflexibility of a fully featured functional programming language compared to\nSass, Less, or other css preprocessors, then this is the project for you.\n\n\n\n[![Logo](./assets/logo.png)](http://package.elm-lang.org/packages/ThinkAlexandria/css-in-elm/latest)\n\n# css-in-elm [![Version](https://img.shields.io/npm/v/css-in-elm.svg)](https://www.npmjs.com/package/css-in-elm) [![Travis build Status](https://travis-ci.org/ThinkAlexandria/css-in-elm.svg?branch=master)](http://travis-ci.org/ThinkAlexandria/css-in-elm) [![AppVeyor build status](https://ci.appveyor.com/api/projects/status/0j7x0mpggmtu6mms/branch/master?svg=true)](https://ci.appveyor.com/project/ThinkAlexandria/css-in-elm/branch/master)\n\n# Quick Start\nTry it out! (make sure you already have [elm](http://elm-lang.org) and elmi-to-json installed, e.g. with `npm install -g elm elmi-to-json`)\n\n```\n$ npm install -g css-in-elm\n$ git clone https://github.com/ThinkAlexandria/css-in-elm.git\n$ cd css-in-elm/examples\n$ css-in-elm\n$ less homepage.css\n```\n\nA gentle introduction to some of the features of `css-in-elm` is also available in\n[the tutorial](Tutorial.md).\n\n# About\n\n`css-in-elm` lets you define CSS in Elm.\n\nHere's an example of how to define some `css-in-elm` styles:\n\n```elm\nmodule MyCss exposing (..)\n\nimport Css exposing (..)\nimport Css.Elements exposing (body, li)\nimport Css.Namespace exposing (namespace)\n\n\ntype CssClasses\n    = NavBar\n\n\ntype CssIds\n    = Page\n\n\ncss =\n    (stylesheet \u003c\u003c namespace \"dreamwriter\")\n    [ body\n        [ overflowX auto\n        , minWidth (px 1280)\n        ]\n    , id Page\n        [ backgroundColor (rgb 200 128 64)\n        , color (hex \"CCFFFF\")\n        , width (pct 100)\n        , height (pct 100)\n        , boxSizing borderBox\n        , padding (px 8)\n        , margin zero\n        ]\n    , class NavBar\n        [ margin zero\n        , padding zero\n        , children\n            [ li\n                [ (display inlineBlock) |\u003e important\n                , color primaryAccentColor\n                ]\n            ]\n        ]\n    ]\n\n\nprimaryAccentColor =\n    hex \"ccffaa\"\n```\n\nHere's what you can do with this code:\n\n* You can *generate a `.css` file from it.*\n* You can *use it to generate type-checked inline styles.*\n* You can *share `NavBar` and `Page`* with your Elm view code, so your classes and IDs can never get out of sync due to a typo or refactor.\n* You can *move this code into your view file* and have your styles live side-by-side with your view functions themselves.\n\n`css-in-elm` works hard to prevent invalid styles from being generated; for example,\nif you write `color \"blah\"` or `margin (rgb 1 2 3)`, you'll get a type mismatch. If you write `(rgb 3000 0 -3)` you'll get a build-time validation error (RGB values must be between 0 and 255) if you try to compile it to a stylesheet.\n\n`css-in-elm` draws inspiration from the excellent [Sass](http://sass-lang.com/), [Stylus](http://stylus-lang.com/), and [CSS Modules](http://glenmaddern.com/articles/css-modules). It includes popular features like:\n\n* [Mixins](http://package.elm-lang.org/packages/ThinkAlexandria/css-in-elm/latest/Css#mixin)\n* [namespaces](http://package.elm-lang.org/packages/ThinkAlexandria/css-in-elm/latest/Css-Namespace#namespace)\n* [nested media queries](https://davidwalsh.name/write-media-queries-sass) (and nested selectors in general, like how [Sass](http://sass-lang.com/) does them)\n\nThere are two popular approaches to using it; you can use either or combine both of these, depending on your needs and preferences.\n\n#### Approach 1: Inline Styles\n\nOne way to use `css-in-elm` is for inline styles, using the `asPairs` function:\n\n```elm\nstyles =\n    Css.asPairs \u003e\u003e Html.Attributes.style\n\nbutton [ styles [ position absolute, left (px 5) ] ]\n    [ text \"Whee!\" ]\n```\n\nThis approach is the simplest way to get started with `css-in-elm`. One advantage of inline styles is that these can be dynamically changed at runtime; a limitation is that CSS pseudo-classes and pseudo-elements cannot be used with inline styles.\n\n#### Approach 2: Generating CSS files\n\nYou can also use `css-in-elm` as a CSS preprocessor which generates separate .css files.\n\nTo do this, you will need to create a special directory at the top level of\nyour process to contain an elm application used only to generated CSS files.\n\n    mkdir css\n    cd css/\n    elm init\n\nThen you will need to install both the node module and the Elm library:\n\n    npm install -g css-in-elm\n    elm package install ThinkAlexandria/css-in-elm\n\nFinally you'll need a special file with a port for `css-in-elm` to access inside the `css/src` directory:\n\n```elm\nmodule Stylesheets exposing (..)\n\nimport MyCss\nimport HomepageCss\n\nfileStructure =\n        [ ( \"index.css\", [ MyCss.css ] )\n        , ( \"homepage.css\", [ Homepage.css, MyCss.css ] )\n        ]\n\n```\n\nRun `css-in-elm` from the root of your project (containing the css directory).\nThen include that css file in your web page.\n\nThe above `css-in-elm` stylesheet compiles to the following .css file:\n\n```css\nbody {\n    overflow-x: auto;\n    min-width: 1280px;\n}\n\n#dreamwriterPage {\n    background-color: rgb(200, 128, 64);\n    color: #CCFFFF;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    padding: 8px;\n    margin: 0;\n}\n\n.dreamwriterNavBar {\n    margin: 0;\n    padding: 0;\n}\n\n.dreamwriterNavBar \u003e li {\n    display: inline-block !important;\n    color: #ccffaa;\n}\n```\n\n### Examples\n\nThere are a few examples to check out!\n\n- [json-to-elm](https://github.com/eeue56/json-to-elm) which can see be seen live [here](https://noredink.github.io/json-to-elm)\n- the [examples](https://github.com/ThinkAlexandria/css-in-elm/tree/master/examples) folder, which contains a working project with a README\n- the example above\n\n#### Using `css-in-elm` with Elm view code\n\nHere's how to use `css-in-elm` in your projects:\n\nIn your Elm code, use the same union types to represent classes and ids. Then they can't get out of sync with your CSS. To do this, you'll need special versions the of `id`, `class`, and `classList` functions from `elm-html`.\n\n\n#### Missing CSS properties\n\n`css-in-elm` is still in development. Not all CSS properties have been added yet.\nIf you run into this problem, `css-in-elm` includes the `property` function. It takes\ntwo `Strings`; the property key, and its value.\n\n**e.g.**\n\nWe want `z-index`, but suppose `css-in-elm` did not implement it. We would define it ourselves:\n\n```elm\nimport Css exposing (..)\n\nzIndex : Int -\u003e Mixin\nzIndex i =\n    property \"z-index\" \u003c| toString i\n```\n\nNow `zIndex 9999` is available to use inside our `Stylesheet`.\n\n## Related Projects\n\n* [Elm CSS Normalize](https://github.com/scottcorgan/css-in-elm-normalize)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkalexandria%2Fcss-in-elm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthinkalexandria%2Fcss-in-elm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinkalexandria%2Fcss-in-elm/lists"}