{"id":15066612,"url":"https://github.com/eseyfert/mirai-designs-framework","last_synced_at":"2026-04-11T15:38:04.076Z","repository":{"id":57127745,"uuid":"385592249","full_name":"eseyfert/mirai-designs-framework","owner":"eseyfert","description":"A modular framework written in Dart Sass and TypeScript.","archived":false,"fork":false,"pushed_at":"2021-08-27T14:41:04.000Z","size":351,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-09T00:24:05.869Z","etag":null,"topics":["css","framework","javascript","scss","typescript","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eseyfert.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-13T12:14:23.000Z","updated_at":"2021-08-27T14:41:07.000Z","dependencies_parsed_at":"2022-08-31T17:21:11.857Z","dependency_job_id":null,"html_url":"https://github.com/eseyfert/mirai-designs-framework","commit_stats":null,"previous_names":["miraidesigns/mirai-designs-framework"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eseyfert/mirai-designs-framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eseyfert%2Fmirai-designs-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eseyfert%2Fmirai-designs-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eseyfert%2Fmirai-designs-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eseyfert%2Fmirai-designs-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eseyfert","download_url":"https://codeload.github.com/eseyfert/mirai-designs-framework/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eseyfert%2Fmirai-designs-framework/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29060578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T22:28:58.191Z","status":"ssl_error","status_checked_at":"2026-02-03T22:28:56.515Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framework","javascript","scss","typescript","web"],"created_at":"2024-09-25T01:09:52.517Z","updated_at":"2026-02-03T22:35:24.433Z","avatar_url":"https://github.com/eseyfert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mirai Designs Framework\n\nA modular framework written in [Dart Sass](https://sass-lang.com/dart-sass) and [TypeScript](https://www.typescriptlang.org/).\\\nIt requires a basic understanding of Sass and TypeScript and how to compile both into usable CSS and JS.\\\nUse at your own risk. :sweat_smile:\n\n---\n\n## Modules\n\nModules are the individual components that makeup the framework.\\\nA few modules like `Base` or `Theme` are generally required by every single module but the idea is that you can pick and choose what you need for your project without creating bloat.\n\n### Installation\n\nUsing [NPM](https://www.npmjs.com), simply add the module(s) you require to your project.\n\n```\nnpm install @miraidesigns/button\n```\n\n### HTML\n\nMost modules have some sort of required HTML markup.\\\nCheck the module's documentation to see what that looks like.\\\nFor our example, let's use the `Button` module.\n\n```html\n\u003cbutton class=\"mdf-button\"\u003e\n    Button\n\u003c/button\u003e\n```\n\nAll we do is apply the `mdf-button` class to a regular `\u003cbutton\u003e` element and that's it.\n\n### Modifiers\n\nMost modules come with alternative or additional styles, known as modifiers.\\\nThey all follow the same pattern.\\\nLet's use the `Button` module again for this example.\n\n```html\n\u003cbutton class=\"mdf-button mdf-button--filled\"\u003e\n    Button\n\u003c/button\u003e\n```\n\nAs you can see, our `\u003cbutton\u003e` now has **2** classes.\\\nThe original `mdf-button` class and now a modifier class, identified by the connecting `--` symbol.\\\nWhenever a class contains the double dash symbol, it's a modifier class and requires the base class to be present.\n\n---\n\n### Sass\n\nEvery module has several Sass files that are used to configure that module's appearance and functionality.\n\n### Implementation\n\nIf the module has a style component to it, there are generally two ways to import it.\\\nYou can either use the `@forward` rule below and use the default styling...\n\n```scss\n@forward '@miraidesigns/button/styles';\n```\n\n...or apply the `@use` rule and overwrite the default values.\n\n```scss\n@use '@miraidesigns/button' with (\n    $variable: value\n);\n\n@include button.styles();\n```\n\nIt's very important to call the `.styles()` mixin after configuring the module so that the styles actually get applied.\n\n### Variables\n\nVariables are stored in the `_variables.scss` file and contain the module's default values.\\\nI recommend applying the `@use` method above if you would like to alter them instead of changing the defaults.\n\n### Functions\n\nFunctions are stored in the `_functions.scss` file.\\\nThey help us do certain tasks in an easier fashion or help our code stay easily readable and maintained.\\\nA very commonly used function is the `Theme` module's `prop` function.\\\nIt allows us to access one of the many `Theme` variables in an easy way.\n\n```scss\n// Import the module.\n@use '@miraidesigns/theme';\n\nbutton {\n    // Using `prop`, we apply our theme's primary text color.\n    color: theme.prop('primary');\n}\n```\n\n### Mixins\n\nMixins are stored in the `_mixins.scss` file.\\\nThey are reusable sets of styles and makeup our module's look.\\\nGenerally every parent, modifier and child has it's own mixin to easily separate them and avoid breaking changes.\\\nMost modules have the `styles()` mixin that creates the actual stylesheet rules and includes the various other mixins to create the final style.\n\n```scss\n// _mixins.scss\n\n// We create a few mixins to style our elements:\n@mixin base() {\n    color: red;\n}\n\n@mixin modifier() {\n    color: green;\n}\n\n@mixin child() {\n    font-size: 12px;\n}\n\n// Here we bring it all together:\n@mixin styles() {\n    .element {\n        @include base();\n\n        \u0026--modifier {\n            @include modifier();\n        }\n\n        \u0026__child {\n            @include child();\n        }\n    }\n}\n```\n\n---\n\n### TypeScript\n\nMost modules contain several Typescript `.ts` files that add additional functionality to the component.\\\nEvery readme covers the TypeScript properties and options, if present or required.\n\n### Implementation\n\nThere are just a few steps to add a TypeScript module to your app.\\\nFirst, we import the module we need, in our example we are using `MDFSelect`.\n\n```ts\nimport { MDFSelect } from '@miraidesigns/select';\n```\n\nNext, we initialize it and add the element that is associated with it.\n\n```ts\nnew MDFSelect(document.querySelector('.mdf-select'));\n```\n\nIn general, the modules are created to operate with a single element, but you can also apply it to a group of elements.\n\n```ts\nfor (const elem of document.querySelectorAll('.mdf-select')) {\n    new MDFSelect(elem);\n}\n```\n\nAnd what it looks like all together:\n\n```ts\n// Import the module.\nimport { MDFSelect } from '@miraidesigns/select';\n\n// Apply it to a single element.\nnew MDFSelect(document.querySelector('.mdf-select'));\n\n// Apply it to a group of elements.\nfor (const elem of document.querySelectorAll('.mdf-select')) {\n    new MDFSelect(elem);\n}\n```\n\n### Options\n\nOptions get applied to the element before it gets initialized and can change the module's functionality or appearance.\n\n```ts\nimport { MDFSelect } from '@miraidesigns/select';\n\n// Here we supply our options in the curly brackets.\nnew MDFSelect(document.querySelector('.mdf-select'), {\n    option: 'value',\n    option2: false\n});\n```\n\n### Properties\n\nProperties give you information about the various states and elements of the module and in many cases allow you to change them after the fact.\n\n```ts\nimport { MDFSelect } from '@miraidesigns/select';\n\n// Store the module's instance.\nconst select = new MDFSelect(document.querySelector('.mdf-select'));\n\n// Getting a property.\nconsole.log(select.disabled); // false\n\n// Setting a property.\nselect.disabled = true;\n```\n\n---\n\nAnd that's it. Thank you for your interest in this project of mine and I hope this will help you understand the framework a little more. ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feseyfert%2Fmirai-designs-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feseyfert%2Fmirai-designs-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feseyfert%2Fmirai-designs-framework/lists"}