Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
<a target="_blank" class="text-link" href="https://csszero.lazaronixon.com/sounds">Click here to go to the example</a>
1
<%= link_to "Click here to go to the example", main_app.sounds_url, target: "_blank", class: "text-link" %>
CSS is not required or multiple files are needed, check the notes.
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Controller } from "@hotwired/stimulus"
import { play } from "https://esm.sh/cuelume@0.1.2?standalone"
export default class extends Controller {
  static values = { connect: String, disconnect: String }
  connect() {
    this.hasConnectValue && play(this.connectValue)
  }
  disconnect() {
    this.hasDisconnectValue && play(this.disconnectValue)
  }
  chime() {
    play("chime")
  }
  sparkle() {
    play("sparkle")
  }
  droplet() {
    play("droplet")
  }
  bloom() {
    play("bloom")
  }
  whisper() {
    play("whisper")
  }
  tick() {
    play("tick")
  }
  press() {
    play("press")
  }
  release() {
    play("release")
  }
  toggle() {
    play("toggle")
  }
  success() {
    play("success")
  }
  error() {
    play("error")
  }
  page() {
    play("page")
  }
  loading() {
    play("loading")
  }
  ready() {
    play("ready")
  }
}

Implementation

Dependencies