Skip to content

02 Content

Jump to bottom
ねゆんせ edited this page Feb 28, 2023 · 1 revision

Image

<img class="kg__image" src="/flower.png" alt="Flower image" />

Class list

  • kg-thumbnail: This give an image a rounded 1px border appearance and 3px of padding.
  • kg-mha: This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.
  • mw: This applies width: 100vw; exclusively for mobile phones
  • kg w-: Applies a size to an image. 20, 30, 50, 100. example: w-50
  • kg br-: This applies a rounded border to the image, only 10 and 20 are accepted. example: br-10 or br-20

Language

One of the most important options of this framework is the possibility of using the lang attribute, this attribute allows changing the style of the text depending on the language.

In this case, two languages are used by default, the global and the Japanese language, to activate the Japanese typography just include the attribute inside a tag and the style will be in charge of including the corresponding font.

Lang attribute

プライマリ

<p lang="ja">プライマリ</p>

Also, if the site is intended to be entirely in Japanese, the lang attribute located in the html tag can be used.

Tags compatible with the Japanese text fonts of this framework.

  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • a
  • span
  • textarea
  • button

Typography

Fonts

Currently, only 1 typeface is used for the Japanese language and 2 for the global language.

Global fonts

  • Maven Pro
  • Baloo

Japanese fonts

  • Kosugi Maru

Baloo font

<p class="kg__text kg-Baloo">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

Underline

<p><span class="kg__text kg-underline">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

Bold

<p><span class="kg__text kg-bold">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

Vertical text

<p class="kg__text kg-vertical" lang="ja">遠い遠い昔、中近東の遠い村のこと。</p>
<p class="kg__text kg-vertical" lang="ja">戦士は立ち上がり、自分の名誉と家族のために戦った。</p>
<p class="kg__text kg-vertical" lang="ja">伝説とされる英雄であり、偉大な戦士である。</p>

Vertical text can also be used with the global font.

Remove marging and padding

<p class="kg__text kg-p__0 kg-m__0">HELLO WORLD</p>

Ampersand modification list

  • kg-underline: set the text to underline
  • kg-bold: set the text to bold
  • kg-vertical: set the text to vertical
  • kg-p__0: remove the padding
  • kg-m__0: remove the margin

Suported tags

  • p
  • span
  • a
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

Clone this wiki locally