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

40 lines (37 loc) • 2.25 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
# Slide ## Classes ```html <span class="_slidet">Slide Top</span> <span class="_slideb">Slide Bottom</span> <span class="_slidel">Slide Left</span> <span class="_slider">Slide Right</span> <span class="_slideoutt">Slide Out Top</span> <span class="_slideoutb">Slide Out Bottom</span> <span class="_slideoutl">Slide Out Left</span> <span class="_slideoutr">Slide Out Right</span> ``` ## Usage <h2 id="animateMe" class="txtc _slidet">Animate me</h2> <div class="div row wrp jst-center _slideb"> <span class="btn" onclick="Animation.animationById('animateMe', '_slidet')">Slide Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideb')">Slide Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slidel')">Slide Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slider')">Slide Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutt')">Slide Out Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutb')">Slide Out Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutl')">Slide Out Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutr')">Slide Out Right</span> </div> ```html <h2 id="animateMe" class="txtc _slidet">Animate me</h2> <div class="div row wrp jst-center _slideb"> <span class="btn" onclick="Animation.animationById('animateMe', '_slidet')">Slide Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideb')">Slide Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slidel')">Slide Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slider')">Slide Right</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutt')">Slide Out Top</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutb')">Slide Out Bottom</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutl')">Slide Out Left</span> <span class="btn" onclick="Animation.animationById('animateMe', '_slideoutr')">Slide Out Right</span> </div> ```