├── .gitignore ├── LICENSE ├── README.md ├── elm.json └── src └── Css.elm /.gitignore: -------------------------------------------------------------------------------- 1 | elm-stuff/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD 3-Clause License 2 | 3 | Copyright (c) [year], [fullname] 4 | All rights reserved. 5 | 6 | Redistribution and use in source and binary forms, with or without 7 | modification, are permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above copyright notice, this 10 | list of conditions and the following disclaimer. 11 | 12 | * Redistributions in binary form must reproduce the above copyright notice, 13 | this list of conditions and the following disclaimer in the documentation 14 | and/or other materials provided with the distribution. 15 | 16 | * Neither the name of the copyright holder nor the names of its 17 | contributors may be used to endorse or promote products derived from 18 | this software without specific prior written permission. 19 | 20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Type-safe <style> tags for elm-lang/html 2 | 3 | When using `elm-reactor`, there's currently no way to (easily) include a CSS file for use by your view. The `elm-css` package allows you to code type-safe stylesheets in Elm and render them to your view like any other node. 4 | 5 | What makes `elm-css` "type-safe" is that all the IDs and classes used by your HTML nodes are set by functions that are built when your stylesheets are created. This ensures that they will match up. 6 | 7 | For example: 8 | 9 | ```elm 10 | type Id = MyId 11 | type Class = MyClass 12 | 13 | -- import a font 14 | imports = ["https://fonts.googleapis.com/css?family=Droid+Sans:400"] 15 | 16 | -- create a rule 17 | rule = 18 | { selectors = [Css.Class MyClass] 19 | , descriptor = [("font-family", "Droid Sans")] 20 | } 21 | 22 | -- create the stylesheet 23 | stylesheet = Css.stylesheet imports [rule] 24 | 25 | -- render some HTML that uses it 26 | render = 27 | Html.div [] 28 | [ stylesheet.node 29 | , div [ stylesheet.class MyClass ] [ Html.text "Droid Sans!" ] 30 | ] 31 | ``` 32 | 33 | List of currently supported features: 34 | 35 | * @import urls 36 | * Type selectors (e.g. "div") 37 | * Id selectors (e.g. "#content") 38 | * Class selectors (e.g. ".menu-item") 39 | * Descendant selectors (e.g. "div table") 40 | * Immediate child selectors (e.g. "hr > p") 41 | * Sibling selectors (e.g. "li ~ li") 42 | * Adjacent selectors (e.g. "br + p") 43 | * Pseudo classes and elements (e.g. "p:first-line:first-letter::after") 44 | -------------------------------------------------------------------------------- /elm.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "package", 3 | "name": "massung/elm-css", 4 | "summary": "Create type-safe