{"id":22237468,"url":"https://github.com/macmotp/sirius","last_synced_at":"2025-07-27T22:33:06.828Z","repository":{"id":57361941,"uuid":"88738706","full_name":"macmotp/sirius","owner":"macmotp","description":"Sirius UI - Framework based on Grid and VueJs","archived":false,"fork":false,"pushed_at":"2018-07-31T15:51:08.000Z","size":16356,"stargazers_count":23,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-24T05:34:03.737Z","etag":null,"topics":["css-framework","flexbox","laravel","sass","vuejs"],"latest_commit_sha":null,"homepage":"https://larastars.com/ui/sirius","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/macmotp.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-19T11:49:38.000Z","updated_at":"2022-03-01T07:53:04.000Z","dependencies_parsed_at":"2022-09-18T06:04:58.273Z","dependency_job_id":null,"html_url":"https://github.com/macmotp/sirius","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macmotp%2Fsirius","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macmotp%2Fsirius/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macmotp%2Fsirius/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macmotp%2Fsirius/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macmotp","download_url":"https://codeload.github.com/macmotp/sirius/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227843600,"owners_count":17827987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","flexbox","laravel","sass","vuejs"],"created_at":"2024-12-03T03:09:56.906Z","updated_at":"2024-12-03T03:09:57.631Z","avatar_url":"https://github.com/macmotp.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Sirius UI](https://larastars.com/ui/sirius)\n\n[![npm](https://img.shields.io/npm/v/sirius-ui.svg?style=flat-square)](https://www.npmjs.com/package/sirius-ui)\n[![npm](https://img.shields.io/npm/dt/sirius-ui.svg?style=flat-square)](https://www.npmjs.com/package/sirius-ui)\n[![twitter](https://img.shields.io/badge/twitter-%23areyousirius%3F-blue.svg?style=flat-square)](https://twitter.com/larastarsgalaxy)\n\n[![Sirius UI - Framework based on Grid and Vue](https://raw.githubusercontent.com/macmotp/sirius/master/app/assets/images/sirius_cover.png)](https://larastars.com/ui/sirius)\n\nSirius is a framework based on [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and [Vue](https://vuejs.org). Designed to aim for aesthetics and simplicity.\n\n[Documentation](https://larastars.com/ui/sirius)\n\nFeatures:\n\n```\n.\n├── sass\n│   ├── base\n│   │   ├── reset\n│   │   ├── config\n│   │   ├── functions\n│   │   ├── animations\n│   │   ├── general\n│   │   └── typography\n│   ├── elements\n│   │   ├── badge\n│   │   ├── banner\n│   │   ├── breadcrumb\n│   │   ├── button\n│   │   ├── checkbox\n│   │   ├── drawer\n│   │   ├── image\n│   │   ├── input\n│   │   ├── list\n│   │   ├── loader\n│   │   ├── menu\n│   │   ├── modal\n│   │   ├── notification\n│   │   ├── pagination\n│   │   ├── progress-bar\n│   │   ├── radio\n│   │   ├── ribbon\n│   │   ├── select\n│   │   ├── switch\n│   │   ├── tab\n│   │   ├── table\n│   │   ├── tag\n│   │   └── tooltip\n│   └── layouts\n│       ├── header\n│       ├── nav\n│       ├── footer\n│       ├── card\n│       └── helpers\n│\n├── Vue\n│   ├── components\n│   │   ├── Drawer\n│   │   ├── Flash\n│   │   ├── Menu Button\n│   │   ├── Modal\n│   │   ├── Notification\n│   │   ├── Pagination\n│   │   ├── Progress Bar\n│   │   └── Tabs\n│   └── mixins\n│       ├── Flash Interface\n│       └── Toggle Interface\n│\n└── documentation\n```\n\n## Installation for Stand-Alone projects\nCreate your new project directory:\n\n```bash\nmkdir new-project \u0026\u0026 cd new-project\n```\n\n### Fetch Sirius UI\nInstall Sirius with your favourite driver:\n\n#### Yarn (Recommended)\n```bash\nyarn add sirius-ui\n```\n\n#### NPM\n```bash\nnpm install sirius-ui\n```\n\n#### Git\n```bash\ngit clone git@github.com:macmotp/sirius.git\n```\n\n### Publishing Assets\nYou can publish a ready-to-go development example by running:\n\n```bash\nnode_modules/sirius-ui/app/start/publish\n```\n\nThis will install [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) as API for compilation and the Vue dependency.\nThe prompt will let you choose if you want NPM or Yarn as driver. Also, the script will copy a `webpack.mix.js` file and a `package.json` file that you can use as entry points for the compiler, as well as a boilerplate containing a `index.html`, and the two main `app.js` and `app.sass` files where Sirius UI is injected.\nIn these last two files you can customize your project as explained below. \n\n### SASS to CSS Customization\nOpen your main SASS endpoint file `src/sass/app.sass` where Sirius is imported.\n\n```sass\n/*\n *\n * File example: app.sass \n *\n */\n \n// Custom configuration of variables\n@import \"config.sass\"\n\n// Sirius UI\n@import \"~sirius-ui/dist/src/sass/sirius.sass\"\n```\n\nAs you can see, you should declare a `src/sass/config.sass` file on top of Sirius. By default Sirius has an analog `_config.sass` configuration file that can be overridden. Here there is an example of a custom implementation:\n\n```sass\n/*\n *\n * File example: config.sass \n *\n */\n\n// Border radius and border size of elements like button, card, form input, etc.\n$border-radius: 5px\n$border-size: 1px\n\n// Gap between articles and columns in a section grid\n$gap: 1em\n$column-gap: 1em\n\n// Theme Colors\n$primary: blue\n$secondary: purple\n\n// State Colors\n$success: green\n$warning: yellow\n$error: red\n\n// Grayscale Colors\n$black: black\n$white: white\n$gray: gray\n\n```\n\nThere are plenty of editable variables. You can either override the main ones (browse the original [config file](https://github.com/macmotp/sirius/tree/master/assets/sass/base/_config.sass)) or the more specific ones (browse specific elements).\n\n\n### Vue to Js Customization\nOpen your main JavaScript endpoint file `src/js/app.js` where Sirius is imported.\n\n```javascript\n/*\n *\n * File example: app.js \n *\n */\n\nimport Vue from 'vue'\nimport Sirius from 'sirius-ui'\n\nwindow.events = new Vue();\n\nVue.use(Sirius);\n\nnew Vue({\n    el: '#app',\n    components: {\n        Sirius\n    },\n    mounted() {\n        console.log(\"Sirius works!\")\n    }\n});\n```\nRemember to tell the Vue instance to use Sirius, and now you can use all the components in your html views.\n\n### HTML Usage\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eSirius UI\u003c/title\u003e\n    \u003clink href=\"./dist/min/app.min.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cdiv class=\"page\" id=\"sirius\"\u003e\n        \u003ch1\u003eSirius\u003c/h1\u003e\n        \u003ch3\u003eThis is a boilerplate. Start creating something awesome.\u003c/h3\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"./dist/min/app.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\nBy default, the Vue target element is called `sirius`, so if you need to use the compiled dist, remember to add this id to the parent div: `\u003cdiv class=\"page\" id=\"sirius\"\u003e`, (not the body element).\n### Development Scripts\nAfter you import Sirius into your project , compile your new assets by running:\n\n```sh\n# compile assets in development environment\nyarn dev\n\n# watch all files for changes in development environment\nyarn watch\n\n# compile and minify assets for production\nyarn production\n```\nIf you like NPM more, use `npm run` instead of `yarn`.\n\n## Integration in Laravel projects\nFor Laravel lovers (like me) you can easily integrate Sirius UI into your project. Add the SASS and Vue dependencies into you `resources/assets/` folder in the same way described above. Since Laravel Mix is installed by default, you can directly run your development scripts.\n\n## Browser Support\nSirius is compatible with:\n* Firefox, Chrome, Safari, Internet Explorer 11+, Opera for desktop\n* Android Chrome 42+, Android Firefox 37+, iOS 8+ for Mobile\n* Internet Explorer (10+) may experience some issues with grid design\n\n## Documentation\nBrowse the documentation online [here](https://larastars.com/ui/sirius).\n\n## Issues\nSupport only through Github. Please don't send emails about issues, make a Github issue instead.\n\n## Copyright and License\nCopyright 2018 - [Larastars](https://larastars.com) -  created by and maintained by [Marco Gava](https://www.linkedin.com/in/gavamarco).\nCode released under [LGPL-2.1 license](https://github.com/macmotp/sirius/blob/master/license.md).\nYou are free to use it in personal and commercial projects. The code can be forked and modified, but the original copyright author should always be included.\n\n#### powered by [Larastars](https://larastars.com) | [Official Documentation](https://larastars.com/ui/sirius) | [#areyousirius?](https://twitter.com/larastarsgalaxy)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacmotp%2Fsirius","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmacmotp%2Fsirius","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacmotp%2Fsirius/lists"}