feat (design-system):new design system section

design-system/halfmoon/CONTRIBUTING.md

@@ -0,0 +1,32 @@
+# Contributing to Halfmoon
+
+Please read this short document if you want to contribute to Halfmoon.
+
+## Our goal
+
+Before getting to the issues and pull requests, it is important to understand what the framework is trying to do.
+
+Halfmoon's stated goal is really simple - create a customizable frontend framework, with a built-in dark mode, that is great for building dashboards and tools. However, our other goals are more implicit:
+
+- Everything has to be **super functional and snappy**. Ideally, that means no performance issues and just consistently good execution. 
+- Everything has to **look good** as well, and have a **single, consistent style**.
+
+The most important thing here is building a **really good (looking) framework that also works very well**, and that should always be the top priority.
+
+## Issues
+
+Please keep the following things in mind when raising issues:
+
+- Feature requests are welcome. However, please make sure that the feature you are requesting falls under the scope of the project.
+-  **Do not** post personal support questions as issues. For those, use this [tag on Stack Overflow](https://stackoverflow.com/questions/tagged/halfmoon).
+- When raising an issue, please be as thorough as possible. For possible bugs, reproducible code is always a great sign.
+
+## Pull requests
+
+**Please ask first** before you put in work for a pull request. Things are constantly being worked on, and it is very difficult to share everything publicly in a meaningful way. So asking lets us avoid working on the same thing, or worse, someone putting in a lot of work for a PR that does not fit into the scope of the project. Please do not take this the wrong way; at this stage, the project needs strong leadership to become something special.
+
+The best way to ask is through email: [hey.halfmoon@gmail.com](mailto:hey.halfmoon@gmail.com). I am always open to proper discussions about the framework, especially when it comes to contributions and pull requests. 
+
+## License
+
+Any contribution you make will fall under the license being used by the framework: [MIT license](https://www.gethalfmoon.com/license/).

design-system/halfmoon/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Halfmoon UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

design-system/halfmoon/README.md

@@ -0,0 +1,95 @@
+# [Halfmoon](https://www.gethalfmoon.com)
+
+> Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
+
+- **Built-in dark mode**—Halfmoon comes with a built-in, toggleable dark mode, which is one of its most important and defining features.
+- **Fully customizable using CSS variables**—The framework is built entirely using CSS variables (also known as CSS custom properties). There are close to *1,500 CSS variables*, which means that almost everything can be customized by overriding a property, making it very easy to theme Halfmoon to fit your brand. [Learn more about customization](https://www.gethalfmoon.com/docs/customize/).
+- **Great for building dashboards and tools**—The components have a very standard look and feel to them, making them suitable for dashboards and tools. Moreover, a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. and there are also *tons of utilities* available.
+- **Optional JS library**—Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies, such as jQuery.
+- **Bootstrap like classes**—The class names should be instantly familiar to anyone who has used Bootstrap.
+- **Cross-browser compatibility**—Fully supports almost all the browsers under the sun, including really old ones like Internet Explorer 11.
+
+To learn more, go to [the documentation](https://www.gethalfmoon.com/docs/introduction/).
+
+## Quickstart
+
+The quickest way to get started with Halfmoon is by using the CDN to include the following files:
+
+```html
+<!-- Halfmoon CSS -->
+<link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css" rel="stylesheet" />
+<!--
+  Or,
+  Use the following (no variables, supports IE11):
+  <link href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon.min.css" rel="stylesheet" />
+-->
+
+<!-- Halfmoon JS -->
+<script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js"></script>
+```
+
+**Pleast note**, the JS file should be placed at the end of the `<body>` tag. Otherwise, some things may not work as expected. For example, using the `onclick="..."` event to call one of Halfmoon's built-in methods will not work **unless** the JS file is placed at the end of the `<body>` tag.
+
+## Using npm
+
+```
+npm install halfmoon
+```
+
+After installation, the required CSS and JS file can be imported in the following way:
+
+```javascript
+// Include CSS file
+require("halfmoon/css/halfmoon-variables.min.css");
+/*
+  Or,
+  Include the following (no variables, supports IE11):
+  require("halfmoon/css/halfmoon.min.css");
+*/
+
+// Import JS library
+const halfmoon = require("halfmoon");
+```
+
+Please note that manual initialization is required for some components, that is, after the DOM is loaded, the following method needs to be called:
+
+```javascript
+// Call this method after the DOM has been loaded
+halfmoon.onDOMContentLoaded();
+```
+
+This initializes all of the components that require JavaScript, such as dropdowns, custom file inputs, shortcuts, etc. 
+
+In this way, Halfmoon can be used with frameworks that use the virtual DOM, such as React and Vue. For instance, in the case of Vue, the `halfmoon.onDOMContentLoaded()` method would be called inside the `mounted()` hook of your component.
+
+## Using React
+
+If you are using React to call the built-in methods, such as `halfmoon.toggleSidebar()`, please make sure the call is made in a way that binds the correct context. There are two ways to do this:
+
+1.  Using an anonymous method: 
+
+    ```html
+    <button className="btn" type="button" onClick={() => halfmoon.toggleSidebar()}>
+    ```
+
+2.  Using `bind`:
+
+    ```html
+    <button className="btn" type="button" onClick={halfmoon.toggleSidebar.bind(halfmoon)}>
+    ```
+
+You can find more details in the [React documentation](https://reactjs.org/docs/faq-functions.html#why-is-binding-necessary-at-all).
+
+## Starter template generator
+
+You can use the [starter template generator](https://www.gethalfmoon.com/docs/page-building/#starter-template-generator) to generate boilerplates for your project. The generator takes your settings and adds the appropriate classes and defines the required containers and elements.
+
+Once again, we recommend reading [the documentation](https://www.gethalfmoon.com/docs/introduction/), as it contains a lot of examples to help you quickly build websites.
+
+## License
+
+Halfmoon is licensed under the [MIT](https://www.gethalfmoon.com/license/) license.
+
+## Copyright
+
+Copyright 2020, Halfmoon UI