NodOnce : Think · Make · Launch

an ee.startup

what is genes.zone?

contact telegram twitter
genes:one
UI

Usage

What do you need a new UI framework for? There are already great ones around. Well, yeah, but...

First of all, you don't. You don't need another framework for anything. Neither backend or frontend.
This does not generally come out of a "need", comes out of finding a simpler way for a pleasant shortcut.
So with that in mind, this is one of those options.
Maybe you like huge learning curves, mainstream development patterns, or anything that looks good on your CV, even though it may not be the thing you're actually looking for.
Well, it happens. But, this is not like that.

At least you can check this out too, it's not too hard. Well, not hard at all. You setup like this, and you're good to go:


  <script src="https://ui.genes.one/js/genes.js"></script>
  <link rel="stylesheet" href="https://ui.genes.one/css/genes.css">


          

Grid and Utilities

Do you remember all the classes for the layout you want to create, punk?! Do ya?!

Do you need complex math to arrange three boxes side by side?
.dib { display: inline-block; } // This makes things stick together side-by-side
.fw { width: 100%; } // full width
.fh { height: 100%; } // full height
.w10r { width: 10rem; } // widths and heights are given as 1-100rems and % percents.
.h10r { height: 10rem; } // because that is actually more than enough
.w20r { width: 20rem; } // the rest is simple calculations
.w-30r { width: calc(100% - 30rem); } // like this
You'll get the hang of it.

This is the sample below:


  <div class="fw h10r">
    <div class="dib w10r fh" style="background: orange;"></div>
    <div class="dib w20r fh" style="background: orangered;"></div>
    <div class="dib w-30r fh" style="background: slateblue;"></div>
  </div>


          

No one knows why you'll need to do this, but here it goes...
.p2r { padding: 2rem; } // paddings and margins are given as 1-10rems to from direction.
.mr10r { margin-right: 10rem; } // this margin-right, ml1r is margin-left, 1rem.
.w-60r { width: calc(100% - 60rem); } // width of this box is whatever is left of the total width after 60rems.


  <div class="fw h10r p2r" style="background: darkcyan;">
    <div class="dib w10r mr10r fh" style="background: orange;"></div>
    <div class="dib w10r mr10r fh" style="background: orangered;"></div>
    <div class="dib w10r mr10r fh" style="background: darkturquoise;"></div>
    <div class="dib w-60r fh" style="background: slateblue;"></div>
  </div>


          

A more realistic layout, 3 equal columns...
.w33p { width: 33.3333%; } // percentage based.


  <div class="fw h10r">
    <div class="dib w33p fh" style="background: lightcoral;"></div>
    <div class="dib w33p fh" style="background: lightseagreen;"></div>
    <div class="dib w33p fh" style="background: lightslategrey;"></div>
  </div>


          

3 equal columns with text alignment...
.tal { text-align: left; } // .taj, .tar and .tac are the others.
.bot1 { border-top: 0.01rem solid rgba(0, 0, 0, 0.1); } // thin border .bo1, .bol1, .bor1, .bob1.


  <div class="fw h10r mt1r">
    <div class="dib w33p fh tal p3r bot1" style="background: ivory;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque lacus, cursus nec posuere convallis, interdum ut sapien.</p>
    </div>
    <div class="dib w33p fh tac p3r bol1 bob1 bor1" style="background: lightgoldenrodyellow;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque lacus, cursus nec posuere convallis, interdum ut sapien.</p>
    </div>
    <div class="dib w33p fh tar p3r bot1" style="background: lightyellow;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque lacus, cursus nec posuere convallis, interdum ut sapien.</p>
    </div>
  </div>


          

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque lacus, cursus nec posuere convallis, interdum ut sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque lacus, cursus nec posuere convallis, interdum ut sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer neque lacus, cursus nec posuere convallis, interdum ut sapien.

Again a weird 3 column setup, variable height but middle aligned...
.valm { vertical-align: middle; } // .valt, .valb are the others.


  <div class="fw p1r" style="background: lightsteelblue;">
    <div class="dib w50p h6r valm" style="background: lightblue;"></div>
    <div class="dib w25p h4r valm" style="background: lightgreen;"></div>
    <div class="dib w25p h8r valm" style="background: lightpink;"></div>
  </div>


          

Utilities will probably grow with need.
But these ones mentioned, will probably be still here.

×

Contact NodOnce : Say Something!