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

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

Checkbox

Tabs

learn how it works

1
2
3
Clock & Timer
Color Picker