Installation for Stand-Alone projects
Create your new project directory:
mkdir new-project && cd new-project
Fetch Sirius UI
Install Sirius with your favourite driver:
yarn add sirius-ui
npm install sirius-ui
git clone firstname.lastname@example.org:macmotp/sirius.git
You can publish a ready-to-go development example by running:
This will install Laravel Mix as API for compilation and the Vue dependency.
The 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.sass files where Sirius UI is injected.
In these last two files you can customize your project as explained below.
SASS to CSS Customization
Open your main SASS endpoint file
src/sass/app.sass where Sirius is imported.
As 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:
There are plenty of editable variables. You can either override the main ones (browse the original config file) or the more specific ones (browse specific elements).
Vue to Js Customization
src/js/app.js where Sirius is imported.
Remember to tell the Vue instance to use Sirius, and now you can use all the components in your html views.
By 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:
class="page" id="sirius", (not the body element).
After you import Sirius into your project , compile your new assets by running:
# compile assets in development environment yarn dev # watch all files for changes in development environment yarn watch # compile and minify assets for production yarn production
If you like NPM more, use
npm run instead of
Integration in Laravel projects
For 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.
Sirius is compatible with:
- Firefox, Chrome, Safari, Internet Explorer 11+, Opera for desktop
- Android Chrome 42+, Android Firefox 37+, iOS 8+ for Mobile
- Internet Explorer (10+) may experience some issues with grid design
Support only through Github. Please don't send emails about issues, make a Github issue instead.
Copyright and License
Copyright 2019 - Larastars - created by and maintained by Marco Gava. Code released under LGPL-2.1 license. You 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.