Click the top right sidebar button to try it out. It's all about YOU, make it your own! It's still in beta tho, so you might experience bugs.

EFY Apps

Piped Music Converter Calculator Planner Text Editor

H1

H2

H3

H4

H5

H6

paragraph

linkabbr~~del~~dfneminsmark~~strike through~~smallstrong_sub^supunderlined<code>kbd

List item

List item
List item

List item

List item

List Item
List Item

List item

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

Details

Content

Summary

content

Progress & Meter

40% 5 / 10

hidden input

radio radio checkbox checkbox disabled

role=button

The logic behind it

Minimalism - no dependencies, efficient code
Modularity - users are in control
Accessible - not fully yet
Sounds & 3D Layers - cinematic & immersive experience
Touchscreen & convergence - 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

Can I use it on my own projects?

Yes, as long as you follow the AGPL 3.0 License

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

efy or

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

What 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...

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()

More coming soon...

This is just the beginning...

Icons

<i efy_icon="star"></i>

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

Select menu

Radio

Option 1 Option 2 Option 3

Checkbox

Option 4 Option 5 Option 6

Tabs

learn how it works