H3
Paragraph inside an article
Bellow you can see examples of simple, commonly used HTML styled by efy:
A lot of boring text. In fact it's so boring that even if you find it funny while reading it, it will stay boring because it's pretty much useless. Reading it is a waste of time.
div { color: var(--text); background: var(--bg); }
div {
color: var(--text);
background: var(--bg);
}
Paragraph inside an article
paragraph inside blockquote
cite
Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
---|---|---|---|---|---|
Table footer | Table footer | Table footer | Table footer | Table footer | Table footer |
Table data | Table data | Table data | Table data | Table data | Table data |
Table data | Table data | Table data | Table data | Table data | Table data |
Table data | Table data | Table data | Table data | Table data | Table data |
Table data | Table data | Table data | Table data | Table data | Table data |
Table data | Table data | Table data | Table data | Table data | Table data |
Content
content
In any way you want, as long as you keep it open source and follow the AGPL 3.0 License here. Propper documentation is coming soon
EFY or
Or clear your browser's cache, try a different browser, device etc.
EFY is currently in Beta, so expect potential bugs. Features and apps that are unstable are usually marked this way:
Stable
efy
stands forNothing. It's just a name, like Andy or Izzy.
EFY
This is just the beginning...
default
Specific mode:
[efy_mode=light_sepia]
{ your css }
All light modes:
[efy_mode*=light]
{ your css }
Not this specific mode:
:not([efy_mode=light_sepia])
{ your css }
Remove selector if any light mode is on:
$('[efy_mode*=light] #your_selector')
.remove()
$add('Tag
', {Attributes
}, ['Text
', Children
], Parent
, 'Position
')
Only Tag
is required. Other parameters are optional
Tag
- html tag like: div, p, img etc
Attributes
- one or multiple html attributes like: class, type, height etc
Text
- text content
Children
- nested html tags
Parent
- parent of the tag where it should be added. If not specified it defaults to the body tag
Position
- where the tag should be added in relationship to the parent:
beforebegin , afterbegin , beforeend , afterend
Add an empty button to body after all existent children
$add('button')
Add a css styled button inside the #test selector, before other children
$add('button'
, {style:'background: red; padding: 20rem'
}, ['Text'
], $('#test'
),'afterbegin'
)
Range input with some attributes before #test ends
$add('input'
, { type:'range'
, value:'50'
, min:'0'
, max:'100'
, step:'1'
, class:'test'
, id:'test'
, style:'margin: 0; padding: 15rem'
}, [], $('#test'
) )
2 nested buttons inside a div
$add('div'
, {}, [ $add('button'
, {}, ['1'
]), $add('button'
, {}, ['2'
]) ] )
This is just the beginning...
Add an <i>
tag with an [efy_icon]
attribute containing your icon code from bellow
Example:
<i efy_icon
="star
"></i>
Radio
Checkbox
This element explains stuff