From f50bc22c272f6da2356d2bf44f91becd74207cdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 26 Dec 2023 17:46:26 +0300 Subject: [PATCH] css layer section added --- .../doc/guides/csslayer/bootstrapdoc.ts | 21 +++++++ .../doc/guides/csslayer/normalizedoc.ts | 21 +++++++ .../showcase/doc/guides/csslayer/resetdoc.ts | 32 ++++++++++ .../doc/guides/csslayer/specificitydoc.ts | 58 +++++++++++++++++++ .../doc/guides/csslayer/tailwinddoc.ts | 31 ++++++++++ .../showcase/doc/guides/guidesdoc.module.ts | 11 +++- .../csslayer/csslayerdemo.component.html | 2 +- .../guides/csslayer/csslayerdemo.component.ts | 41 ++++++++++++- 8 files changed, 212 insertions(+), 5 deletions(-) create mode 100644 src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/normalizedoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/resetdoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/specificitydoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/tailwinddoc.ts diff --git a/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts b/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts new file mode 100644 index 00000000000..16fde7cca99 --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'bootstrap-doc', + + template: ` + +

Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.

+ + + ` +}) +export class BootstrapDoc { + code: Code = { + basic: `@layer bootstrap-reboot, primeng + +@import "bootstrap-reboot.css" layer(bootstrap-rebooot); +` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/normalizedoc.ts b/src/app/showcase/doc/guides/csslayer/normalizedoc.ts new file mode 100644 index 00000000000..f31993e494c --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/normalizedoc.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'normalize-doc', + + template: ` + +

Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primeNG coming after the normalized layer.

+ + + ` +}) +export class NormalizeDoc { + code: Code = { + basic: `@layer normalize, primeng; + +@import "normalize.css" layer(normalize-reset); +` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/resetdoc.ts b/src/app/showcase/doc/guides/csslayer/resetdoc.ts new file mode 100644 index 00000000000..4d48fbca1ed --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/resetdoc.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'reset-doc', + + template: ` + +

+ Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeNG because global styles with a broader scope e.g. button { } and no layer + always override the PrimeNG components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best + practice is wrapping your CSS in a layer like reset and make sure primeNG comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeNG components. +

+ + + ` +}) +export class ResetDoc { + code: Code = { + basic: `/* Order */ +@layer reset, primeng; + +/* Reset CSS */ +@layer reset { + button, + input { + /* CSS to Reset */ + } +} +` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts new file mode 100644 index 00000000000..3491bb16dda --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts @@ -0,0 +1,58 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'specificity-doc', + + template: ` + +

A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.

+

+ The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at + MDN to begin with. In styled mode, PrimeNG wraps the built-in style classes under the primeNG cascade layer to make the library styles easy to override. CSS + in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. +

+

+ For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without + the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as + my-switch-slider. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components. +

+
+ +
+ + +

Layers also make it possible to use CSS Modules, view the CSS Modules guide for examples.

+ + `, + styles: ` + :host ::ng-deep { + .my-inputswitch .p-inputswitch-slider { + border-radius: 0; + } + .my-inputswitch .p-inputswitch-slider:before { + border-radius: 0; + } + } + ` +}) +export class SpecificityDoc { + checked: boolean = false; + + code: Code = { + basic: ` + + + ` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts new file mode 100644 index 00000000000..61da889f2da --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'tailwind-doc', + + template: ` + +

+ Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in separate + layers and make sure primeNG layer comes after the base. +

+ + + ` +}) +export class TailwindDoc { + code: Code = { + basic: `@layer tailwind-base, primeng, tailwind-utilities; + +@layer tailwind-base { + @tailwind base; +} + +@layer tailwind-utilities { + @tailwind components; + @tailwind utilities; +} + ` + }; +} diff --git a/src/app/showcase/doc/guides/guidesdoc.module.ts b/src/app/showcase/doc/guides/guidesdoc.module.ts index 6282316dbbf..ef66380679c 100644 --- a/src/app/showcase/doc/guides/guidesdoc.module.ts +++ b/src/app/showcase/doc/guides/guidesdoc.module.ts @@ -11,10 +11,15 @@ import { IntroductionDoc } from './accessibility/introductiondoc'; import { SemanticHTMLDoc } from './accessibility/semantichtmldoc'; import { WAIARIADoc } from './accessibility/waiariadoc'; import { WCAGDoc } from './accessibility/wcagdoc'; - +import { SpecificityDoc } from './csslayer/specificitydoc'; +import { ResetDoc } from './csslayer/resetdoc'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { TailwindDoc } from './csslayer/tailwinddoc'; +import { BootstrapDoc } from './csslayer/bootstrapdoc'; +import { NormalizeDoc } from './csslayer/normalizedoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule], + imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule, InputSwitchModule], exports: [AppDocModule], - declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc] + declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc, SpecificityDoc, ResetDoc, TailwindDoc, BootstrapDoc, NormalizeDoc] }) export class GuidesDocModule {} diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html index a9cf963aee4..cfcdaee2314 100644 --- a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts index 12645728830..fdf48751677 100644 --- a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts @@ -1,9 +1,48 @@ import { Component } from '@angular/core'; +import { BootstrapDoc } from 'src/app/showcase/doc/guides/csslayer/bootstrapdoc'; +import { NormalizeDoc } from 'src/app/showcase/doc/guides/csslayer/normalizedoc'; +import { ResetDoc } from 'src/app/showcase/doc/guides/csslayer/resetdoc'; +import { SpecificityDoc } from 'src/app/showcase/doc/guides/csslayer/specificitydoc'; +import { TailwindDoc } from 'src/app/showcase/doc/guides/csslayer/tailwinddoc'; @Component({ selector: 'css-layer', templateUrl: './csslayerdemo.component.html' }) export class CssLayerDemoComponent { - docs = []; + docs = [ + { + id: 'css-specificity', + label: 'CSS Specificity', + component: SpecificityDoc + }, + { + id: 'reset', + label: 'Reset', + component: ResetDoc + }, + { + id: 'libraries', + label: 'Libraries', + description: 'Compatibility between PrimeVue and CSS libraries.', + children: [ + { + id: 'tailwind', + label: 'Tailwind CSS', + component:TailwindDoc + }, + { + id: 'bootstrap', + label: 'Bootstrap', + component:BootstrapDoc + }, + { + id: 'normalize', + label: 'Normalize', + component:NormalizeDoc + }, + + ] + } + ]; }