JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 71
  • Score
    100M100P100Q67125F
  • License MIT

magically playful, yet simple styling. all in one file.

Package Exports

  • magick.css
  • magick.css/magick.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (magick.css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

magick.css

magically playful, yet simple styling. all in one file.


a wizard

Translations

Feel free to contribute a translation to your language!

What is magick.css?

magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.

The framework retains its beauty and functionality across all devices and screen sizes, and works entirely without JavaScript. It is inspired by LaTeX, old school TTRPG rulebooks, CSS frameworks like concrete.css and Tufte CSS and the "usability as design" ethic of brutalism.

What does it look like?

You can find a live example of magick.css being used on my website!

How do I use magick.css?

magick.css is built with normalize.css. While it will look 90% correct without, it is recommended to use normalize.css.

CDN

The easiest way to check out magick.css for your own project is to add it from a CDN. Just add these two lines to your html <head>:

<link rel="stylesheet" href="https://unpkg.com/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/magick.css">

Local File

You could also just download the magick.css file from this repo, and include it into your html <head> as you normally would:

<link rel="stylesheet" href="path/to/magick.css">

JS/NPM

You could also add magick.css to your JS project like this:

npm install normalize.css magick.css

And import them in your code:

import 'normalize.css'
import 'magick.css'