Best practices for importing template to existing project

[kamil]

What is the best way how to introduce PrimeTek commercial templates (Diamond) to existing project? I followed documentation https://www.primefaces.org/diamond-ng/#/documentation and for now (in clean project) I'm satisfied. So let me share my steps here.

The most important for me is to have as less as possible work & issues in the future, when new version of Diamond will be released by PrimeTek. Secondly I don't want to import any demo/showcase/landing/etc. pages that are in downloaded template (primeng-diamond-11.0.0'). I would like to copy to my project just stuff that is really needed. And Diamond project I'll use "just" as reference and live documentation.

My goal is to use Diamond template and do just few changes like primary, secondary color, logo, border-radius (but maybe more in the future). But I prefer to do it on one/two places, using the constant as mentioned in Diamond doc part: A custom theme can be developed by the following steps. Since I don't know how many changes I will finally need, I believe that creating my own custom theme based on Diamond fits more.

Code: Select all

ng new MyDiamondSASS --style=scss --routing=true

npm install @angular/cdk --save
npm install primeng@latest --save
npm install primeicons@latest --save
npm install primeflex@latest --save

copy primeng-diamond-11.0.0/src/assets/sass/			to MyDiamondCSS/src/assets/sass/
copy primeng-diamond-11.0.0/src/assets/layout/fonts/     	to MyDiamondCSS/src/assets/layout/fonts
copy primeng-diamond-11.0.0/src/assets/layout/images/		to MyDiamondCSS/src/assets/layout/images

Create a scss files for theme & layout :

Code: Select all

MyDiamondSAAS/assets/theme/mytheme/theme.scss
MyDiamondSAAS/assets/layout/mylayout/layout.scss

Put content (copied from Diamond doc) to theme.scss

Code: Select all

// R E Q U I R E D   V A R I A B L E S
$primaryColor: #2196F3;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;
$highlightBg: #E3F2FD;
$highlightTextColor: #495057;

// C U S T O M   V A R I A B L E S
// space for my stuff

@import '../../sass/theme/_theme_light';

Put content (copied from Diamond doc) to the layout.scss

Code: Select all

// R E Q U I R E D   V A R I A B L E S
// no required variables

// C U S T O M   V A R I A B L E S
// space for my stuff

@import '../../sass/layout/_layout_light';

Compile or Watch

Code: Select all

sass --update src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
sass --watch src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css

sass --update src/assets/layout/mylayout/layout.scss:src/assets/layout/mylayout/layout.css
sass --watch src/assets/layout/mylayout/layout.scss:src/assets/layout/mylayout/layout.css

Add generated css to the MyDiamondSASS/src/styles.scss (noted dot in path ./)

Code: Select all

@import "../node_modules/primeicons/primeicons.css";
@import "../node_modules/primeflex/primeflex.scss";
@import "../node_modules/primeng/resources/primeng.min.css";

@import "./assets/theme/mytheme/theme.css";
@import "./assets/layout/mylayout/layout.css";

Issue: then I added also this image since I got error from layout-light.scss' during build/serve: 'background-image: url("../../demo/images/widgets/user-card.jpg");'

Code: Select all

ng serve

And finally I verified that my custom changes are applicated in generated css:

theme.scss

Code: Select all

// R E Q U I R E D   V A R I A B L E S
// $primaryColor: #2196F3;
$primaryColor: #063954;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;
$highlightBg: #E3F2FD;
$highlightTextColor: #495057;

// C U S T O M   V A R I A B L E S
$fontFamily: Courier;
$borderRadius: 0px;

$infoButtonBg: #62b3e5;
$secondaryButtonBg: #62b3e5;

@import '../../sass/theme/_theme_light';

layout.scss

Code: Select all

// R E Q U I R E D   V A R I A B L E S

// no required variables

// C U S T O M   V A R I A B L E S
$fontFamily: Courier;

@import '../../sass/layout/_layout_light';

[merve7]

Hi,
Glad to hear that you are satisfied