Customizing Moebius

SCSS structure

bash

moebius/
├── src/
│   ├── assets/
│   │   ├── scss
│   │   │   ├── abstracts
│   │   │   ├── base
│   │   │   ├── components
│   │   │   ├── layout
│   │   │   ├── pages
│   │   │   └── main.scss
│   └── main.ts
└── index.html

Moebius relies on the powerful Sass features and a modular structure, letting you handle complex styles in a breeze. You need to import all the SCSS partials into your core file. This is how SCSS files are organized. Partial SCSS file names always start with an underscore like this: _button.scss . They act as chunks of code that you can import only if you need them. Of course some of them are mandatory for the project to work. Moebius is a UI kit in which each SCSS file serves a different purpose:

abstracts: holds all files related to SCSS variables, mixins, default global styles and other typography settings.
components: holds all files related to Moebius Components. Each component has its own file.
layout: holds all basic and mandatory layout files. The project will break if you omit one of those files.
pages: holds all the specific styles for each demo or group of demos.

Import SCSS in Vue

In order to load stylesheets into our application, we simply need to import css, sass or scss files in the main.ts file

typescript

// file: ./src/main.ts

// ...

import '@fortawesome/fontawesome-free/scss/fontawesome.scss'
import '@fortawesome/fontawesome-free/scss/regular.scss'
import '@fortawesome/fontawesome-free/scss/solid.scss'
import '@fortawesome/fontawesome-free/scss/brands.scss'
import 'lightgallery.js/dist/css/lightgallery.css'
import 'vue-toastification/dist/index.css'

import '/@src/assets/scss/main.scss'

// ...

TIP

All imported files here are to be converted in css, optimized using postcss, and injected automatically in index.html at build and run time.

Bulma Integration

Bulma is fully integrated with Moebius. This means that when you change the $primary Moebius color variable and any Bulma related variable to take precedence over it. The variable changes you make will be applied to all native Bulma elements.

Native Dark Mode

Moebius comes with a native Dark mode. This means that all components are pre-styled for dark mode. You don't have to worry about it, when you turn it on, the colors change seamlessly. Dark mode styling is made through a global .is-dark class added to the page <body> element. Dark mode styling is centralized into a single file, _dark.scss. You can remove this file from the imports if you do not want to use Dark mode in your project. Dark mode is toggled on the body by a simple javascript function. In a real world implementation, the body would have to be rendered by the server with the proper class before being served to the client, based on the user selection.

Lazyloading SCSS Pages

bash

moebius/
├── src/
│   ├── assets/
│   │   ├── scss/
│   │   │   ├── pages/
│   │   │   │   ├── _landing.scss
│   │   │   │   ├── _login.scss
│   │   │   │   └── _wizard.scss
│   │   │   └── main.scss

The pages folder holds the template pages that are not required by the main chat application.

They are not added by default to main.scss, instead we lazyload them in layouts:

html

<!-- file ./src/layouts/WizardLayout.vue -->
<script lang="ts">
  // ...
</script>

<template>
  <!-- ... -->
</template>

<style lang="scss">
  /* files imported in components will be loaded only once they are needed */
  @import '../assets/scss/pages/wizard';
</style>

Customizing Moebius ​

SCSS structure ​

Import SCSS in Vue ​

Bulma Integration ​

Native Dark Mode ​