Goku CSS

Getting started

Get up and running with Goku CSS in minutes. Choose your preferred installation method:

Package Manager

npm install goku-css

yarn add goku-css

Usage

Import the framework in your project:

// Basic import
import 'goku-css'

// Or use the complete build with docs styles
import 'goku-css/docs/index.css'

CDN

For quick prototyping, use our CDN:

<link rel="stylesheet" href="https://unpkg.com/goku-css@latest/css/goku.css">

Customization

Goku CSS is built with CSS custom properties, making it incredibly easy to customize. Change colors, spacing, typography, and more with simple variable overrides.

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

:root {
  --font-family: sans-serif;
  --font-weight: 400;
  --font-size: 1rem;
  --line-height: 1.5;
  --dark-primary-color: #ff8544;
  --dark-primary-color-text: #000;
  --dark-primary-color-active: #ffab70;
  --dark-secondary-color: #30e28c;
  --dark-secondary-color-text: #000;
  --dark-bg: #171a18;
  --dark-fg: #30443d;
  --dark-text: #d8d5d2;
  --dark-header-text: #f7fafc;
  --dark-input: #40584d;
  --dark-input-text: #fff;
  --dark-input-border: #80a48d;
  --dark-button: #ff8544;
  --dark-button-border: #ff8544;
  --dark-button-text: #1a202c;
  --dark-link: #ff8544;
  --light-primary-color: #ff8544;
  --light-primary-color-text: #171a18;
  --light-primary-color-active: #e6743a;
  --light-secondary-color: #066;
  --light-secondary-color-text: #fff;
  --light-bg: #e7ebe8;
  --light-fg: #fff;
  --light-text: #171a18;
  --light-header-text: #1a202c;
  --light-input: #f0fbf4;
  --light-input-text: #050505;
  --light-input-border: #d0dbd4;
  --light-button: #ff8544;
  --light-button-border: #ff8544;
  --light-button-text: #000;
  --light-link: #ff8544;
  --success-color: #48bb78;
  --warning-color: #ed8936;
  --error-color: #f56565;
  --border-radius: 12px;
  --border-width: 1px;
  --padding-t: 12px;
  --padding-r: 12px;
  --padding-b: 12px;
  --padding-l: 12px;
  --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: 4px;
  --margin-r: 4px;
  --margin-b: 4px;
  --margin-l: 4px;
  --margin-ratio2: 4;
  --margin-ratio3: 8;
  --margin: var(--margin-t) var(--margin-r) var(--margin-b) var(--margin-l);
  --grid-min-width: 250px;
  --gap: 4px;
  --gap-ratio2: 2;
  --gap-ratio3: 4;
  --shadow: 0 1px 3px 0 #788d8344, 0 1px 2px 0 #788d8344;
  --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);
  }
}

Interactive Playground

Try customizing Goku CSS live! Changes will apply immediately to this page.

Elements

Goku CSS provides beautiful defaults for all HTML elements out of the box. No classes needed - just write semantic HTML and get great-looking results.

Button

Buttons are styled with hover states, focus indicators, and disabled states for better accessibility.

Input

Form inputs are consistently styled with proper focus states and responsive design.

<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

Pre-built components that work seamlessly together. All components are built with accessibility in mind and work without JavaScript.

Accordion

Collapsible content sections. Use radio inputs for exclusive groups or checkboxes for independent toggles.

<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 fg-border">
  <input id="left-toggle" class="drawer-layout__input" type="checkbox">
  <div>
    <div class="fg p1 pb3 h no-border-radius">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  pb3">This is the main content.</div>

  <input id="right-toggle" class="drawer-layout__input" type="checkbox">
  <div>
    <div class="fg p1 pb3 h no-border-radius">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

Versatile dropdown menus with click and hover triggers. Automatically adapts to mobile with slide-up behavior.

<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>

If you use a button and click on it the dropdown will stay open while the button is focused else use a span or anchor to only open on hover. 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="fg">
    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="fg p1">content</div>

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

Utilities

Powerful utility classes for rapid prototyping and fine-tuning. Mix and match to create any design without writing custom CSS.

Animations

Built-in loading animations for better user feedback during async operations.

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

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

Semantic color system with automatic dark mode support. Each color comes with background, border, and text variants.

Flex

Powerful flexbox utilities for modern layouts. Responsive by default with mobile-first breakpoints.

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.

Grid

Modern CSS Grid utilities for 2D layouts. Perfect complement to flexbox for complex grid systems.

Basic grid container with auto-fit columns (uses --grid-min-width variable):

<div class="grid-fit g2">
  <div class="fg p1"></div>
  <div class="fg p1"></div>
</div>

Auto-fill vs auto-fit (auto-fill creates empty columns if space available):

<div class="grid-fill g2">
  <div class="fg p1"></div>
  <div class="fg p1"></div>
</div>

Column and row spanning for complex layouts:

<div class="grid-fit g2" style="grid-template-columns: repeat(4, 1fr);">
  <div class="fg p1 col-2">col-2</div>
  <div class="fg p1"></div>
  <div class="fg p1"></div>
  <div class="fg p1 col-3">col-3</div>
  <div class="fg p1"></div>
  <div class="fg p1 w">w</div>
</div>

Row spanning example:

<div class="grid-fit g2" style="grid-template-columns: repeat(2, 1fr);">
  <div class="fg p1 row-2">row-2</div>
  <div class="fg p1"></div>
  <div class="fg p1 row-3">row-3</div>
  <div class="fg p1"></div>
  <div class="fg p1"></div>
  <div class="fg p1"></div>
</div>

Available classes:

• grid - Basic grid container
• grid-fit - Auto-fit columns (uses --grid-min-width)
• grid-fill - Auto-fill columns (uses --grid-min-width)
• col-2, col-3 - Column spanning (2 or 3 columns)
• w - Span entire width
• row-2, row-3 - Row spanning (2 or 3 rows)
• g1, g2, g3 - Gap sizing (works with both flex and grid)

Note: The grid system uses CSS variables for flexibility. Set --grid-min-width to customize the minimum column width for auto-fit and auto-fill grids.

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