an ee.startup

what is genes.zone?

contact telegram twitter
genes:one
UI

Toolkit, Widgets

Some of the components need JS to function properly, they are below...

Up till this moment components were CSS-only, but for some practical functionality JS is necessary.
This being said, still trying to keep everything easy to handle, and use.

Close, Hide, Show, Toggle

Start with the simplest and the most you're actually going to need...

Let's see if you can get this with no explanation.
Even having said that these widgets need JS to work, you don't need to write JS to make them work.
Just stick to the format. That's it.


  <a class="button remove" data-remove=".alert.removable">Remove Error</a>
  <a class="button hide" data-hide=".alert.hidable">Hide Alert</a>
  <a class="button toggle" data-toggle=".alert.info">Toggle Info</a>

  <div class="alert info p2r mt2r dn">
	<h5 class="at">Alerts are cool.</h5>
	<p>Lorem ipsum dolor sit amet...</p>
  </div>

  <div class="alert p2r mt2r hidable">
	<a class="ax hide">×</a>
	<h5 class="at">Did you know, that these are the alerts?</h5>
	<p>Lorem ipsum dolor sit amet...</p>
  </div>

  <div class="alert error p2r mt2r removable">
	<a class="ax remove">×</a>
	<h5 class="at">Oh, no! Something very bad happened.</h5>
	<p>Lorem ipsum dolor sit amet...</p>
  </div>


          
Remove Error Hide Alert Toggle Info
Alerts are cool.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

×
Did you know, that these are the alerts?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

×
Oh, no! Something very bad happened.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Swapper, Tabs, Accordions

Show one thing, while you hide (or not) another, that is a swapper, you may call it tabs or accordions.

Accordions, Tabs are some hidden divs, and some links showing and hiding them.
Again, stick to the format, you got them.


  <div class="swapper tabs mt1r">
	<a class="swink swactive" data-swap=".swap_one">View One</a>
	<a class="swink" data-swap=".swap_two">Second View</a>
	<a class="swink" data-swap=".swap_three">Third Option</a>
	<div class="swap_one swonts swactive">
	  <p>Aut delectus ea incidunt...</p>
	</div>
	<div class="swap_two swonts">
	  <p>Non necessitatibus quia ratione...</p>
	</div>
	<div class="swap_three swonts">
	  <p>Ex placeat et numquam. Ut et ...</p>
	</div>
  </div>


          
View One Second View Third Option

Aut delectus ea incidunt quia esse beatae aut voluptatum. Et et ab est. Quod repudiandae quo voluptatem numquam incidunt et iusto fugiat. Debitis dolore laborum commodi mollitia tempore.

Non necessitatibus quia ratione iste veniam consequatur dicta. Aliquam quia ipsam voluptatum sed voluptatem. Reiciendis autem maiores nihil harum. Consectetur quis sit deleniti et quos rerum placeat fugit.

Ex placeat et numquam. Ut et unde aliquid rerum corrupti optio autem praesentium. Consequatur voluptatem et est autem necessitatibus maxime repellendus. Dolorem consectetur doloribus temporibus quo autem repellat. Architecto quia consequuntur ea consectetur tempore est voluptates nisi.


  <div class="swapper accordion mt1r">
	<a class="swink swactive" data-swap=".swap_one">View One</a>
	<div class="swap_one p1r swonts swactive">
	  <p>Aut delectus ea incidunt quia...</p>
	</div>

	<a class="swink" data-swap=".swap_two">Second View</a>
	<div class="swap_two p1r swonts">
	  <p>Non necessitatibus quia ratione...</p>
	</div>

	<a class="swink" data-swap=".swap_three">Third Option</a>
	<div class="swap_three p1r swonts">
	  <p>Ex placeat et numquam. Ut et unde ...</p>
	</div>
  </div>


          
View One

Aut delectus ea incidunt quia esse beatae aut voluptatum. Et et ab est. Quod repudiandae quo voluptatem numquam incidunt et iusto fugiat. Debitis dolore laborum commodi mollitia tempore.

Second View

Non necessitatibus quia ratione iste veniam consequatur dicta. Aliquam quia ipsam voluptatum sed voluptatem. Reiciendis autem maiores nihil harum. Consectetur quis sit deleniti et quos rerum placeat fugit.

Third Option

Ex placeat et numquam. Ut et unde aliquid rerum corrupti optio autem praesentium. Consequatur voluptatem et est autem necessitatibus maxime repellendus. Dolorem consectetur doloribus temporibus quo autem repellat. Architecto quia consequuntur ea consectetur tempore est voluptates nisi.

Dropdown Menu, Dropdown Anything

It is just a hidden div, that shows when you click something, wow.

Hovering menus were good, but clicking menus are greatest.
Plus, mobile users can not hover, so...
Don't be intimidated by the long sample. It renders the whole menu underneath. You'll need a part of it.


  <div class="dib dd_cont">
    <a class="button dd_toggle dd_drop_burg"></a>
    <div class="dd_menu dd_left dn">
    <a class="dd_item">Dashboard</a>
    <a class="dd_item">Users</a>
    ...
    <hr>
    <a href="api/logout" class="dd_item">Logout</a>
    </div>
  </div>
  <div class="dib dd_cont">
    <a class="button dd_toggle">Wonderful Menu</a>
    <div class="dd_menu dn">
    <a class="dd_item">Dashboard</a>
    <a class="dd_item">Users</a>
    ...
    <hr>
    <a href="api/logout" class="dd_item">Logout</a>
    </div>
  </div>
  <a class="button">Wonderful But Split Menu</a>
  <div class="dib dd_cont">
    <a class="button dd_toggle dd_drop"></a>
    <div class="dd_menu dn">
    <a class="dd_item">Dashboard</a>
    <a class="dd_item">Users</a>
    ...
    <hr>
    <a href="api/logout" class="dd_item">Logout</a>
    </div>
  </div>
  <div class="dib dd_cont">
    <a class="button dd_toggle dd_drop_3d"></a>
    <div class="dd_menu dn w32r">
    <a class="card dib w50p h16r">
      <img src="ui/img/ee-sample-1.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </a>
    <a class="card dib w50p h16r">
      <img src="ui/img/ee-sample-2.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </a>
    </div>
  </div>


          

Click to View Password

This is an easy one, but it prevents you double enter your password.

It's cool that this thing caught on, it was ridiculous to enter the password twice.
Peek if you want to double check if you can really enter whatever is on your mind.


  <input type="password" class="pass w20r" placeholder="Enter your password...">
  <a href="#" class="button pctv" data-pctv=".pass"></a>


          

Select Timezone, Preselected Selects

You don't need to study geography to decide your timezone...

There are timezone selections everywhere for dashboards, profiles or for fun.
You don't need to remeber which country you're at. Just match it with your local time.
Plus, with data-select attribute you can set any <select> with ".preselect" class with a value.


  <select id="timezone" name="timezone" class="tzs" data-select="3">
    <option>What time is it?</option>
  </select>

  <select name="Startup_City" class="preselect" data-select="Tallinn">
    <option>Startup Based In / Started In</option>
    <optgroup label="Top Cities">
      <option>Tallinn</option>
      <option>Tartu</option>
      <option>Narva</option>
      <option>Pärnu</option>
    </optgroup>
    <optgroup label="Other Cities">
      <option>Kohtla-Järve</option>
      <option>Viljandi</option>
      <option>Rakvere</option>
      <option>Maardu</option>
      <option>Sillamäe</option>
      <option>Kuressaare</option>
      <option>Valga</option>
      <option>Võru</option>
      <option>Jõhvi</option>
      <option>Haapsalu</option>
      <option>Keila</option>
      <option>Paide</option>
      <option>Saue</option>
      <option>Elva</option>
      <option>Põlva</option>
      <option>Tapa</option>
    </optgroup>
  </select>

          

Draggable Window

Now, this is a fancy one. And it is actually a practical solution for a proper problem.

Nothing gives more pleasure than a draggable UI component that you can throw around.
A draggable window can be an easy solution to provide a widget for quick data view, form input, settings and more..


  <div class="dr_window w30r hidable">
    <a class="hide wx">×</a>
    <div class="dr_window_title h4r bob1">
      <p class="title_text">Edit User: John Smith</p>
    </div>
    <div class="dr_window_content p1r">
      ...
    </div>
  </div>


          
×

Edit User: John Smith

Wait. What!? This is all?

Well, no, but, it is better if anything grows with need.

Yes, we all know many frameworks provide different boxes appearing side by side styled differently,
or many crazy components that no user finds practical, but the developers feel like they just accomplished something great.
There may be more to come. More that may be from some other great UI developers too.
Have patience. And request. Anything you think should be integrated.

×

Contact NodOnce : Say Something!