{"id":15112151,"url":"https://github.com/nightrunner91/nightvue","last_synced_at":"2026-01-19T18:01:48.192Z","repository":{"id":38345187,"uuid":"293740972","full_name":"nightrunner91/nightvue","owner":"nightrunner91","description":"Vue based simple and pretty boilerplate for Front-end developement","archived":false,"fork":false,"pushed_at":"2023-02-02T15:58:04.000Z","size":2128,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T18:14:18.417Z","etag":null,"topics":["boilerplate","flexbox","grid","node-sass","scss","scss-framework","scss-mixins","vue","vue-cli","vue-framework","vue-router","vuejs","vuex"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nightrunner91.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":"2020-09-08T07:57:02.000Z","updated_at":"2022-11-16T11:35:14.000Z","dependencies_parsed_at":"2023-02-17T21:46:11.509Z","dependency_job_id":null,"html_url":"https://github.com/nightrunner91/nightvue","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/nightrunner91/nightvue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightrunner91%2Fnightvue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightrunner91%2Fnightvue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightrunner91%2Fnightvue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightrunner91%2Fnightvue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nightrunner91","download_url":"https://codeload.github.com/nightrunner91/nightvue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nightrunner91%2Fnightvue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28578952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T17:42:58.221Z","status":"ssl_error","status_checked_at":"2026-01-19T17:40:54.158Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["boilerplate","flexbox","grid","node-sass","scss","scss-framework","scss-mixins","vue","vue-cli","vue-framework","vue-router","vuejs","vuex"],"created_at":"2024-09-26T00:42:07.860Z","updated_at":"2026-01-19T18:01:48.168Z","avatar_url":"https://github.com/nightrunner91.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/N6EM6CE.png\" alt=\"Presentation\" width=\"300\" height=\"284\"\u003e\n\u003c/p\u003e\n\n# Introduction 👋\n\nNightVue is a “crystal clear” development framework for [Vue.js 2.x](https://ru.vuejs.org/v2/guide/), powered by [Vue CLI 4.x](https://cli.vuejs.org/), a user-friendly tool for Vue.js development. \n\nUnlike many other frameworks that come with pre-built components and styles, NightVue provides maximum flexibility for creating custom web interfaces. It is designed for developers who prefer to start from scratch. NightVue provides tools for you to use as you see fit. \n\nFor developers seeking a framework with ready-to-use UI solutions, we recommend popular options such as [BootstrapVue](https://bootstrap-vue.org/), [Vuetify](https://vuetifyjs.com/en/), [Vue Material](https://www.creative-tim.com/vuematerial/). However, please check out our documentation as NightVue may still be the framework you need.\n\n# What's Included? 📦\n\n**Modules:**\n* vue.js v2.6.11\n* vue-cli v.4.5.0\n* vuex v3.4.0\n* vue-router v2.6.11\n* axios v0.24.0\n* eslint v6.7.2\n* svg-sprite-loader v6.0.11\n* lodash v4.17.21\n* babel 10.1.0\n* vue2-touch-events v3.2.2\n* vue-waves-effect v1.0.0\n\n**Features:**\n* Hot-reload dev server\n* Well organized file structure\n* Bunch of Sass mixins and functions\n* ESLint validator\n* Router layouts support\n* Router pages transition\n* Flexbox grid\n* Normalize.css\n* SVG sprite loader\n* Images loader\n* Fonts loader\n\n# Getting Started 🖱\n\nClone repo and install dependencies\n```\ngit clone https://github.com/nightrunner91/nightvue.git\nnpm i\n```\nRun hot-reload dev server\n```\nnpm run serve\n```\nBuild your project\n```\nnpm run build\n```\nTest or test and fix errors\n```\nnpm run lint\nnpm run lint --fix\n```\n\n# File Structure 📂\n\nThis is default NightVue file structure. We followed to the principles of modularity and extensibility during the development and recommend that you follow them aswell.\n```\n.\n├── public\n├── src\n│   ├── assets\n│       ├── fonts\n│       ├── icons\n│       └── images\n│   ├── components\n│       ├── Footer\n│       ├── Header\n│       └── SvgIcon\n│   ├── layouts\n│       AppLayout.vue\n│       AppLayoutDefault.vue\n│       AppLayoutFull.vue\n│   ├── router\n│       └── modules\n│       index.js\n│       RouterView.vue\n│   ├── store\n│       └── modules\n│       index.js\n│   ├── styles\n|       ├── @core\n│           └── helpers\n│           _functions.scss\n│           _mixins.scss\n│           _variables.scss\n│           globals.scss\n│           normalize.scss\n│           typography.scss\n│       ├── animations\n│       ├── components\n│       └── sections\n│       nightvue.scss\n│       style.scss\n│   └── views\n│       Home.vue\n│   App.vue\n│   main.js\n```\nLet's take a look at the crucial parts of framework.\n\n* `src/assets` folder includes any types of assets you are using in your project, such as icons, fonts, images, files etc. NightVue uses set of Webpack and Sass loaders to easy serve and manage them\n* `src/components` folder includes [reusable Vue components](https://vuejs.org/guide/essentials/component-basics.html). By default this folder already includes **Header**, **Footer** and **SvgIcon** components as examples\n* `src/layouts` folder includes different layout types for your project\n* `src/router` folder includes [Vue Router](https://router.vuejs.org/) files\n* `src/store` folder includes [Vuex](https://vuex.vuejs.org/) files\n* `src/styles` folder includes stylesheets, Sass functions and mixins, usefull utilities.\n  * `src/styles/@core` folder includes crucial NightVue Sass mixins, functions and code generators to work with\n    * `src/styles/@core/helpers` - the folder includes SCSS files that generates utility classnames to use in HTML (grid, spacers, text styles, colors etc.)\n    * `src/styles/@core/globals.scss` - this is key file where we import all **functions**, **mixins** and **variables** from so-called files at the same directory\n    * `src/styles/@core/typography.scss` file describes all text styles (headings, displays, paragraphs, fonts etc)\n    * `src/styles/@core/normalize.scss` makes browsers render all elements more consistently and in line with modern standards. It is basicly slightly modified SCSS version of widely used [Normalize.css](https://necolas.github.io/normalize.css/)\n  * `src/styles/animations` folder includes [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)\n  * `src/styles/components` folder includes styles for reusable components like buttons, dropdowns, inputs, avatars, modals, alerts, etc.\n  * `src/styles/sections` folder includes styles for \"big\" and unique parts like: header, footer, article, hero, etc.\n  * `src/styles/nightvue.scss` file includes all NightVue settings, styles and code generators\n  * `src/styles/style.scss` is file where you can write your own styles\n* `src/views` folder includes Vue pages you are using in your project. By default it's only **Home.vue** page\n* `src/App.vue` is the root Vue file\n* `src/main.js` is the file where you import and register components, directives, styles, plugins etc.\n\n# Documentation 📚\n\n* [Layout](#layout)\n* [Grid](#grid)\n* [Typography](#typography)\n* [Position](#position)\n* [Display](#display)\n* [Spacing](#spacing)\n* [Sizing](#sizing)\n* [Colors](#colors)\n* [Gradients](#gradients)\n* [Opacity](#opacity)\n* [Icons](#icons)\n* [Radius](#radius)\n* [Shadows](#shadows)\n* [Z-index](#z-index)\n* [Transitions](#transitions)\n* [Animations](#animations)\n* [Rotations](#rotations)\n* [Utilities](#utilities)\n\n## Layout\n\nVue.js doesn't provide layout functionality by default, but people found [the way to do it](https://markus.oberlehner.net/blog/dynamic-vue-layout-components/), which is realy great. We also combined this method with [Vue Router transitions](https://router.vuejs.org/guide/advanced/transitions.html) to create smooth, dynamic and easy expandable layout system.\n\nKey file in this system is [AppLayout.vue](src/layouts/AppLayout.vue). Here we created dynamic component to which we apply different layout types using `is` attribute:\n```\n\u003ccomponent\n  :is=\"layout\"\n  class=\"layout\"\n  :class=\"[layoutClassnames]\"\u003e\n  \u003cslot /\u003e\n\u003c/component\u003e\n```\nNightVue offers 2 types of layouts at the begining:\n\n* **default** - widely used `\u003cheader\u003e\u003c/header\u003e` → `\u003cmain\u003e\u003c/main\u003e` → `\u003cfooter\u003e\u003c/footer\u003e` layout\n* **full** - plain page without any additional elements, just a simple `\u003cdiv\u003e\u003c/div\u003e`\n\nThese templates are stored in [AppLayoutDefault.vue](src/layouts/AppLayoutDefault.vue) and [AppLayoutFull.vue](src/layouts/AppLayoutFull.vue) files respectively:\n\n```\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003capp-header /\u003e\n    \u003cmain class=\"main position-relative\"\u003e\n      \u003cslot /\u003e\n    \u003c/main\u003e\n    \u003capp-footer /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n```\n\u003ctemplate\u003e\n  \u003cdiv class=\"minvh-100\"\u003e\n    \u003cslot /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\nYou can modify them or create your own layouts. To do this create new Vue file named in such manner as default ones and don't forget to add new layouts in computed property of core file. This classnames will apply to root element:\n```\nlayoutClassnames() {\n  const layout = this.$route.meta.layout || defaultLayout\n\n  if (layout === 'AppLayoutFull') return 'layout--full'\n  if (layout === 'AppLayoutDefault') return 'layout--default'\n\n  return null\n},\n```\nPay your attention to computed property `layout()`. It returns current page layout type using [Vue Router meta fields](https://router.vuejs.org/guide/advanced/meta.html):\n```\nconst defaultLayout = 'AppLayoutDefault'\n\nlayout() {\n  const layout = this.$route.meta.layout || defaultLayout\n  return () =\u003e import(`@/layouts/${layout}.vue`)\n},\n```\nWhen you add new page to Router, define it's layout using `meta.layout` param. If you don't provide any type, NightVue will apply default layout to this page:\n```\n{\n  path: '/',\n  name: 'Home',\n  component: () =\u003e import('@/views/Home.vue'),\n  meta: {\n    layout: 'AppLayoutDefault',\n  },\n},\n```\nNow let's make things a bit more fancy. We wrapped root dynamic component in `\u003ctransition\u003e\u003c/transition\u003e` tag to add smooth [transition between pages](https://router.vuejs.org/guide/advanced/transitions.html#transitions):\n```\n\u003ctransition\n  appear\n  name=\"page\"\n  mode=\"out-in\"\u003e\n  \u003ccomponent\n    :is=\"layout\"\n    class=\"layout\"\n    :class=\"[layoutClassnames]\"\u003e\n    \u003cslot /\u003e\n  \u003c/component\u003e\n\u003c/transition\u003e\n```\nNightVue uses simple fade-out → fade-in transition effect by default. Here is small SCSS snippet to work with:\n```\n.layout {\n  \u0026.page-enter,\n  \u0026.page-leave-to {\n    .main {\n      opacity: 0;\n    }\n  }\n}\n\n.main {\n  transition: transition(opacity, lazy);\n}\n```\nYou can learn more about transition classnames [here](https://vuejs.org/guide/built-ins/transition.html#transition) and create your own. Also check this [tutorial](https://learnvue.co/tutorials/vue-router-transitions) with examples of Vue Router transitions.\n\n## Grid\n\nNightVue grid system is built with flexbox and is fully responsive. It uses a series of containers, rows, and cols to align content. If you are not familiar with flex we recomend to read this [article](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background).\n\nThere are 3 types of containers in NightVue:\n\n* **boxed** - on each `$breakpoint` container will have fixed `max-width` based on `$containers` map\n* **combined** - container will have `max-width` of *last* value from `$containers` map, then will have 100%\n* **full** - container will *always* have 100% width\n\nBase grid settings are stored in [_variables.scss](src/styles/@core/_variables.scss) file:\n```\n$num-cols:      12;\n$gutter-width:  1rem;\n$grid-type:     'combined';\n\n// Breakpoints are dublicated in 'store/modules/config.js'\n$breakpoints: (\n  xs: 576px,\n  sm: 768px,\n  md: 992px,\n  lg: 1200px,\n  xl: 1400px\n);\n\n// Containers max-widths (if you are using 'boxed' or 'combined' type)\n$containers: (\n  xs: 540px,\n  sm: 720px,\n  md: 960px,\n  lg: 1140px,\n  xl: 1320px\n);\n```\nRemember that `$breakpoints` are dublicated in Vuex store in [config.js](src/store/modules/config.js) file. NightVue watches for [window resize event](https://developer.mozilla.org/ru/docs/Web/API/Window/resize_event) to update global Vuex store variables in real-time. It also constantly tracks current [scroll position](https://developer.mozilla.org/ru/docs/Web/API/Window/scrollY). You can read these values with computed properties `windowSize()`, `currentBreakpoint()` and `windowScroll()`.\n\n* `windowSize()` returns current window `width` and `height`\n* `currentBreakpoint()` returns current \"morphological\" breakpoint value based on window width. By defaults there might be: **'xs', 'sm', 'md', 'lg'** and **'xl'**\n* `windowScroll()` returns current scroll position\n\n```\ncomputed: {\n  windowSize() {\n    return this.$store.state.config.windowSize\n  },\n\n  currentBreakpoint() {\n    return this.$store.state.config.currentBreakpoint\n  }\n\n  windowScroll() {\n    return this.$store.state.config.windowScroll\n  },\n}\n```\n### HTML grid usage\n\nTo apply column width in HTML you can use prepared classnames `col-${breakpoint}-${value}`:\n```\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col col-12 col-xs-10 col-sm-11 col-md-8 col-lg-6 col-xl-4\"\u003e\n      width 12 by default\n      width 10 on 'xs' breakpoint\n      width 11 on 'sm' breakpoint\n      width 8 on 'md' breakpoint\n      width 6 on 'lg' breakpoint\n      width 4 on 'xl' breakpoint\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nIf you need apply offset to column use `offset-${breakpoint}-${value}` classnames like this:\n```\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col col-4 offset-xs-4 offset-sm-5 offset-md-8 offset-lg-0\"\u003e\n      offset 4 columns on 'xs' breakpoint\n      offset 5 columns on 'sm' breakpoint\n      offset 8 columns on 'md' breakpoint\n      don't do any offset on 'lg' breakpoint\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nIf you need apply order to column use `order-${breakpoint}-${value}` classnames like this:\n```\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col col-6 order-xs-1 order-md-5\"\u003e\n      order 1 on 'xs' breakpoint\n      order 5 on 'md' breakpoint\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Sass grid mixins\n\nWhile the HTML method is well-known to many developers, we strongly recommend using Sass mixins to construct grids directly in SCSS files. This approach leads to cleaner Vue templates and helps keep all styles in one place.\n\nTo convert any selector to container just apply `@container()` mixin to it:\n```\n@include container();\n@include container('full');\n@include container($type: 'boxed', $gutter: 2rem);\n```\nFrom now on this selector will have same properties as `.container` class. Notice that you can define `$type` and `$gutter`.\n\nJust like with container you can convert any selector to `.row`. Simply apply `@row()` mixin to it. Additionally you can pass `$gutter` value. It will apply alternate negative left and right margins:\n```\n@include row();\n@include row(0);\n@include row($gutter: 2rem);\n```\nTo apply column styles use `@col()` mixin. If you don't pass any params mixin will apply only `padding-left` and `padding right` based on `$gutter-width` varaible. To apply width properties you can pass number from 1 to 12 for each breakpoint:\n```\n@include col();\n@include col(12);\n@include col(10, $md: 8);\n@include col(10, $md: 8, $lg: 6, $xs: 12);\n@include col(12, 10, 10, 8, 6, 9);\n```\nIf you need apply offset to column use `@offset()` mixin. It will add `margin-left` property to selector. You can pass number from 0 to 12 for each breakpoint. Note that if you don't pass any params, mixin won't apply any styles:\n```\n@include offset(6);\n@include offset(0, $sm: 4);\n@include offset(10, $md: 8);\n@include offset(10, $md: 8, $lg: 6, $xs: 12);\n@include offset($sm: 1, $lg: 4, $xl: 0);\n```\nIn case you need apply order to column use `@order()` mixin. It will apply `order` property from 1 to 12 to selector:\n```\n@include order(2);\n@include order(1, $sm: 4);\n@include order(1, $md: 2, $lg: 3, $xs: 12);\n@include order($sm: 12, $lg: 4, $xl: 3);\n```\n\n### Media queries\n\nNightVue provides set of handy [media queries](https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries) based on `$breakpoints`. You can use queries based on `min-width` and `max-width`:\n```\n// min-width queries\n$xs-up; // \u003e 576px\n$sm-up; // \u003e 768px\n$md-up; // \u003e 992px\n$lg-up; // \u003e 1200px\n$xl-up; // \u003e 1400px\n\n// max-width queries\n$xs-dw; // \u003c 578px\n$sm-dw; // \u003c 767px\n$md-dw; // \u003c 991px\n$lg-dw; // \u003c 1199px\n$xl-dw; // \u003c 1399px\n```\nOr queries between breakpoints:\n```\n$xs-sm; // 576px … 767px\n$sm-md; // 768px … 991px\n$md-lg; // 992px … 1199px\n$lg-xl; // 1200px … 1399px\n```\nHere are some examples of usage:\n```\n@media #{$sm-up} { ... } } // styles applies above 768px\n@media #{$md-up} { ... } } // styles applies above 992px\n\n@media #{$xl-dw} { ... } } // styles applies below 1399px\n@media #{$lg-dw} { ... } } // styles applies below 1199px\n\n@media #{$sm-md} { ... } } // styles applies between 768px … 991px\n@media #{$md-lg} { ... } } // styles applies between 992px … 1199px\n```\n\n## Typography\n\nNightVue stores all typography settings in Sass maps located in [_variables.scss](src/styles/@core/_variables.scss) file. In [typography.scss](src/styles/@core/typography.scss) file are described styles for headings, displays, body text, lists, and more.\n\n### Font import\n\nWe recomend to start with importing fonts by using `@font-face` mixin. Make sure to store your fonts in `src/assets/fonts` folder. Each font must be saved in a folder with the same name as font itself. By default NightVue uses [Onest](https://onest.md/en). This is how we stored and imported it, use this as an example to add your own fonts:\n\n```\n// Font files location:\n\n├── src\n│   ├── assets\n│       ├── fonts\n│           └── Onest\n\n// Import font using @font-face mixin:\n\n@include font-face('Onest', 'OnestRegular', 400, normal, 'recent');\n@include font-face('Onest', 'OnestMedium', 500, normal, 'recent');\n@include font-face('Onest', 'OnestBold', 700, normal, 'recent');\n@include font-face('Onest', 'OnestBlack', 900, normal, 'recent');\n```\n\n### Typography Sass maps\n\nThese are Sass maps with typography settings we talked earlier. Each one is self explanatory, so take a look at them:\n\n```\n$font-families: (\n  base:      \"Onest\",\n  headings:  \"Onest\",\n  displays:  \"Onest\"\n);\n\n$line-heights: (\n  1:  1,\n  25: 1.25,\n  50: 1.5,\n  75: 1.75,\n  2:  2,\n);\n\n$text-aligns: (\n  left:    left, \n  center:  center, \n  right:   right, \n  justify: justify\n);\n\n$font-weights: (\n  lighter: lighter, \n  bolder:  bolder, \n\n  100: 100, // thin\n  200: 200, // extra light\n  300: 300, // light\n  400: 400, // normal\n  500: 500, // medium\n  600: 600, // semi bold\n  700: 700, // bold\n  800: 800, // extra bold\n  900: 900, // black\n);\n\n$text-transforms: (\n  lowercase:  lowercase, \n  uppercase:  uppercase, \n  capitalize: capitalize\n);\n\n$font-styles: (\n  normal:  normal, \n  italic:  italic, \n  oblique: oblique\n);\n\n$text-decorations: (\n  underline:    underline, \n  line-through: line-through, \n  none:         none\n);\n\n$text-wraps: (\n  normal:   normal,\n  nowrap:   nowrap,\n  pre:      pre,\n  pre-line: pre-line,\n  pre-wrap: pre-wrap\n);\n\n$word-brakes: (\n  normal:      normal,\n  break-all:   break-all,\n  keep-all:    keep-all,\n  break-word:  break-word,\n);\n\n$letter-spacings: (\n  normal:  normal,\n  tight:   -0.05em,\n  wide:   .1em,\n  wider:  .5em,\n);\n```\n\nImportant part is settings for headings and displays:\n\n```\n$headings-fz: (\n  h1: 4.5rem,\n  h2: 2.5rem,\n  h3: 1.75rem,\n  h4: 1.25rem,\n  h5: 1rem,\n  h6: 0.875rem,\n);\n$headings-lh: map-get($line-heights, 25);\n$headings-fw: map-get($font-weights, 500);\n$headings-margins: (\n  top: map-get($spacers, 1),\n  bottom: map-get($spacers, 50),\n);\n```\n```\n$displays-fz: (\n  display-1: 74px,\n  display-2: 62px,\n  display-3: 48px,\n  display-4: 34px,\n);\n$displays-lh: map-get($line-heights, 25);\n$displays-fw: map-get($font-weights, 500);\n$displays-margins: (\n  top: map-get($spacers, 1),\n  bottom: map-get($spacers, 50),\n);\n```\n\nHere you can manage styles for base body text, small and tagline styles:\n\n```\n$base-fz:      16px; // CRUCIAL VALUE! A lot of things depends on it. Be aware.\n$base-lh:      map-get($line-heights, 50);\n$base-fw:      map-get($font-weights, 400);\n\n$small-fz:     0.875; // Ratio of text size for \u003csmall\u003e tag and .small classname\n$small-lh:     map-get($line-heights, 25);\n$small-fw:     map-get($font-weights, 400);\n\n$tagline-fz:   1.25; // Ratio of text size for .tagline classname\n$tagline-lh:   map-get($line-heights, 50);\n$tagline-fw:   map-get($font-weights, 500);\n```\n\n### Typography utility classnames\n\nFor each Sass map NightVue generates set of utility classnames to use in HTML:\n\n```\n.font-base     { font-family: \"Onest\" }\n.font-headings { font-family: \"Onest\" }\n.font-displays { font-family: \"Onest\" }\n\n.line-height-1  { line-height: 1 }\n.line-height-25 { line-height: 1.25 }\n.line-height-50 { line-height: 1.5 }\n.line-height-75 { line-height: 1.75 }\n.line-height-2  { line-height: 2 }\n\n.text-left    { text-align: left }\n.text-center  { text-align: center }\n.text-right   { text-align: right }\n.text-justify { text-align: justify }\n\n.text-underline     { text-decoration: underline }\n.text-line-through  { text-decoration: line-through }\n.text-none          { text-decoration: none }\n\n.white-space-normal    { white-space: normal }\n.white-space-nowrap    { white-space: nowrap }\n.white-space-pre       { white-space: pre }\n.white-space-pre-line  { white-space: pre-line }\n.white-space-pre-wrap  { white-space: pre-wrap }\n\n.word-break-normal     { word-break: normal }\n.word-break-break-all  { word-break: break-all }\n.word-break-keep-all   { word-break: keep-all }\n.word-break-break-word { word-break: break-word }\n\n.text-lowercase  { text-transform: lowercase }\n.text-uppercase  { text-transform: uppercase }\n.text-capitalize { text-transform: capitalize }\n\n.font-weight-lighter { font-weight: lighter }\n.font-weight-bolder  { font-weight: bolder }\n.font-weight-100     { font-weight: 100 }\n.font-weight-200     { font-weight: 200 }\n.font-weight-300     { font-weight: 300 }\n.font-weight-400     { font-weight: 400 }\n.font-weight-500     { font-weight: 500 }\n.font-weight-600     { font-weight: 600 }\n.font-weight-700     { font-weight: 700 }\n.font-weight-800     { font-weight: 800 }\n.font-weight-900     { font-weight: 900 }\n\n.font-normal   { font-style: normal }\n.font-italic   { font-style: italic }\n.font-oblique  { font-style: oblique }\n\n.spacing-normal  { letter-spacing: normal }\n.spacing-tight   { letter-spacing: -0.05em }\n.spacing-wide    { letter-spacing: 0.1em }\n.spacing-wider   { letter-spacing: 0.5em }\n```\n\nEach classname supports breakpoints. You can use template `${property}-${breakpoint}-{$value}` to easy change text styles across different breakpoints. For example this `font-weight` will apply only on `sm` breakpoint:\n\n```\n@media screen and (min-width: 768px) {\n  .font-weight-sm-500 {\n      font-weight: 500 ;\n  }\n}\n```\n\nTo apply small styles to text you can add `.small` classname or wrap element in `\u003csmall\u003e\u003c/small\u003e` tag. Another way is to use `@small()` mixin:\n\n```\n\u003cdiv class=\"small\"\u003eI am small text\u003c/div\u003e\n\u003csmall\u003eMe too!\u003c/small\u003e\n```\n```\n@include small() }\n```\n\nApply tagline styles to text in similar way:\n\n```\n\u003cdiv class=\"tagline\"\u003eI am tagline text\u003c/div\u003e\n```\n```\n@include tagline() }\n```\n\nOften you need to truncate some long text and put dots at the end of the line. Use one of these helpers to do that:\n```\n\u003cdiv class=\"text-truncate\" style=\"width: 120px;\"\u003e\n  I am very long text and I will be truncated at 120px width\n\u003c/div\u003e\n\n\u003cdiv class=\"text-truncate max-w-25\"\u003e\n  I am very long text and I will be truncated at 25% width\n\u003c/div\u003e\n\n\u003cdiv class=\"text-dotted\"\u003e\n  I will not be truncated, but will have '…' at the end\n\u003c/div\u003e\n```\n```\n.text-truncate {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.text-dotted {\n  \u0026:after {\n    content: '…'\n  }\n}\n```\n\nOr use `@text-truncate($width)` mixin for that. It requires a single argument `$width` in `px` or `%`.\n\n```\n@include text-truncate(150px)\n\n// =\u003e\ndisplay: inline-block;\noverflow: hidden;\ntext-overflow: ellipsis;\nmax-width: 150px;\n```\n\n## Position\n\nThese utility classnames will help you to set and change position property of elements. \n\n```\n.position-relative  { position: relative }\n.position-absolute  { position: absolute }\n.position-static    { position: static }\n.position-fixed     { position: fixed }\n.position-static    { position: static }\n```\n\nEach classname supports breakpoint, so you can easily change behaviour of element across different breakpoints. Use template `.position-${breakpoint}-{$value}` for that. For example, this element will be in `position: absolute` only on LG breakpoint:\n\n```\n@media screen and (min-width: 1280px) {\n  .position-lg-absolute {\n     position: absolute\n  }\n}\n```\n\n## Display\n\nDisplay system allows you to change display property and quickly manage the layout, alignment, and sizing of elements with a full suite of responsive flexbox utilities. If you are not familiar with flex we advice you to read this [article](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) first. Utility classnames are generated in [_display.scss](src/styles/@core/helpers/_display.scss) file.\n\nHere are listed possible variants of `display` property:\n\n```\n.d-none          { display: none }\n.d-block         { display: block }\n.d-inline        { display: inline }\n.d-inline-block  { display: inline-block }\n.d-flex          { display: flex }\n.d-inline-flex   { display: inline-flex }\n.d-table         { display: table }\n.d-table-cell    { display: table-cell }\n.d-table-row     { display: table-row }\n```\n\nNightVue generates classnames based on flexbox settings:\n\n* `flex-direction`\n* `justify-content`\n* `align-items`\n* `align-self`\n* `align-content`\n* `flex-wrap`\n* `flex-grow`\n* `flex-shrink`\n\nHere are possible variants for each of those:\n\n```\n.flex-row             { flex-direction: row }\n.flex-row-reverse     { flex-direction: row-reverse }\n.flex-column          { flex-direction: column }\n.flex-column-reverse  { flex-direction: column-reverse }\n```\n```\n.justify-content-start    { justify-content: start }\n.justify-content-end      { justify-content: end }\n.justify-content-center   { justify-content: center }\n.justify-content-between  { justify-content: space-between }\n.justify-content-around   { justify-content: space-around }\n```\n```\n.align-items-start     { align-items: start }\n.align-items-end       { align-items: end }\n.align-items-center    { align-items: center }\n.align-items-baseline  { align-items: baseline }\n.align-items-stretch   { align-items: stretch }\n```\n```\n.align-self-start     { align-self: start }\n.align-self-end       { align-self: end }\n.align-self-center    { align-self: center }\n.align-self-baseline  { align-self: baseline }\n.align-self-stretch   { align-self: stretch }\n```\n```\n.align-content-start     { align-content: start }\n.align-content-end       { align-content: end }\n.align-content-center    { align-content: center }\n.align-content-baseline  { align-content: baseline }\n.align-content-stretch   { align-content: stretch }\n```\n```\n.flex-wrap          { flex-wrap: wrap }\n.flex-nowrap        { flex-wrap: nowrap }\n.flex-wrap-reverse  { flex-wrap: wrap-reverse }\n```\n```\n.flex-grow-0    { flex-grow: 0 }\n.flex-grow-1    { flex-grow: 1 }\n```\n```\n.flex-shrink-0  { flex-shrink: 0 }\n.flex-shrink-1  { flex-shrink: 1 }\n```\n\nEach classname supports breakpoints, which can help you to easy change display and flex properties across different breakpoints. Use template `${property}-${breakpoint}-{$value}` for that. Take a look at some examples:\n\n```\n@media screen and (min-width: 1400px) {\n  .d-xl-none { display: none }\n}\n\n@media screen and (min-width: 1200px) {\n  .flex-lg-column { flex-direction: column }\n}\n\n@media screen and (min-width: 992px) {\n  .justify-content-md-center { justify-content: center }\n}\n\n@media screen and (min-width: 768px) {\n  .align-items-sm-start { align-items: start }\n}\n\n@media screen and (min-width: 576px) {\n  .flex-wrap-xs-nowrap { flex-wrap: nowrap }\n}\n```\n\nOften you need to align content right in the center of X and Y axes. In that case use classname `.flex-center` on parent element. It also supports breakpoints.\n\n```\n.flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n```\n```\n.flex-xs-center { ... }  // styles applies above 576px\n.flex-sm-center { ... }  // styles applies above 768px\n.flex-md-center { ... }  // styles applies above 992px\n.flex-lg-center { ... }  // styles applies above 1200px\n.flex-xl-center { ... }  // styles applies above 1400px\n```\n\n## Spacing\n\nNightVue generates responsive margin and padding utility classnames. The classnames are named using the format `{$property}-{$breakpoint}-{$side}-{$size}`.\n\nWhere `$property` is one of:\n* `m` - for classnames that set property margin\n* `p` - for classnames that set property padding\n\nWhere `$breakpoint` is one of:\n* `xs` - for classnames that set property property on XS breakpoint \u003e 576px\n* `sm` - for classnames that set property property on SM breakpoint \u003e 768px\n* `md` - for classnames that set property property on MD breakpoint \u003e 992px\n* `lg` - for classnames that set property property on LG breakpoint \u003e 1200px\n* `xl` - for classnames that set property property on XL breakpoint \u003e 1400px\n* blank - if you want to set a margin and padding on all breakpoint\n\nWhere `$side` is one of:\n* `t` - for classnames that set property margin-top or padding-top\n* `b` - for classnames that set property margin-bottom or padding-bottom\n* `l` - for classnames that set property margin-left or padding-left\n* `r` - for classnames that set property margin-right or padding-right\n* `x` - for classnames that set property both *-left and *-right\n* `y` - for classnames that set property both *-top and *-bottom\n* blank - for classnames that set property a margin or padding on all 4 sides of the element\n\nWhere `$size` is one of spacing sizes defined in [_variables.scss](src/styles/@core/_variables.scss) file:\n```\n$spacer: 1rem;\n\n$spacers: (\n  0: 0,\n  1: ($spacer * .25),\n  2: ($spacer * .5),\n  3: ($spacer * .75),\n  4: ($spacer * 1),\n  5: ($spacer * 1.25),\n  6: ($spacer * 1.5),\n  7: ($spacer * 1.75),\n  8: ($spacer * 2),\n  9: ($spacer * 2.25),\n  10: ($spacer * 2.5),\n  11: ($spacer * 2.75),\n  12: ($spacer * 3),\n  13: ($spacer * 3.25),\n  14: ($spacer * 3.5),\n  15: ($spacer * 3.75),\n  16: ($spacer * 4),\n  17: ($spacer * 4.25),\n  18: ($spacer * 4.5),\n  19: ($spacer * 4.75),\n  20: ($spacer * 5),\n  auto: auto\n);\n\n$base-mg: map-get($spacers, 1); // Universal margin used for \u003cp\u003e, \u003cul\u003e etc.\n```\nWe crated a tool [NightVue Spacers Generator](https://codepen.io/Nightrunner/pen/poVrGez), where you can quickly see spacing results based on your initial settings.\n\nIn case you prefer SCSS method to define spacers use `spacer()` function for that.\n\n* If you pass one param it will return spacer value\n* If you pass two params it will return X and Y spacer values\n* If you pass four params it will return top, right, bottom and left spacer values\n\n```\npadding: spacer(2);\n// =\u003e padding: .25rem;\n\npadding-right: spacer(5);\n// =\u003e padding-right: 1.25rem;\n\nmargin: spacer(3, auto);\n// =\u003e margin: .75rem auto;\n\nmargin: spacer(5, auto, 2, 0);\n// =\u003e margin: 1.25rem auto 0.25rem 0;\n```\n\nBeside that NightVue generates classnames which you might use to position elements in `absolute` or `fixed` position. These classnames uses pattern `${side}-${size}`:\n\n```\n.top-2     { top: .25rem }\n.right-10  { right: 2.5rem }\n.bottom-4  { bottom: 1rem }\n.left-5    { left: 1.25rem }\n```\n\nAnd of course they also support breakpoints:\n\n```\n@media screen and (min-width: 768px) {\n  .right-sm-4 {\n      right: 1rem\n   }\n}\n```\n\n## Sizing\n\nThese utility classnames can be used apply to selector these CSS styles: `width`, `max-width`, `min-width`, `height`, `max-height`, `min-height`. And units can be percentages `%` or relative to viewport `vw` and `vh`.\n\nNightVue generates set of classnames which uses format `${property}-${breakpoint}-${size}`, where `${property}` is one of:\n\n* `w` - for `width` in `%`\n* `vw` - for `width` in `vw`\n* `max-w` - for `max-width` in `%`\n* `max-vw` - for `max-width` in `vw`\n* `min-w` - for `min-width` in `%`\n* `min-vw` - for `min-width` in `vw`\n* `h` - for `height` in `%`\n* `vh` - for `height` in `vw`\n* `max-h` - for `max-height` in `%`\n* `max-vh` - for `max-height` in `vw`\n* `min-h` - for `min-height` in `%`\n* `min-vh` - for `min-height` in `vw`\n\nWhere `$size` is one of sizing values defined in [_variables.scss](src/styles/@core/_variables.scss) file:\n```\n$sizings: (\n  0:    0,\n  25:   25,\n  50:   50,\n  75:   75,\n  100:  100,\n  auto: auto\n);\n```\n\nHere are generated sizing classnames based on 50 size as an example:\n\n```\n.w-50      { width: 50% }\n.vw-50     { width: 50vw }\n.max-w-50  { max-width: 50% }\n.max-vw-50 { max-width: 50vw }\n.min-w-50  { min-width: 50% }\n.min-vw-50 { min-width: 50vw }\n\n.h-50     { height: 50% }\n.vh-50     { height: 50vh }\n.max-h-50  { max-height: 50% }\n.max-vh-50 { max-height: 50vh }\n.min-h-50  { min-height: 50% }\n.min-vh-50 { min-height: 50vh }\n```\n\nYou can also apply `${breakpoints}` to dynamically change behavior on different screen sizes. For example, this `min-width` style will apply only below 768px (**sm** breakpoint):\n\n```\n\u003cdiv class=\"min-w-sm-50 min-w-75\"\u003e\n  I have min-width 50% below 768px and 75% above\n\u003c/div\u003e\n```\n```\n@media screen and (min-width: 768px) {\n  .min-w-sm-50 {\n    min-width: 50%;\n  }\n}\n\n.min-w-sm-75 {\n  min-width: 75%;\n}\n```\n\nDon't forget that you can also apply `auto` sizing to an element:\n\n```\n.w-auto     { width: auto }\n.max-w-auto { max-width: auto }\n.min-w-auto { min-width: auto }\n\n.h-auto     { height: auto }\n.max-h-auto { max-height: auto }\n.min-h-auto { min-height: auto }\n```\n\n## Colors\n\nNightVue uses Sass maps to store project colors. This maps will help you quickly and easily loop over a list of colors and their hex values.\n\n* `$colors` map includes all available \"basic\" colors in project\n* `$grays` map includes achromatic list (shades of gray between `#fff` and `#000`)\n* `$theme-colors` map includes semantically named colors composed from maps above\n\nAll this maps are described in [_variables.scss](src/styles/@core/_variables.scss) file:\n\n```\n$colors: (\n  'red':       #F44336,\n  'pink':      #EC407A,\n  'orange':    #FF9800,\n  'yellow':    #FFEE58,\n  'green':     #47b05b,\n  'brown':     #795548,\n  'teal':      #009688,\n  'cyan':      #00BCD4,\n  'blue':      #2196F3,\n  'purple':    #682CAB,\n);\n\n$grays: (\n  'white':   #ffffff,\n  'gray-1':  #eaeaea,\n  'gray-2':  #d5d5d5,\n  'gray-3':  #bfbfbf,\n  'gray-4':  #aaaaaa,\n  'gray-5':  #959595,\n  'gray-6':  #cccccc,\n  'gray-7':  #6a6a6a,\n  'gray-8':  #555555,\n  'gray-9':  #404040,\n  'gray-10': #2b2b2b,\n  'black':   #000000,\n);\n\n$theme-colors: (\n  'primary':    map-get($colors, 'purple'),\n  'secondary':  map-get($colors, 'blue'),\n  'success':    map-get($colors, 'green'),\n  'info':       map-get($colors, 'teal'),\n  'warning':    map-get($colors, 'yellow'),\n  'danger':     map-get($colors, 'red'),\n  'light':      map-get($grays, 'gray-2'),\n  'dark':       map-get($grays, 'gray-8'),\n);\n```\nIn map `$levels` you can define levels of lightening and saturation of each color in `$theme-colors` map. By default this map has 5 levels:\n```\n$levels: (\n  1: 10%,\n  2: 20%,\n  3: 30%,\n  4: 40%,\n  5: 50%,\n);\n```\n\n### Colors HTML Usage\n\nNightVue automatically generates classnames from maps `$grays` and `$theme-colors` above. Each color have unique classname with `background-color`, `color` and `fill` styles and uses template `${property}-${color}`, where `${property}` is one of:\n\n* `bg` for background-color\n* `clr` for text color\n* `fill` for SVG fill color\n\nHere are some examples:\n```\n.bg-white   { background-color: #ffffff }\n.clr-white  { color: #ffffff }\n.fill-white { fill: #ffffff }\n\n.bg-gray-1   { background-color: #eaeaea }\n.clr-gray-1  { color: #eaeaea }\n.fill-gray-1 { fill: #eaeaea }\n\n.bg-primary   { background-color: #682CAB }\n.clr-primary  { color: #682CAB }\n.fill-primary { fill: #682CAB }\n```\n\nAdditionally for each color NightVue generates classnames with brightened, darkened, saturated and desaturated color variations from `$theme-colors` map. We are using [mix()](https://sass-lang.com/documentation/modules/color#mix) and [scale()](https://sass-lang.com/documentation/modules/color#scale) functions for that. They help to create smooth and steady color pallete. We created [NightVue Pallete Generator](https://codepen.io/Nightrunner/pen/NWMggPb) to quickly see the results, check it out.\n\nGenerated classnames uses pattern `${property}-${color}-${style}-${level}`. Let's take a look at color variations of `primary` color:\n\n```\n.clr-primary-light-1 { color: #7741b3 }\n.clr-primary-light-2 { color: #7f4cb8 }\n.clr-primary-light-3 { color: #8656bc }\n.clr-primary-light-4 { color: #8e61c0 }\n.clr-primary-light-5 { color: #956bc4 }\n\n.clr-primary-dark-1 { color: #5e289a }\n.clr-primary-dark-2 { color: #582591 }\n.clr-primary-dark-3 { color: #532389 }\n.clr-primary-dark-4 { color: #4e2180 }\n.clr-primary-dark-5 { color: #491f78 }\n```\n```\n.clr-primary-sat-1 { color: #6828af }\n.clr-primary-sat-2 { color: #6825b2 }\n.clr-primary-sat-3 { color: #6823b4 }\n.clr-primary-sat-4 { color: #6721b6 }\n.clr-primary-sat-5 { color: #671fb8 }\n\n.clr-primary-desat-1 { color: #6832a5 }\n.clr-primary-desat-2 { color: #6936a1 }\n.clr-primary-desat-3 { color: #69399e }\n.clr-primary-desat-4 { color: #693c9b }\n.clr-primary-desat-5 { color: #693f98 }\n```\n\nBeside that you can use `rgba` versions of `$theme-colors`. For each `opacity` value from `$opacities` map NightVue generates set of transparent colors:\n\n```\n$opacities: (\n  0: 0%,\n  1: 5%,\n  2: 15%,\n  3: 25%,\n  4: 35%,\n  5: 45%,\n  6: 55%,\n  7: 65%,\n  8: 75%,\n  9: 85%,\n  10: 95%\n);\n```\n\nThese classnames uses pattern `${property}-${color}-opacity-${opacity}`. Take a look at `rgba` variants of `success` color as example:\n\n```\n.bg-success-opacity-0  { rgba(71, 176, 91, 0) }\n.bg-success-opacity-1  { rgba(71, 176, 91, 0.05) }\n.bg-success-opacity-2  { rgba(71, 176, 91, 0.15) }\n.bg-success-opacity-3  { rgba(71, 176, 91, 0.25) }\n...\n.bg-success-opacity-10 { rgba(71, 176, 91, 0.95) }\n```\n\n### Color Sass functions\n\nIf you need apply colors in SCSS files you can use `color($name, $style, $level)` function. It returns hex value of color by its `$name`. Additionally you can pass optional arguments `$style` and `$level` to determine level of brightness or saturation. Or you can define it's `$opacity` level. Here are some examples of usage in SCSS:\n\n```\nbox-shadow: 1px 1px 4px color('primary');\n// =\u003e box-shadow: 1px 1px 4px #682CAB;\n\nborder-color: color('secondary', light, 2);\n// =\u003e border-color: #42a6f5;\n\nborder-color: color('success', dark, 4);\n// =\u003e border-color: #358444;\n\ncolor: color('danger', sat, 2);\n// =\u003e color: #f64234;\n\nbackground-color: color('warning', desat, 4);\n// =\u003e background-color: #eadd6d;\n\ncolor: color('white');\n// =\u003e color: #ffffff;\n\ncolor: color('white', $opacity: 5);\n// =\u003e color: rgba(255, 255, 255, 0.45);\n\nfill: color('gray-4');\n// =\u003e fill: #aaaaaa;\n```\n\n## Gradients\n\nWorking with linear-gradients can sometimes be awkward and clunky. Remembering all the settings and features of this CSS function can be challenging. NightVue offers tools to easily manage a group of gradients and create new ones with ease. If you're not familiar with linear-gradients, we recommend reading the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).\n\nNightVue uses a Sass map called $gradients to store all gradients used in the project. This map is located in the [_variables.scss](src/styles/@core/_variables.scss) file and contains four gradients as examples by default.\n\n```\n$gradients: (\n  primary_success: (\n    direction: 145deg,\n    fallback: map-get($theme-colors, 'primary'),\n    list: (\n      lighten(map-get($theme-colors, 'primary'), map-get($levels, 2)) 10%,\n      lighten(map-get($theme-colors, 'success'), map-get($levels, 1)) 80%\n    )\n  ),\n\n  primary-light-3_primary: (\n    direction: to bottom,\n    fallback: map-get($theme-colors, 'primary'),\n    list: (\n      map-get($theme-colors, 'primary'),\n      lighten(map-get($theme-colors, 'primary'), map-get($levels, 3))\n    )\n  ),\n\n  red_yellow_blue: (\n    direction: to right,\n    fallback: map-get($colors, 'red'),\n    list: (\n      map-get($colors, 'red'),\n      map-get($colors, 'yellow'),\n      map-get($colors, 'blue')\n    )\n  ),\n\n  info_transparent: (\n    direction: 90deg,\n    fallback: map-get($theme-colors, 'info'),\n    list: (\n      map-get($theme-colors, 'info'),\n      transparent\n    )\n  ),\n);\n```\n\nWe recomend to name gradients in such pattern: `\u003ccolor1\u003e_\u003ccolor2\u003e_\u003ccolor3\u003e`. It will help you to easy understand what colors are used and what is direction of gradient. Here are some examples: `info_success`, `primary_danger`, `light_dark`, `transparent_black`, `red_yellow_blue`.\n\nIf gradient uses modified color you may name it like this: `\u003ccolor-${style}-${value}\u003e_\u003ccolor-${style}-${value}\u003e`. For example, gradient named `primary-light-3_primary` indicates that it uses lightened by 3 levels `$primary` and base `$primary` colors and shows the direction of it. Pretty self explanatory, right?\n\nNow let's take a look at gradient itself. Each one is written by template:\n\n```\ngradientName: (\n  direction: { String },\n  fallback: { String },\n  list: ( { String }, { String }, { String }... )\n)\n```\n\nWhere `direction` is obviously direction of `linear-gradient`. It may be keyword:\n\n* `to top`\n* `to top right`\n* `to right`\n* `to bottom right`\n* `to bottom`\n* `to bottom left`\n* `to left`,\n* `to left top`\n\nor any angle value in `deg`, `rad`, `grad` or `turn`.\n\nParameter `fallback` is color by default for unsupported browsers. To know which browsers don't support `linear-gradient` visit [caniuse.com](https://caniuse.com/?search=linear-gradient) website.\n\nAnd finally most inetersting part is `list` parameter. This is basicly a list of colors in gradient, separated by a comma. One way to fill it is by using `map-get()` function like we did in examples above.\n\n### Gradients HTML usage\n\nFor each gradient in `$gradients` map NightVue generates unique classname with template `.gradient-${gradient}`:\n\n```\n.gradient-primary_success {\n  background: #682cab;\n  background: linear-gradient(145deg, #8e51d2 10%, #68c279 80%);\n}\n\n.gradient-primary-light-3_primary {\n  background: #682CAB;\n  background: linear-gradient(to bottom, #682CAB, #9b65d8);\n}\n\n.gradient-red_yellow_blue {\n  background: #f44336;\n  background: linear-gradient(90deg, #f44336, #ffee58, #2196f3);\n}\n\n.gradient-info_transparent{\n  background: #009688;\n  background: linear-gradient(90deg, #009688, transparent);\n}\n```\n\n### Gradient Sass mixin\n\nIn case you need apply gradient in SCSS file insted of HTML use `@linear-gradient($name)` mixin. It requires only name of gradient from `$gradients` map.\n\n```\n@include linear-gradient('primary_success');\n\n// =\u003e\nbackground: #682cab;\nbackground: linear-gradient(145deg, #8e51d2 10%, #68c279 80%);\n```\n\n## Opacity\n\nFor each opacity value from `$opacities` map NightVue generates utility classnames with pattern `.opacity-${value}`:\n\n```\n$opacities: (\n  0: 0%,\n  1: 5%,\n  2: 15%,\n  3: 25%,\n  4: 35%,\n  5: 45%,\n  6: 55%,\n  7: 65%,\n  8: 75%,\n  9: 85%,\n  10: 95%\n);\n```\n```\n.opacity-0  { opacity: 0 }\n.opacity-1  { opacity: 0.05 }\n.opacity-2  { opacity: 0.15 }\n.opacity-3  { opacity: 0.25 }\n...\n.opacity-10 { opacity: 0.95 }\n```\nThese classnames supports `$breakpoints` so you can easily manage `opacity` level on each specific breakpoint. Use template `.opacity-${breakpoint}-{$value}` to do that. For example this `opacity` will apply only on `lg` breakpoint:\n\n```\n@media screen and (min-width: 1280px) {\n  .opacity-lg-5 {\n    opacity: 0.45\n  }\n}\n```\n\nIn case you need apply `opacity` in SCSS use `opacity($level)` function:\n\n```\nopacity: opacity(0);\n// =\u003e opacity: 0;\n\nopacity: opacity(1);\n// =\u003e opacity: 0.05;\n\nopacity: opacity(3);\n// =\u003e opacity: 0.25;\n\nopacity: opacity(7);\n// =\u003e opacity: 0.65;\n\nopacity: opacity(10);\n// =\u003e opacity: 0.95;\n\n```\n\n## Icons\n\nTo serve SVG icons NightVue uses [SVG Sprite Loader](https://github.com/JetBrains/svg-sprite-loader).\n\nStore your icons in `src/assets/icons/library` folder. We already included there 3 icons for example. There are many icon packs on internet, just pick whatever you like most and import icons in this folder.\n\n```\n├── src\n│   ├── assets\n│       ├── icons\n│           ├── library\n│               face.svg\n│               lightbulb.svg\n│               link.svg\n│            index.js\n```\n\nPlugin automatically creates and injects in `\u003cbody\u003e` client-side SVG sprite containing each icon from the folder above. Keep in mind that each icon will have an id based on its name. To include icon in HTML use `\u003cSvgIcon\u003e` component. It accepts properties `icon` and `size`.\n\n```\n\u003csvg-icon icon=\"face\" /\u003e\n```\n\nTo set icon size define its `size` property. All icon sizes are stored in `$icons` map located in [_variables.scss](src/styles/@core/_variables.scss) file:\n```\n$icon-sizes: (\n  2xs: 0.625em, // 10px\n  xs:  0.75em,  // 12px\n  sm:  0.857em, // 14px\n  md:  1em,     // 16px\n  lg:  1.25em,  // 20px\n  xl:  1.5em,   // 24px\n  2xl: 2em,     // 32px\n);\n```\n```\n\u003csvg-icon icon=\"face\" size=\"2xs\" /\u003e\n\u003csvg-icon icon=\"face\" size=\"xs\" /\u003e\n\u003csvg-icon icon=\"face\" size=\"sm\" /\u003e\n\u003csvg-icon icon=\"face\" size=\"md\" /\u003e\n\u003csvg-icon icon=\"face\" size=\"lg\" /\u003e\n\u003csvg-icon icon=\"face\" size=\"xl\" /\u003e\n\u003csvg-icon icon=\"face\" size=\"2xl\" /\u003e\n```\n\nAny other classname can be applied as usual:\n\n```\n\u003csvg-icon\n  icon=\"face\"\n  size=\"sm\"\n  class=\"m-2 fill-primary\" /\u003e\n```\n\n`\u003cSvgIcon\u003e` component and plugin itself renders HTML in a widely used format `\u003csvg\u003e\u003cuse xlink:href=\"#id\"\u003e\u003c/use\u003e\u003c/svg\u003e`. If you are not quite familiar with this feature read [MDN Docs](https://developer.mozilla.org/ru/docs/Web/SVG/Element/use).\n\nIn case you prefer to set icon size in SCSS file, use `@icon-size` mixin. This mixin apply specific `width` and `height` to an element. If you apply this mixin to selector you can be pretty sure it will have passed dimensions no matter what and will not be compressed or stretched:\n\n```\n@include icon-size(sm);\n\n// =\u003e\nwidth: 0.875em;\nmax-width: 0.875em;\nmin-width: 0.875em;\nheight: 0.875em;\nmax-height: 0.875em;\nmin-height: 0.875em;\n```\n\nWe _recomend_ to use predefined icon sizes from `$icons` map, but here you can pass whatever dimensions you want:\n\n```\n@include icon-size(18px, 34px);\n\n// =\u003e\nwidth: 18px;\nmax-width: 18px;\nmin-width: 18px;\nheight: 34px;\nmax-height: 34px;\nmin-height: 34px;\n```\n\n## Radius\n\nNightVue uses Sass map `$radiuses` to store all variants of `border-radius`. By default it includes:\n\n```\n$radiuses: (\n  'small':   4px,\n  'base':    8px,\n  'large':   20px,\n  'circle':  100%,\n  'zero':    0\n);\n```\n\nFor each value from this map NightVue generates set of utlity classnames to use in HTML. Pattern depends on which angle or angles you want to modify:\n\n* `.radius-${type}` - for classnames that set property to all angles\n* `.radius-tl-${type}` - for classnames that set property to **top-left** angle\n* `.radius-tr-${type}` - for classnames that set property to **top-right** angle\n* `.radius-bl-${type}` - for classnames that set property to **bottom-left** angle\n* `.radius-br-${type}` - for classnames that set property to **bottom-right** angle\n* `.radius-t-${type}` - for classnames that set property to **top-left** and **top-right** angles\n* `.radius-r-${type}` - for classnames that set property to **top-right** and **bottom-right** angles\n* `.radius-b-${type}` - for classnames that set property to **bottom-left** and **bottom-right** angles\n* `.radius-l-${type}` - for classnames that set property to **bottom-left** and **top-left** angles\n\nThese classnames supports `$breakpoints` so you can easily manage `border-radius` type on each specific breakpoint. Use template `.radius-${direction}-${breakpoint}-{$type}` to do that. For example this element will have \"large\" `border-radius` only on `sm` breakpoint:\n\n```\n@media screen and (min-width: 768px) {\n  .radius-b-sm-large {\n     border-bottom-left-radius: 20px;\n     border-bottom-right-radius: 20px;\n   }\n}\n```\n\nIn case you prefer SCSS method, use `radius($type)` function. It requires type of `border-radius` you want to apply to an element:\n\n```\nborder-radius: radius('small');\n// =\u003e border-radius: 4px;\n\nborder-radius: radius('circle');\n// =\u003e border-radius: 100%;\n\nborder-top-left-radius: radius('zero');\n// =\u003e border-top-left-radius: 0;\n```\n\n## Shadows\n\nNightVue stores all types of box-shadows in `$shadows` map located in [_variables.scss](src/styles/@core/_variables.scss) file. By default this map contains list of shadows based on [Material methodology](https://material.io/design/environment/light-shadows.html#light):\n\n```\n$shadows: (\n  level-1: (0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)),\n  level-2: (0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)),\n  level-3: (0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)),\n  level-4: (0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)),\n  level-5: (0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)),\n);\n```\n\nSure you can remove them and/or add your own. For example [this website](https://getcssscan.com/css-box-shadow-examples) provides a large collection of beautiful box-shadows.\n\nFor each type from this map NightVue generates classnames using pattern `.shadow-${type}`:\n\n```\n.shadow-level-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) }\n.shadow-level-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) }\n.shadow-level-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) }\n.shadow-level-4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) }\n.shadow-level-5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22) }\n```\n\nIn case you prefer to use them in SCSS file use `shadow($type)` function. It requires name of shadow as parameter:\n\n```\nbox-shadow: shadow('level-1');\n// =\u003e box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n\nbox-shadow: shadow('level-2');\n// =\u003e box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n\nbox-shadow: shadow('level-3');\n// =\u003e box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);\n\nbox-shadow: shadow('level-4');\n// =\u003e box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n\nbox-shadow: shadow('level-5');\n// =\u003e box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);\n```\n\n## Z-index\n\nThe Z-index property plays a crucial role in determining the behavior of web interfaces. NightVue offers a list of utility class names to position elements in the Z-axis. Since each project is unique and NightVue doesn't have pre-built components, we created a universal list of Z-indexes ranging from -1 to 12. However, this solution may not be suitable for everyone, so feel free to use any alternative you prefer.\n\nUtility classnames uses format `.z-plus-${value}` for positive values and `.z-minus-${value}` for negatives. You can also determine start and end values in [_zindex.scss](src/styles/@core/helpers/_zindex.scss) file:\n\n```\n$zindex-start: -1;\n$zindex-end:   12;\n\n.z-minus-1 { z-index: -1 }\n.z-0       { z-index: 0 }\n.z-plus-1  { z-index: 1 }\n.z-plus-2  { z-index: 2 }\n.z-plus-3  { z-index: 3 }\n.z-plus-4  { z-index: 4 }\n.z-plus-5  { z-index: 5 }\n.z-plus-6  { z-index: 6 }\n.z-plus-7  { z-index: 7 }\n.z-plus-8  { z-index: 8 }\n.z-plus-9  { z-index: 9 }\n.z-plus-10 { z-index: 10 }\n.z-plus-11 { z-index: 11 }\n.z-plus-12 { z-index: 12 }\n```\n\nEach of these classnames supports `$breakpoints` so you can easily manage `z-index` value on each specific breakpoint:\n\n```\n@media screen and (min-width: 1280px) {\n  .z-lg-plus-12 {\n     z-index: 12\n  }\n}\n```\n\n## Transitions\n\nNightVue provides set of most usable transition timings in web. They are stored in `$transition-timings` map located in [_variables.scss](src/styles/@core/_variables.scss) file:\n```\n$transition-timings: (\n  linear:       cubic-bezier(0, 0, 1, 1),\n  ease:         cubic-bezier(0.25, 0.1, 0.25, 1),\n  ease-in:      cubic-bezier(0.42, 0, 1, 1),\n  ease-out:     cubic-bezier(0,0,0.58,1),\n  ease-in-out:  cubic-bezier(0.42, 0, 0.58, 1),\n\n  standard:     cubic-bezier(0.4, 0, 0.2, 1),\n  emphasized:   cubic-bezier(0.0, 0, 0.2, 1),\n  decelerated:  cubic-bezier(0.0, 0.0, 0.2, 1),\n  accelerated:  cubic-bezier(0.4, 0.0, 1, 1),\n\n  sharp:        cubic-bezier(0.4, 0, 0.6, 1) \n);\n```\n* First group are \"standard\" easing functions, that are already well described in [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#easing_functions)\n* Second group are easings from [Material Design 2 guidelines](https://material.io/design/motion/speed.html#easing). They have some similarities with previous group, although they are developed to be more \"eye catchy\" and each one serves some purpose\n* Third group is where you can add your own easings. We added there \"sharp\" easing. This curve may be used for objects that may return to the screen at any time in fast way. Try [cubic-bezier.com](https://cubic-bezier.com/) - it's a cool tool to create your own easings\n\nBesides timing functions there is set of transition speed:\n```\n$transition-speed: (\n  shortest: .15s,\n  shorter:  .2s,\n  short:    .25s,\n  base:     .3s,\n  slow:     .375s,\n  slower:   .5s,\n  lazy:     .75s,\n);\n```\nNightVue generates classnames based on this maps to use them in HTML:\n```\n.timing-linear      { transition-timing-function: cubic-bezier(0, 0, 1, 1) }\n.timing-ease        { transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) }\n.timing-ease-in     { transition-timing-function: cubic-bezier(0.42, 0, 1, 1) }\n.timing-ease-out    { transition-timing-function: cubic-bezier(0,0,0.58,1) }\n.timing-ease-in-out { transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1) }\n.timing-standard    { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) }\n.timing-emphasized  { transition-timing-function: cubic-bezier(0.0, 0, 0.2, 1) }\n.timing-decelerated { transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) }\n.timing-sharp       { transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1) }\n\n.speed-shortest { transition-duration: .15s }\n.speed-shorter  { transition-duration: .2s }\n.speed-short    { transition-duration: .25s }\n.speed-base     { transition-duration: .3s }\n.speed-slow     { transition-duration: .375s }\n.speed-slower   { transition-duration: .5s }\n.speed-lazy     { transition-duration: .75s }\n```\nBut we recomend to apply transitions in SCSS files. To do that use `transition()` and `complex-transition()` functions.\n\nFunction `transition()` returns transition based on `$property`, `$speed`, `$timings` and `$delay` params. Only first one param is required, others are by default `base =\u003e .3s`, `ease` and `0s`. Function searches params in `$transition-speed` and `$transition-timings` maps, but you could pass whatever you want. We advice you to pass predefined `$speed` and `$timing` values tho. Here are some examples of usage:\n```\ntransition: transition(transform);\n// =\u003e transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);\n\ntransition: transition(opacity, short, ease-in);\n// =\u003e transition: opacity 0.25s cubic-bezier(0.42, 0, 1, 1);\n\ntransition: transition(background-color, slow, emphasized);\n// =\u003e transition: background-color 0.375s cubic-bezier(0, 0, 0.2, 1);\n\ntransition: transition(color, lazy, linear, 1s);\n// =\u003e transition: color 0.75s cubic-bezier(0, 0, 1, 1) 1s;\n\ntransition: transition(box-shadow, 2s, cubic-bezier(.08,1.04,.82,-0.73));\n// =\u003e transition: box-shadow 2s cubic-bezier(.08,1.04,.82,-0.73);\n```\nIf you need apply many transitions at once we recomend to use `complex-transition()` function. It does basically the same as previous one, but you can write many transitions in clear and fancy way like this:\n```\ntransition: complex-transition(\n  transition(opacity, short, ease-in),\n  transition(background-color, slow, emphasized),\n  transition(color, lazy, linear, 1s),\n);\n\n// =\u003e transition: opacity 0.25s cubic-bezier(0.42, 0, 1, 1), background-color 0.375s cubic-bezier(0, 0, 0.2, 1), color 0.75s cubic-bezier(0, 0, 1, 1) 1s;\n```\n\n## Animations\n\nWe have prepared a mixin that will make it easier for you to write and manage animations in your project. To include animation to selector use `@animation($name, $duration, $delay, $count, $direction, $timing, $mode, $state)` mixin, where:\n\n* `$name` - name of animation.\n* `$duration` - duration of animation. Could be predefined value from `$transition-speed` map located in [_variables.scss](src/styles/@core/_variables.scss) file or any other value in seconds (s) or miliseconds (ms).\n* `$delay` - specifies the amount of time in seconds (s) or miliseconds (ms) to wait from applying the animation to an element before beginning to perform the animation. By default it is equal to 0.\n* `$count` - sets the number of times an animation sequence should be played before stopping. Default is 1 time.\n* `$direction` - sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. By default is set to \"normal\".\n* `$timing` - sets how an animation progresses through the duration of each cycle. Could be predefined value from `$transition-timings` map located in [_variables.scss](src/styles/@core/_variables.scss) file or any transition you want. Default is 'ease-in'.\n* `$mode` - sets how a CSS animation applies styles to its target before and after its execution. Default is 'forwards'.\n* `$state` - sets whether an animation is running or paused. By default it's 'running' state.\n\nIf you are not sure what each of parameters means check out [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) for in-depth explanation.\n\nNow let's take a look at example of usage:\n\n```\n@include animation(\n  $name: spin,\n  $duration: slow,\n  $delay: 1s,\n  $count: infinite,\n  $direction: reverse,\n  $timing: emphasized\n  $state: paused\n);\n\n// =\u003e\nanimation: spin 0.375s cubic-bezier(0, 0, 0.2, 1) 1s infinite reverse forwards paused;\n```\n\nOnly first two parameters are required, so you can shorten mixin like that if your are okay with default values:\n\n```\n@include animation(\n  $name: spin,\n  $duration: 2s\n);\n\n// =\u003e\nanimation: spin 2s cubic-bezier(0.42, 0, 1, 1) 0s 1 normal forwards;\n```\n\n## Rotations\n\nOften you need to rotate element by some degree. In CSS you may use `transform: rotate()` for that. NightVue provides some utility classnames to make it a little bit easier.\n\nMost common rotation angles are: `0°`, `90°`, `180°`, `270°` and `360°`. \n\nFor each angle NightVue generates classname with pattern `.rotate-${direction}-${angle}`, where `direction` might be `minus` or `plus`:\n\n```\n.rotate-minus-270  { transform: rotate(-270deg) }\n.rotate-minus-180  { transform: rotate(-180deg) }\n.rotate-minus-90   { transform: rotate(-90deg) }\n.rotate-0          { transform: rotate(0deg) }\n.rotate-plus-90    { transform: rotate(90deg) }\n.rotate-plus-180   { transform: rotate(180deg) }\n.rotate-plus-270   { transform: rotate(270deg) }\n.rotate-plus-360   { transform: rotate(360deg) }\n```\n\n## Utilities\n\nIn this section are collected small helpers which didn't find a place in the sections listed above. These classnames are described in [_utilities.scss](src/styles/@core/helpers/_utilities.scss) file:\n\n```\n.cursor-pointer       { cursor: pointer }\n.cursor-help          { cursor: help }\n.cursor-wait          { cursor: wait }\n.cursor-move          { cursor: move }\n.cursor-not-allowed   { cursor: not-allowed }\n.cursor-context-menu  { cursor: context-menu }\n.cursor-alias         { cursor: alias }\n\n.no-select   { user-select: none }\n.no-overflow { overflow: hidden }\n.no-events   { pointer-events: none }\n\n.visible     { visibility: visible }\n.invisible   { visibility: hidden }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightrunner91%2Fnightvue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnightrunner91%2Fnightvue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnightrunner91%2Fnightvue/lists"}