@joystick.js/ui

index.css

How to configure and use the base CSS file for your Joystick app.

At the root of your app, the index.css file serves as the base CSS file for your entire app. When you run joystick create <app_name>, a template file is generated automatically, including some basic styles and a light reset for default browser styles.

This file should include all of the global CSS for your app (e.g., Tailwind, Bootstrap, or other frameworks). You can also import other CSS files from the /css directory at the root of your app (an optional directory you can create to organize additional global CSS files).

Example Usage

/index.css

// @import('/css/some-other-global.css');

:root {
  --brand: #ffcc00;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
}

body {
  min-height: 100dvh;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  background: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}