UNPKG

roobie

Version:

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

github.com/kgrewee/roobie

kgrewee/roobie

55 lines (52 loc) • 3.44 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# Fade ## Classes ```html <span class="_fade">Fade</span> <span class="_fadet">Fade Top</span> <span class="_fadeb">Fade Bottom</span> <span class="_fadel">Fade Left</span> <span class="_fader">Fade Right</span> <span class="_fadetplus">Fade Top Plus</span> <span class="_fadebplus">Fade Bottom Plus</span> <span class="_fadelplus">Fade Left Plus</span> <span class="_faderplus">Fade Right Plus</span> <span class="_fadetl">Fade Top Left</span> <span class="_fadebl">Fade Bottom Left</span> <span class="_fadetr">Fade Top Right</span> <span class="_fadebr">Fade Bottom Right</span> ``` ## Usage <h2 id="animateMe" class="txtc _fadet">Animate me</h2> <div class="div row wrp jst-center _fadeb"> <span class="btn" onclick="Animation.animationById('animateMe', '_fade')">Fade</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadet')">Fade Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadeb')">Fade Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadel')">Fade Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fader')">Fade Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadetplus')">Fade Top Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadebplus')">Fade Bottom Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadelplus')">Fade Left Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_faderplus')">Fade Right Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadetl')">Fade Top Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadebl')">Fade Bottom Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadetr')">Fade Top Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadebr')">Fade Bottom Right</span> </div> ```html <h2 id="animateMe" class="txtc _fadet">Animate me</h2> <div class="div row wrp jst-center _fadeb"> <span class="btn" onclick="Animation.animationById('animateMe', '_fade')">Fade</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadet')">Fade Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadeb')">Fade Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadel')">Fade Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fader')">Fade Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadetplus')">Fade Top Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadebplus')">Fade Bottom Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadelplus')">Fade Left Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_faderplus')">Fade Right Plus</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadetl')">Fade Top Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadebl')">Fade Bottom Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadetr')">Fade Top Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_fadebr')">Fade Bottom Right</span> </div> ```