Getting started

yarn add goku-css or npm install goku-css

import 'goku-css'

import 'goku-css/docs/index.css'

Customization

You can modifiy any CSS variable directly with CSS or with Javascript with something like:

document.documentElement.style.setProperty('--primary-color', '#FFFFFF')

:root {
  --font-family: sans-serif;
  --font-weight: normal;
  --font-size: 1em;
  --line-height: 1.25;
  --dark-primary-color: #f84;
  --dark-primary-color-text: #000;
  --dark-primary-color-active: #fb8;
  --dark-secondary-color: #555;
  --dark-secondary-color-text: #fff;
  --dark-bg: #1a1a1a;
  --dark-fg: #282828;
  --dark-text: #bbb;
  --dark-header-text: #fff;
  --dark-input: #444;
  --dark-input-text: #fff;
  --dark-input-border: #666;
  --dark-button: #f84;
  --dark-button-border: #f84;
  --dark-button-text: #1a1a1a;
  --dark-link: #f84;
  --light-primary-color: #f84;
  --light-primary-color-text: #000;
  --light-primary-color-active: #f84;
  --light-secondary-color: #ddd;
  --light-secondary-color-text: #000;
  --light-bg: #fff;
  --light-fg: #f6f6f6;
  --light-text: #444;
  --light-header-text: #000;
  --light-input: #eee;
  --light-input-text: #000;
  --light-input-border: #ddd;
  --light-button: #f84;
  --light-button-border: #f84;
  --light-button-text: #1a1a1a;
  --light-link: #f84;
  --success-color: #4b4;
  --warning-color: #e84;
  --error-color: #e54;
  --border-radius: 4px;
  --border-width: 1px;
  --padding-t: 8px;
  --padding-r: 8px;
  --padding-b: 8px;
  --padding-l: 8px;
  --padding-ratio2: 2;
  --padding-ratio3: 3;
  --padding: var(--padding-t) var(--padding-r) var(--padding-b) var(--padding-l);
  --padding-input: calc(var(--padding-t) / 2) var(--padding-r) calc(var(--padding-b) / 2) var(--padding-l);
  --margin-t: 1px;
  --margin-r: 1px;
  --margin-b: 1px;
  --margin-l: 1px;
  --margin-ratio2: 32;
  --margin-ratio3: 64;
  --margin: var(--margin-t) var(--margin-r) var(--margin-b) var(--margin-l);
  --gap: 1px;
  --gap-ratio2: 4;
  --gap-ratio3: 8;
  --shadow: 0 0 3px 2px #8883;
  --drawer-width: 300px
}

:root {
  --primary-color: var(--light-primary-color);
  --primary-color-text: var(--light-primary-color-text);
  --primary-color-active: var(--light-primary-color-active);
  --secondary-color: var(--light-secondary-color);
  --secondary-color-text: var(--light-secondary-color-text);
  --color-bg: var(--light-bg);
  --color-fg: var(--light-fg);
  --color-text: var(--light-text);
  --color-header-text: var(--light-header-text);
  --color-input: var(--light-input);
  --color-input-text: var(--light-input-text);
  --color-input-border: var(--light-input-border);
  --color-button: var(--light-button);
  --color-button-border: var(--light-button-border);
  --color-button-text: var(--light-button-text);
  --link-color: var(--light-link);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: var(--dark-primary-color);
    --primary-color-text: var(--dark-primary-color-text);
    --primary-color-active: var(--dark-primary-color-active);
    --secondary-color: var(--dark-secondary-color);
    --secondary-color-text: var(--dark-secondary-color-text);
    --color-bg: var(--dark-bg);
    --color-fg: var(--dark-fg);
    --color-text: var(--dark-text);
    --color-header-text: var(--dark-header-text);
    --color-input: var(--dark-input);
    --color-input-text: var(--dark-input-text);
    --color-input-border: var(--dark-input-border);
    --color-button: var(--dark-button);
    --color-button-border: var(--dark-button-border);
    --color-button-text: var(--dark-button-text);
    --link-color: var(--dark-link);
  }
}

Try to change those variables

Elements

You don't need to do do anything for the basic HTML elements. They are already styled based on the values of CSS variables.

Button

Input

<div class="group flex g1 my2">
  <input type="radio" name="radio" id="radio1">
  <label for="radio1" class="flex-1 text-center">
    Radio 1
  </label>
  <input type="radio" name="radio" id="radio2">
  <label for="radio2" class="flex-1 text-center">
    Radio 2
  </label>
  <input type="radio" name="radio" id="radio3">
  <label for="radio3" class="flex-1 text-center">
    Radio 2
  </label>
</div>

File

<label class="label__file">
  Dropbox file input
  <input type="file">
</label>

Range

Link

List

• breadcrumb
• link

<ul class="breadcrumb">
  <li>Home</li>
  <li><a href="#">link</a></li>
</ul>

Nav

Use the vertical class to have a vertical nav.

<nav class="p2 fg">
  <div>Nav</div>
  <input type="text" placeholder="search">
  <div class="content">
    <a href="#">home</a>
    <a href="#">about</a>
    <button name="button">button</button>
  </div>
  <input id="nav-toggle2" type="checkbox">
  <label class="toggle" for="nav-toggle2">
    <div></div>
    <div></div>
    <div></div>
  </label>
</nav>

Progress

Select

Table

Components

Accordion

Use radio inputs for a group of accordion or checkbox to toggle the accordions one by one.

<div class="accordion">
  <label for="accordion1" class="accordion fg fg-border group">Click accordion</label>
  <input id="accordion1" type="checkbox" class="p1">
  <div class="p1 bg" style="height: 1.5em;">
    Accordion content
  </div>
</div>

Drawer

<div class="drawer-layout">
  <input id="left-toggle" class="drawer-layout__input" type="checkbox">
  <div>
    <div lass="fg p1 pb3 h">This is the left drawer.</div>
    <label class="drawer-layout__toggle absolute bottom left" for="left-toggle">
      <div class="bar"></div>
      <div class="bar"></div>
    </label>
  </div>

  <div class="flex-4  fg pb3">This is the main content.</div>

  <input id="right-toggle" class="drawer-layout__input" type="checkbox">
  <div>
    <div class="fg p1 pb3 h">This is the right drawer.</div>
    <label class="drawer-layout__toggle mirror absolute bottom right" for="right-toggle">
      <div class="bar"></div>
      <div class="bar"></div>
    </label>
  </div>
</div>

Dropdown

<div class="dropdown">
  <input id="dropdown1" type="checkbox">
  <label for="dropdown1">Click Dropdown</label>
  <div class="p2">
    <div>Item 1</div>
    <div>Item 2</div>
    <label for="dropdown1" class="m0 p1">Collapse</label>
  </div>
</div>

Add "right" next to the dropdown class to open from the right.

<div class="dropdown" tabindex="0">
  <button>Hover Dropdown, you can use button, span or a.</button> 
  <div class="p2">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

Add the class icon to remove the arrow.

<div class="dropdown icon" tabindex="0">
  <span>
    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" height="32">
      <circle cx="8" cy="8" r="7" stroke="#888" fill="none"/>
      <circle cx="8" cy="5.5" r="3" fill="#888"/>
      <ellipse cx="8" cy="12" rx="6" ry="3" fill="#888"/>
    </svg>
  </span>
  <div class="p2">content</div>
</div>

Add the class -mobile or -desktop next to dropdown to have a mobile/desktop only dropdown

Modal

<div class="modal">
  <div>last child</div>
</div>

Tabs

<div class="tabs g3">
  <a>link 1</a>
  <a class="active">link 2</a>
  <a>link 3</a>
  <a>link 4</a>
</div>
<div class="py1">content</div>

<div class="tabs g1 mt2">
  <label for="tab1">
    Radio 1
    <input type="radio" name="tabs" id="tab1">
  </label>
  <label for="tab2" class="secondary">
    Radio 2
    <input type="radio" name="tabs" id="tab2">
  </label>
  <label for="tab3">
    Radio 3
    <input type="radio" name="tabs" id="tab3">
  </label>
  <label for="tab3">
    Radio 4
    <input type="radio" name="tabs" id="tab4">
  </label>
</div>
<div class="secondary p1">content</div>

<div class="tabs g1 mt2">
  <button>button 1</button>
  <button class="secondary">button 2</button>
  <button>button 3</button>
  <button>button 4</button>
</div>
<div class="secondary p1">content</div>

Utilities

The utilities classes used in those elements are the one displayed on each element.

Borders

You can add/remove the border-radius on an element with the utility class no-border-radius or border-radius.

The class group will add the radius and remove the radius of the children.

The classes bt, br, bb, bl will add a border to the element, "b" is for border then add the side "t" for top, "r" for right, "b" for bottom, and "l" for left.

Colors

Flex

Use the flex-auto class inside an element containing the flex class to automatically fill the space and adapt the orientation to the window size.
Use the classes g1, g2, g3 to add a gap based on the margins values.

You can also use flex-* where * is a digit from 1 to 8.

Use flex-column on the parent if you want to take all the width and stack your elements.

Use flex-row to keep row direction on small screen.

Use flex-wrap to show overflowing elements on a new line.

Use flex-center to align everything in the center.

Overflow

Keep text on one line with the line class.

Portrait

Position

Change the position property with the classes absolute, fixed, relative, static, sticky and set the side position to 0 with top, right, bottom, left or to 100% with top-100, right-100, bottom-100, left-100.

Size

The w class takes 100% of the width and the h class takes 100% of the height.

Spacing

You can try to add x, y, t, r, b or l before the size of the margin or padding to affect only some sides (e.g. my1, px1). For the margin, if you don't specify a size, like m or mx, the margin will be set to auto.

Shadow

Animations

Loading

<button class="pulse-bg">button</button>
<button class="spin">button</button>
<button class="pulse-bg spin">button</button>