Bellow you can see examples of simple, commonly used HTML styled by efy:

image
image + figcaption

H1

H2

H3

H4

H5
H6

paragraph

linkabbrdeldfneminsmarkstrike throughsmallstrongsubsupunderlined<code>kbd
  • List item
    • List item
    • List item
  • List item
  1. List item
    1. List Item
    2. List Item
  2. List item
Definition list
dt
dd
Navigation

Section

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.

Pre
div {
  color: var(--text);
  background: var(--bg);
}
Pre > Code
div {
  color: var(--text);
  background: var(--bg);
}
Article

H3

Paragraph inside an article

Blockquote

paragraph inside blockquote

cite

Table headingTable headingTable headingTable headingTable headingTable heading
Table footerTable footerTable footerTable footerTable footerTable footer
Table dataTable dataTable dataTable dataTable dataTable data
Table dataTable dataTable dataTable dataTable dataTable data
Table dataTable dataTable dataTable dataTable dataTable data
Table dataTable dataTable dataTable dataTable dataTable data
Table dataTable dataTable dataTable dataTable dataTable data
Details

Content

Summary

content

Progress & Meter
40% 5 / 10

role=button
The logic behind it
  • Minimalism - no dependencies, efficient code
  • Modularity - users are in control, billions of possible patterns
  • Accessible - not fully yet
  • Sounds & 3D Layers - cinematic & immersive experience
  • Touchscreen & Convergence - works on (almost) all devices, hovering or using a cursor are not requirements for interracting with the ui, usually not fully taken into consideration by devs & frameworks. Here it is!
  • Transparency - semitransparent multilayers, support for os integration with transparent windows
  • Searchable & open on demand - to reduce physical space and help you focus
  • Private - all data stays on your device
  • Supports both the https:// and file:/// protocols - most frameworks don't do that, we do, so you can use the apps statically & offline too, without any server, compiling, nodejs etc. required.
How do I use it on my own projects?

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

I see glitches or errors. How do I reset it?

EFY or

Or clear your browser's cache, try a different browser, device etc.

How do I repport bugs or share my ideas?

On Github or Matrix. Try to specify how you encountered the bugs, on what device, browser etc. And for ideas, why they should be implemented and what use cases they have.

Is it stable / production-ready?

EFY is currently in Beta, so expect potential bugs. Features and apps that are unstable are usually marked this way:


Stable


- unavailable now, but expected to come up
- unsafe to use, lots of bugs
- safer to use, less bugs
What the name efy stands for

Nothing. It's just a name, like Andy or Izzy.

Add a background image

EFY

More coming soon...

This is just the beginning...

Learn how to use efy
[efy_mode]
  • It sets the mode, the default value is default
  • Options: light_light , light_sepia , light_trans , dark_dark , dark_nord , dark_black , dark_trans

Structure

  • 1st part: can be light or dark to indicate the general mode
  • 2nd part: indicates the specific type of light / dark mode: light sepia trans dark nord black
  • trans = Transparent - it makes the background invisible so that you can see behind the window (if your web engine, browser or operating system supports it) or the image you choose from the sidebar menu

Examples

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
- create html

$add('Tag', {Attributes}, ['Text', Children], Parent, 'Position')

Structure

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

Examples

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'])
    ]
)
More coming soon...

This is just the beginning...

Components
Icons

Add an <i> tag with an [efy_icon] attribute containing your icon code from bellow

Example:

<i efy_icon="star"></i>
Color Picker
Clock & Timer
Select menu

Radio

Checkbox

Tabs

This element explains stuff

1
2
3