Sirius is a framework based on Grid CSS and VueJs. Designed to aim for aesthetics and simplicity.

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 (Recommended)

yarn add sirius-ui

NPM

npm install sirius-ui

Git

git clone git@github.com:macmotp/sirius.git

Publishing Assets

You can publish a ready-to-go development example by running:

node_modules/sirius-ui/app/start/publish

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.js and 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

Open your main JavaScript endpoint file 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.

HTML Usage

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).

Development Scripts

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 yarn.

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.

Browser Support

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

Issues

Support only through Github. Please don't send emails about issues, make a Github issue instead.

Copyright and License

Copyright 2020 - 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.