mirror of
https://github.com/mdgriffith/elm-ui.git
synced 2024-08-17 04:00:23 +03:00
2.4 KiB
2.4 KiB
CSS Concepts and where to find them
This library creates a new language around layout and style, though if you're already used to CSS, you're probably wondering where certain concepts lie.
I know how I can do it in CSS, but how could I approach the problem using Style Elements?
CSS | Style Elements | Description |
---|---|---|
position:absolute |
above , below , onRight , onLeft , inFront , behindContent |
In Style Elements we can attach elements relative to another element. They won't affect normal flow, just like position:absolute |
position:fixed |
inFront if it's attached to the Element.layout element. |
position:fixed needs to be at the top of your view or else it can break in seemingly random ways. Did you know position:fixed will position something relative to the viewport OR any parent that uses filter , transform or perspective ? So you add a blur effect and your layout breaks... |
z-index |
N/A | One of the goals of the library was to make z-index a behind-the-scenes detail. If you ever encounter a situation where you feel like you actually need it, let me know on slack or through the issues. |
float:left float:right |
alignLeft or alignRight when inside a paragraph or a textColumn |
|
opacity |
alpha |
|
margin |
N/A Instead, check out padding and spacing |
margin in CSS was designed to fight with padding . This library was designed to minimize override logic and properties that fight with each other in order to create a layout language that is predictable and easy to think about. The result is that in style elements, there's generally only one place where an effect can happen. |
:hover , :focus , :active |
mouseOver , focused , mouseDown |
Only certain styles are allowed to be in a pseudo state. They have the type Attr decorative msg , which means they can be either an Attribute or a Decoration . |
<form> |
N/a | Elm already has a mechanism for submiting data to a server, namely the Http package. There has been some mention that the form element might be beneficial accessibility-wise, which I'm definitely open to hearing about! |
onSubmit |
N/A | Similar to <form> , there is no onSubmit behavior. Likely if you're attempting to capture some of the keybaord related behavior of onSubmit , you're likely better just crafting a keyboard event handler in the first place! |