https://github.com/gdotdesign/elm-html-styles
Add CSS styles to your HTML!
https://github.com/gdotdesign/elm-html-styles
css elm style
Last synced: over 1 year ago
JSON representation
Add CSS styles to your HTML!
- Host: GitHub
- URL: https://github.com/gdotdesign/elm-html-styles
- Owner: gdotdesign
- Created: 2017-02-19T06:50:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-20T10:08:49.000Z (about 9 years ago)
- Last Synced: 2025-03-24T06:51:52.059Z (over 1 year ago)
- Topics: css, elm, style
- Language: Elm
- Homepage:
- Size: 43.9 KB
- Stars: 8
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# elm-html-styles
[](https://travis-ci.org/gdotdesign/elm-html-styles)
This package helps you to add CSS styles simply and dynamically to HTML
elements.
## Installation
Add `gdotdesign/elm-html-styles` to your dependencies:
```json
"dependencies": {
"gdotdesign/elm-html-styles": "1.0.0 <= v < 2.0.0"
}
```
And install with [elm-github-install](https://github.com/gdotdesign/elm-github-install)
using the `elm-install` command.
## Usage
This package provides the `Html.Styles` module which exposes the following
three functions:
#### `styles : List (String, String) -> List Style -> Html.Attribute msg`
This function takes two arguments:
* the first is a list of property-value pairs (tuple) which will be applied to
the main element (this is much like the `Html.Attribute.style` function)
* the second is a list of sub selectors where each can be either a sub selector
(like descendant or child selector) or a pseudo selector
#### `pseudo : String -> List (String, String) -> Style`
This functions returns a `Style` to use in the `styles` function above, it is
used to style pseudo elements of the main element. It takes two arguments:
* the first is the pseudo selector `::before`, `::after`, `::placeholder`, etc...
* the second are the property-value paris (tuple) for the selector
#### `selector : String -> List (String, String) -> Style`
This functions returns a `Style` to use in the `styles` function above, it is
used to style sub elements of the main element. It takes two arguments:
* the first is the pseudo selector `span`, `> div`, `li + li`, etc...
* the second are the property-value paris (tuple) for the selector
## Example
This is a minimal example on how to use this package:
```elm
import Html.Styles exposing (..)
import Html exposing (..)
main =
div
[ styles
[ ( "background", "red" )
, ( "height", "200px" )
, ( "width", "200px" )
]
[ pseudo "::before"
[ ( "content", "'Hello'" )
, ( "font-size", "20px" )
]
, selector "span"
[ ( "color", "blue" )
]
]
]
[ span [] [ text "I'm a span!" ]
]
```
The HTML equivalent of the following example:
```html
.s-001 {
background: red;
height: 200px;
width: 200px;
}
.s-001::before {
content: 'Hello';
font-size: 20px
}
.s-001 span {
color: blue;
}
I'm a span!
```
## FAQ
#### Does this package provide functions for CSS properties or values like `elm-css` does?
No it just provides a way to apply the styles, how do you get them is up to you.
#### Does it support `@keyframes`, `@media`, `@import` or `@font-face` rules?
Not at this time. Support for these will be in a later version.
## How it works?
In short it uses some parts of [CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model)
to provide virtual-dom like implementation for styles.
A more detalied explanation:
* A `style` tag is created and appended to the `head`
* A new setter `styles` is added to `Element.prototype` which does the following:
* it creates a unique class for it's element `s-000`
* using the previously created `style` tag, it creates rules for it's CSS and
it's selectors CSS and stores the reference to them
* in a subsequent render the rules are updates with new data
* `Element.prototype.removeChild` and `Element.prototype.replaceChild` functions
are patched so when removing an element the created rules for it are
also removed.
* The data for the styles are converted to a JS object with `Json.Encode` and then
passed to the `Element.prototype.styles` with `Html.Attribute.property`
function.