Magic.css is targeted at dynamic pages such as social networks, dashboards and eCommerce sites, and offers unique components to make development easy.
For example, Magic includes a 'comment' component for handling the comments feed of a social post.
Magic.css also makes sure that each component can be customised to fit into any context.
For example, Magic comes with four default colours, as well as stylish and modern gradients for most components. This way, your page can be styled to match your brand.
Magic.css is, naturally, very responsive. Many components change shape and size completely to adapt to mobile, and this is also customisable.
For example, the Navbar changes completely on tablet and below. Try resizing this page to see the effect!
Setting up Magic is easy! Simply copy this code into 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">This page is created to provide extensive, beginner-friendly documentation on Magic. Each article is complete with examples and demonstrations. Get started:
DocumentationThis page is also, in fact, created with Magic, in order to show its capabilities. If you like anything you see, hit Ctrl + U to see the code - it's almost completely unaltered, 'vanilla' Magic.css.