Skeleton-cssを拡張したい

Skeleton css が好きです。
しかし、bootstrap や bulma なら有る機能が無いので、いざレイアウトするときに二の足を踏むことがあります。
(そういう時は、だいたい bulma を使ってしまうのだけれども。)

というわけで使いまわしできるように、skeleton と一緒に読み込んで使うことを目的にした css を書いてみることにした。

参考

実装

今回作りたいのは、bootstrap なら card で定義されているようなもの。

実装物

armor.css
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
:root {
  --clip-border-color: #e1e1e1;
  --clip-bg-head-color: #c1c1c1;
}

div.clip {
  margin: 1rem 0;
  border: 3px;
  border-color: var(--clip-border-color);
  border-style: solid;
  border-radius: 6px;
  transition: max-height 1s ease-out;
}

div.clip > h1,
h2,
h3,
h4,
h5,
h6 {
  margin: auto;
}

div.clip > div.clip-head {
  padding: 0.5rem 1rem;
  margin: 0;
  background-color: var(--clip-bg-head-color);
  border-width: 0 0 3px 0;
  border-color: var(--clip-border-color);
  border-style: solid;
  border-radius: calc(0.25rem) calc(0.25rem) 0 0;
}

div.clip > div.clip-body {
  padding: 1rem;
}

div.clip.switch,
div.clip.switch-auto {
  max-height: 150px;
  overflow: hidden;
  text-overflow: clip;
}

div.clip.switch.on,
div.clip.switch-auto:hover {
  max-height: 100vh;
}

確認

deno-simple-server で簡易なサーバーを実行。

1
$ deno run --allow-read --allow-net https://raw.githubusercontent.com/notranspile-js/deno-simple-server/master/src/main.ts

テストの html を設置して作成した。css を skeleton に続けて読み込む。
長くなりすぎるので、抜粋。

index.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="ja">
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
      integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
      integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="armor.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="one-half column">
          <h4>Basic Page</h4>
          <p>
            This index.html page is a placeholder with the CSS, font and
            favicon. It's just waiting for you to add some content! If you need
            some help hit up the
            <a href="http://www.getskeleton.com">Skeleton documentation</a>.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="clip">
          <div class="clip-head">
            <h4>Basic Page</h4>
          </div>
          <div class="clip-body">
            <p>
              This index.html page is a placeholder with the CSS, font and
              favicon. It's just waiting for you to add some content! If you
              need some help hit up the
              <a href="http://www.getskeleton.com">Skeleton documentation</a>.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="one-half column" style="margin-top: 25%">
            <div class="clip switch-auto">
              <div class="clip-head">
                <h4>Basic Page</h4>
              </div>
              <div class="clip-body">
                <p>
                  This index.html page is a placeholder with the CSS, font and
                  favicon. It's just waiting for you to add some content! If you
                  need some help hit up the
                  <a href="http://www.getskeleton.com">Skeleton documentation</a
                  >.
                </p>
              </div>
            </div>
          </div>
          <div class="one-half column" style="margin-top: 25%">
            <div class="clip">
              <div class="clip-head">
                <h4>Basic Page</h4>
              </div>
              <div class="clip-body">
                <p>
                  This index.html page is a placeholder with the CSS, font and
                  favicon. It's just waiting for you to add some content! If you
                  need some help hit up the
                  <a href="http://www.getskeleton.com">Skeleton documentation</a
                  >.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

表示すると次のようになる。

この css を skeleton css の拡張として、公開してみました。
skeleton-armor という名前にしました。

GitHub - Octo8080/skeleton-armor: Extension of skeleton
Extens…

次からは、使い回していきます。
気が向けばもう少し拡張していくやもしれません。

ではでは。