A simple, unique, and responsive CSS framework, made with SASS.

Usage no npm install needed!

<script type="module">
  import magicalCss from '';



Magic.CSS is a simple and responsive CSS library, made with SASS. It's inspired by (though not directly derived from) Bootstrap and Materialize. Each component is made with minimal markup to increase neatness, and they come with extensive, user-friendly documentation.

npm version


To set up Magic on your website, simply add this to the <head> of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">

Please note that if a new version of Magic is released, your website will receive it automatically, which may mean that some parts of your page change. To get a fixed version, see the jsDelivr docs:

To install Magic, uncompiled SCSS, docs and more, do one of the following:

npm install magical-css
yarn add magical-css
bower install magical-css


For the proper functionality of Magic, please double check that the fonts are linked correctly at the start of dist/magic.css. If using a CDN, this works automatically.


Magical Library tries to avoid default styles (globally referencing elements rather than classes) wherever possible, to make it as non-destructive in complex projects as possible. Class names are designed to be very evident. For a full usage guide, see the Wiki of this repository.


Two fonts are used: Noto Sans by Google and Roboto by Christian Robertson.


To use Magic, you'll need to read the official documentation. It's currently available through Github pages at The documentation is, in fact, made with Magic!

That's it. Enjoy!