Magic.CSS
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.
Setup
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="https://cdn.jsdelivr.net/npm/magical-css@latest/dist/magic.css">
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: https://www.jsdelivr.com.
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
Clone https://github.com/palkerecsenyi/magic.git
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.
Usage
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.
Attributions
Two fonts are used: Noto Sans
by Google and Roboto
by Christian Robertson.
Documentation
To use Magic, you'll need to read the official documentation. It's currently available through Github pages at https://palkerecsenyi.github.io/magic/docs/. The documentation is, in fact, made with Magic!
That's it. Enjoy!