Omote

Tsubuyaki MOLEのつぶやき

マジメじゃない系

Windows7のcssのやつ

pnpx create-vite windows7

をして適当にエンター押してサクッと環境を整える。

pnpm install -D 7.css

↓

pnpm run dev

で起動しておく。

// main.js

import "7.css/dist/7.css"; // cssインポートしておく
import './style.css'

// 適当にマークアップ
document.querySelector('#app').innerHTML = `
  <div class="😄">
    <div class="😄😄">
      <button>Button</button>
    </div>

    <div class="😄😄">
      <div role="progressbar" class="animate">
        <div style="width: 60%"></div>
      </div>
    </div>

    <div class="😄😄">
      <div class="title-bar">
      <div class="title-bar-text">MOLE</div>
        <div class="title-bar-controls">
          <button aria-label="Minimize"></button>
          <button aria-label="Maximize"></button>
          <button aria-label="Close"></button>
        </div>
      </div>
    </div>
  </div>
`

cssも一応。

// style.css

.😄 {
  max-width: 500px;
  margin: 200px auto;
}

.😄😄 {
  margin-bottom: 40px;
}

スクリーンショット 2021-09-02 17.32.15.png

すげくね？

もっとコンポーネントあるみたい↓

公式 : https://khang-nd.github.io/7.css/

おわり。