Introduction
Welcome to the UX Wizards Design System! We created this so we could build out future websites faster based on our brand and style guide. It is not a Javascript component library, but rather a CSS framework with prebuilt UI elements. As you look through our design system, you'll find usable code snippets with relevant HTML and/or CSS.
If you have any questions or feedback, feel free to create an issue on our Github project. If you need help creating an issue, please refer to the Github documentation
Installation and Usage
We include two CSS stylesheets depending on how opinionated you want the CSS to be. Use uxwcore.css for utility style usage. If you want UI elements to be automatically styled for you, we've included uxw.css for you as well. You must always include uxwcore.css because uxw.css is dependent on it. See below for a full example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://designsystem.uxwizards.org/uxwcore.css" rel="stylesheet">
<link href="https://designsystem.uxwizards.org/uxw.css" rel="stylesheet">
</head>
<body class="uxw-bg-merlins-beard-2">
<div style="display: flex; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center;">
<h1>Hello from UX Wizards!</h1>
<img width="200" height="200" src="https://designsystem.uxwizards.org/logo.png">
<p>Welcome to the sample page for the <a href="https://designsystem.uxwizards.org/">UX Wizards Design System</a></p>
</div>
</div>
</body>
</html>