magical-css

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


Keywords
sass, framework, css, magical, responsive, css-framework, html, scss
License
CNRI-Python-GPL-Compatible
Install
npm install magical-css@0.7.2

Documentation

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.

npm version

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!