Extra Tools

Jet CSS

Jet.css is my small Cascade Style Sheet for styling HTML. It is still under development, and full documentation is
coming soon.
It follows a style similar to the Tailwind CSS framework, where each class adds only a single property.
Classes are shortened to one or two characters plus a property after a dash.

A few examples:

  • p-1 — padding: 1rem
  • bs-1 — box-shadow: 1 (degree of shadow depth)
  • bg-blue-l-3 — background color: blue, lighter, level 3 (every color can have 5 degrees:
    d for darker, l for lighter)

Subscribe above to be notified when the full documentation is ready.

Animate

Jet.js includes a simple scrollspy animation based on classes (a more powerful system based on
attributes is coming soon). You can add two classes to any element in your template to apply an animation effect
when the element appears in the viewport.

  • ja — initializes the animation on a single element
  • jag — initializes group animation (children animated one by one)

You also need to add an animation class together with ja or jag.

Currently,** jet.css** includes a basic set of animations. You can include the** jet.min.js (which has all
Jet classes), or just include jet-animation.min.css**, or even create your own animations (instructions
below).

Available Animation Classes

Class Behavior
ja-fade-in Smoothly appears from transparent
ja-fade-in-bottom Appears smoothly from the bottom
ja-fade-in-top Appears smoothly from the top
ja-fade-in-left Appears smoothly from the left
ja-fade-in-right Appears smoothly from the right
ja-scale-in-center Scales in from the center
ja-scale-in-hor-center Scales horizontally from center
ja-scale-in-ver-center Scales vertically from center
ja-scale-in-ver-top Scales vertically from top

The difference between ja (Jet Animation) and jag (Jet Animation Grouped)

ja triggers a simple animation on the element itself.
jag triggers animations on child elements one by one with a 250ms delay. You should add
jag to the parent element.

Example

<ul class="fd-c g-05 jag ja-fade-in-right">
    <li> Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
    <li> Dolores explicabo corporis tempora ut ex quo odit quaerat voluptates.</li>
    <li> Qui minima perspiciatis rem rerum dolore ut dicta nulla.</li>
    <li> Ut aspernatur sequi aut odit nesciunt ut inventore nulla ex voluptates.</li>
    <li> Id deleniti quae est cupiditate nihil ex suscipit explicabo et praesentium</li>
</ul>

Result(move it down and up again – animation play every time when element is in viewport)

 

How to create your own animation

The quickest and easiest way is to use the wonderful service Animista (opens in a new tab)

Steps:

  • Select an animation you like
  • Adjust parameters (duration, timing-function, etc.)
  • Click the Generate {.} button at the top right and copy the class and keyframes
    Important: – Do not use the generated class exactly as it is! You must make some modifications:
  • Add the trigger class jp(jet play)
  • Add the prefix ja- before your animation name(This is necessary for the script will recognize the animation.)

Example of the final class:

.jp.ja-flip-horizontal-bottom {
    -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

Using SCSS to shorten

.jp {
    &.ja-flip-horizontal-bottom {
        -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    &.ja-next-class {
        //...
    }

    &.ja-another-next-class {
        //...
    }
}

 

Leave a Reply