minimumDesignSystem

G-CORE

呼び出すだけで最小限の UI ・ UX を。

Hello, World!

G-CORE へようこそ。

ここには、より「簡単」に「直感的に」操作できるアクセシビリティ機能を含んでいます。

さぁ、あなたのプロダクトでも呼び出してみましょう！

import G-CORE

以下のソースをHTMLのheadタグに追加してください。


      <link href="https://gamma-410.github.io/G-CORE/v3.css" rel="stylesheet">

たったこれだけで G-CORE の準備は完了しました。

早速、コーディングを始めましょう！

G-CORE

headLine

headLine は、そこにどのような情報が含まれているのかをユーザーに示す大切な表記です。

source

divに以下のように書くことによって実装できます。


      <div>
        <p>message</p>
        <h1>headLineTitle</h1>
        <p>detailText</p>
      </div>

terms

message と headLineTitle と detailText ではユーザーに抽象的情報を示すことができます。

message

message は短く、簡単に書くことが大切です。

headLineTitle

headLineTitle は具体的でもあり、短く書くと良いでしょう。

detailText

detailText では上の２つで説明できなかった情報を書きます。
１から２行程度が良いでしょう。

G-CORE

textBox

textBox は、G-CORE のテキストを調節する機能です。
テキスト以外に適応させてはいけません。

source

textBoxは、以下のように書くことによって機能させることができます。


      <textbox>
        <!-- any -->
      </textbox>

any の部分に、テキスト要素を追加していきます。

注意 : リスト要素では、うまく機能しません。 textBox を適応しないでください。

G-CORE

actions

actionComponent は、人々が目的を達成するのに役立ちます。

buttons

button は、アクションの実行をするとき非常に役立ちます。

form (input / textarea)

ユーザーは、テキストをUIに入力できます。

slider

ユーザーは、値の範囲から選択できます。

G-CORE

brBox

空白にしましょう。それが綺麗に見えるのなら。

source

brbox で br を囲んだ時に機能します。


      <brbox>
        <br>
      </brbox>

G-CORE

message

ユーザーに情報を伝えるためのコンポーネントです。
どのような状態かを瞬時に理解できるようにしましょう。

source

処理が完了しました。


      <g-card-s>
        <p>処理が完了しました！</p>
      </g-card-s>

処理に失敗しました。


      <g-card-e>
        <p>処理に失敗しました...</p>
      </g-card-e>

その他処理系でのコメント


      <g-card-m>
        <p>メンテナンス中です...!.</p>
      </g-card-m>

G-CORE

naviMenu

ユーザーが画面を移動する時に頻繁に使用するものです。
アイコンには、Google Fonts を利用します。

source

menu 要素内に a 要素を記述します。

span で示されているアイコンについては、https://fonts.google.com/icons をご参照ください。


      <menu>
        <a href="#"><span class="material-symbols-rounded">image</span></a>
        <a href="#"><span class="material-symbols-rounded">search</span></a>
        <a href="#"><span class="material-symbols-rounded">group</span></a>
        <a href="#"><span class="material-symbols-rounded">library_books</span></a>
      </menu>

image search group library_books