LingraphicaSass

Stylesheets are located in vendor/assets/stylesheets

This repo can be imported as a Node Module or Ruby Gem.

Projects that use these styles must also use Bootstrap version 4.0.0 +

Installation

Ruby:

Add this line to your application's Gemfile:

gem 'lingraphicaSass', '1.2.0', git: "https://github.com/lingraphica/LingraphicaSass.git"

And then execute:

$ bundle

NPM:

Add this line to your application's package.json:

"lingraphica-sass": "https://github.com/lingraphica/LingraphicaSass.git#1.2.0"

And then execute:

npm install

Usage

Ruby:

In the application.scss file import the stylesheet

@import "lingraphicaSass";

Vue:

How to get access to LG styles in component's html templates

In main.js file import the stylesheet after the Booststrap imports

import BootstrapVue from 'bootstrap-vue';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import 'lingraphica-sass';

How to get access to LG styles in component's stylesheet

Options 1: Import the stylesheet in any component that will use the LG styles in the stylesheet

<style lang="scss">
@import "lingraphica-sass";

Option 2: Globally import the stylesheet using vue.config.js files

Steps

1. In the root of the project create a file called vue.config.js
2. add the following

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "lingraphica-sass";`
      }
    }
  }
};

Colors

$lingraphica-blue
$lingraphica-dark-teal
$lingraphica-orange
$lingraphica-true-black
$lingraphica-pumpkin
$lingraphica-sky
$lingraphica-dark-gray
$lingraphica-light-gray
$lingraphica-peacock
$lingraphica-soft-purple
$lingraphica-grass
$lingraphica-burnt-orange
$lingraphica-true-red
$lingraphica-sunshine

Button Classes

.btn-lingraphica-blue
.btn-lingraphica-dark-teal
.btn-lingraphica-orange
.btn-lingraphica-true-red

Example:

<button class="btn btn-lingraphica-blue">Hello</button>

Navbar Class

.navbar-lingraphica

Example:

<nav class="navbar navbar-lingraphica navbar-expand-lg" role="navigation">