@specific-group/spg-design-system

Getting started

A quick tutorial to get you up and running with SPG Design system.

Prerequisites

First, you need to make sure that you have a working Tailwindcss CSS and Angular Material (>=v15) project installed.

📌 Iconography

In documentation we are using Phosphor Icons as icon pack. you can use other icon packs as well but we suggest to use Phosphor Icons or Angular Icons (ng-icons) icon packs. we do not guarantee other icon pack works well with our styles.

1. Install the SPG Design system

install SPG design system via npm

npm i @specific-group/spg-design-system

2. Configure tailwindcss

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: ["./src/**/*.{html,ts}"],
  darkMode: "class",
  plugins: [require("@specific-group/spg-design-system/plugin/global.config")],
};

3. Add style files to your global SCSS

Import the tailwindcss and SPG Design system style and config font family for angular material components.

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@specific-group/spg-design-system/styles/core/mat-mdc-config";
@import "@specific-group/spg-design-system/styles/style";

Note: you don't need to import angular material style in angular.json file and you can remove it.