diff --git a/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/css-variables-and-overrides.md b/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/css-variables-and-overrides.md index ddd43e67de..4429aef7fc 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/css-variables-and-overrides.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/css-variables-and-overrides.md @@ -4,19 +4,19 @@ section: get-started subsection: training hideNavItem: true --- -import { Button, ClipboardCopy, Divider, PageSection } from '@patternfly/react-core'; +import { Button, Divider } from '@patternfly/react-core'; - # CSS variables and overrides -PatternFly Core is based on the principles of Atomic Design and BEM (Block, Element, Modifier). BEM is a popular CSS methodology for building modular, scalable applications. It provides scope, avoids inheritance, and reduces CSS specificity and conflicts. -BEM works perfectly with a modular design system, as each unique component can be represented as an independent block. Since a block is tied to a component, developers are able to develop, move around, and nest components without conflicts in their application’s CSS. +PatternFly is based on the principles of Atomic Design and BEM (Block, Element, Modifier). BEM is a popular CSS methodology for building modular, scalable applications. It provides scope, avoids inheritance, and reduces CSS specificity and conflicts. + +BEM works perfectly with a modular design system, as each unique component can be represented as an independent block. Since a block is tied to a component, developers are able to develop, move around, and nest components without conflicts in their application's CSS. PatternFly uses a modified version of BEM for its CSS architecture. PatternFly deviates from BEM in relation to modifiers. This tutorial covers how PatternFly uses BEM as a framework for its component library. You'll learn how to override and create both global and component-level custom properties and component elements. - - + ## Part 1: Overriding PatternFly component-level properties + In PatternFly, component-level custom properties follow this general formula: `--pf-v6-c-block[__element][--modifier][--state][--breakpoint][--pseudo-element]--PropertyCamelCase.` - `--pf-v6-c-block` refers to the block, usually the component or layout name (for example, `--pf-v6-c-alert`). @@ -29,36 +29,43 @@ In PatternFly, component-level custom properties follow this general formula: To explore this concept, you can practice overriding the title color custom property in the success variation of the alert component using the provided CodeSandbox. - + ### Step 1. Familiarize with `index.html` + Note the alert component in the `` of `index.html`. ### Step 2. Create custom property name and styles -Write the CSS for the custom property name in the `style.css` file. Overriding the success variation’s title color means overriding its custom property. -#### Step 2.1 +Write the CSS for the custom property name in the `style.css` file. Overriding the success variation's title color means overriding its custom property. + +#### Step 2.1 + In the `style.css` file, in the `.pf-v6-c-alert{}` block, write the custom property name. In reference to the formula described in Part 1, this should be: `--pf-v6-c-alert` -#### Step 2.2 +#### Step 2.2 + Add the modifier to the custom property name. As displayed in the CSS variables of PatternFly's alert component documentation, the success variation modifier class `pf-m-success` applies to `pf-v6-c-alert`. Add that modifier to the custom property. The custom property name should now be: `--pf-v6-c-alert--m-success` -#### Step 2.3 +#### Step 2.3 + Add the element to the custom property name. The element that is being changed is the title of the alert. The custom property name should now be: `--pf-v6-c-alert--m-success__title` -#### Step 2.4 +#### Step 2.4 + Add the property that is being modified. In this case, modify the color property of the title in the alert component. The custom property name should now be: `--pf-v6-c-alert--m-success__title--Color` -#### Step 2.5 -Define the value of the component-level CSS variable. PatternFly's global danger color is: `--pf-v6-global--danger-color--100`. You can reference PatternFly’s global colors documentation for more information. +#### Step 2.5 + +Define the value of the component-level CSS variable. PatternFly's global danger color is: `--pf-v6-global--danger-color--100`. You can reference PatternFly's global colors documentation for more information. Assign the custom property name `(--pf-v6-c-alert--m-success__title--Color)` that is already inside the `.pf-v6-c-alert{}` block to the global danger color. @@ -67,11 +74,13 @@ It should look like this: `--pf-v6-c-alert--m-success__title--Color: var(--pf-v6 The resulting alert should match Figure 1. **Figure 1** + Alert component with a red title - + - + ## Part 2: Overriding PatternFly global properties + In PatternFly, global properties follow this general formula: `--pf-v6-global--concept--PropertyCamelCase--modifier--state` @@ -86,42 +95,48 @@ To explore this concept, override the global link color by setting it to the cus ### Step 1. Familiarize with `index.html` + Note the button component and the expandable section component in the `` of the `index.html` file. ### Step 2. Override a global custom property -#### Step 2.1 +#### Step 2.1 + Write the prefix for the global custom property in the `:root` block in the `styles.css` file. Since global custom properties are prefixed with the word global, use that for the beginning of the custom property. It should look like this: `--pf-v6-global` -#### Step 2.2 +#### Step 2.2 + Add the concept to the global custom property. The concept for the link color is `link`. The global custom property should now look like this: `--pf-v6-global--link` -#### Step 2.3 +#### Step 2.3 + Add the property to the global custom property. As the color is being modified, add the color property as the next step. The global custom property should now look like: `--pf-v6-global--link--Color` -#### Step 2.4 +#### Step 2.4 + Define the value of the global variable. PatternFly's global danger color is: `--pf-v6-global--danger-color--100`. Assign the custom property name `(--pf-v6-global--link--Color)` that is already inside of the `:root` block to the global danger color. It should look like this: `--pf-v6-global--link--Color: var(--pf-v6-global--danger-color--100);` -The resulting UI in the CodeSandbox should match Figure 2. +The resulting UI in the CodeSandbox should match Figure 2. **Note:** The links in the button component and expandable component both have inherited the new red link color. **Figure 2.** An inline button and a 'show more' expandable section toggle both colored red - + - + ## Part 3: Create and use component level CSS variables to override PatternFly styles + It is important to understand how BEM is used to create and override variables. To explore this concept, add a BEM element and custom styles with CSS custom properties to support a badge element in the label component using the provided CodeSandbox for part 3. Assume there is a common use case for adding a badge to the left of text in the label component. When adding the custom badge element to the label component, also apply a margin-right of 8px. @@ -129,45 +144,53 @@ To explore this concept, add a BEM element and custom styles with CSS custom pro ### Step 1. Familiarize with `index.html` + Note the label component in the `` of the `index.html`. This label contains a badge component and some text. The default PatternFly label component only styles the label itself and the text inside. Since there has been a badge component passed into the label, it is necessary to add space between the badge and the text beside it. To do this the BEM way, a BEM element class `(pf-v6-c-label__badge)` has been applied to the badge. ### Step 2. Style the badge + **Note:** Never apply a global custom property as the value for a property in a component's CSS. -#### Step 2.1 +#### Step 2.1 + Create a new variable to represent the badge's margin. Within style.css, in the `.pf-v6-c-label{}` block, define the beginning of the custom property, which is the name of the component. It should look like: `--pf-v6-c-label` -#### Step 2.2 +#### Step 2.2 + Define the value of the new custom property. Add the element after the name of the component. The custom property should now be: `--pf-v6-c-label__badge` -#### Step 2.3 +#### Step 2.3 + Add the property being applied to the badge after the element. It should look like this: `--pf-v6-c-label__badge--MarginRight` -#### Step 2.4 -Define the value of the new custom CSS variable. PatternFly's global variable for 8px of space is `--pf-v6-global--spacer--sm`. You can reference PatternFly’s documentation about spacers for more information. +#### Step 2.4 + +Define the value of the new custom CSS variable. PatternFly's global variable for 8px of space is `--pf-v6-global--spacer--sm`. You can reference PatternFly's documentation about spacers for more information. Assign the custom property name `--pf-v6-c-label__badge--MarginRight` that is already inside of the `.pf-v6-c-label{}` block to the global variable for 8px of space. It should look like this: `--pf-v6-c-label__badge--MarginRight: var(--pf-v6-global--spacer--sm);` #### Step 2.5 + Assign the new custom property name to the property that is being overridden. Add a margin-right declaration inside of `.pf-v6-c-label__badge{}` and assign it to the new margin variable. It should look like this: `margin-right: var(--pf-v6-c-label__badge--MarginRight);` **Note:** Once the preview reloads, there should be space to the right of the badge. - + - + ## Part 4: Create and use global CSS variables to override PatternFly styles + To explore this concept, create a new global custom property for a 5xl font size. Use this new global property to make a new variation of the title component using the provided CodeSandbox for part 4. Referencing PatternFly's typography design guidelines, the largest font size PatternFly offers is a "super hero heading" size. It is 36px represented by the global variable `pf-v6-global--FontSize--4xl`. Assume that there is a need for a larger font size for the title component that is used across the entire application. @@ -175,40 +198,49 @@ Referencing Pattern ### Step 1. Familiarize with `index.html` + Note the title component in the `` of the `index.html` file. It has a modifier class applied to it which has no PatternFly styles defined for it thus far. ### Step 2. Define a global custom property name + Follow the existing convention for global font size custom properties. #### Step 2.1 + Add the new custom property for font size inside of the `:root{}` block. This applies it to the global scope of the application. It should look like this: `--pf-v6-global--FontSize--5xl` -#### Step 2.2 +#### Step 2.2 + Define the value of the new global variable. Assign the property name to the pixel value for the new font size. Update the line added in step 2.1 to be 42px. It should look like this: `--pf-v6-global--FontSize--5xl: 42px;` ### Step 3. Create a local component level custom property + Create a local component level custom property in the `.pf-v6-c-title{}` block in the styles.css file. Set its value to the newly defined global property. The local custom property should represent the 5xl variation's font size. -#### Step 3.1 +#### Step 3.1 + Beginning with the component name, write the custom property and add it to the `.pf-v6-c-title{}` block in the `style.css` file. It should look like this: `--pf-v6-c-title` -#### Step 3.2 +#### Step 3.2 + Add the new modifier to the custom property name. It should look like this: `--pf-v6-c-title--m-5xl` -#### Step 3.3 +#### Step 3.3 + Add the property that the custom property represents. It should look like this: `--pf-v6-c-title--m-5xl--FontSize` -#### Step 3.4 +#### Step 3.4 + Define the value of the component level custom property to be equal to the newly defined global variable. It should look like this: `--pf-v6-c-title--m-5xl--FontSize: var(--pf-v6-global--FontSize--5xl);` @@ -216,6 +248,7 @@ It should look like this: `--pf-v6-c-title--m-5xl--FontSize: var(--pf-v6-global- ### Step 4. Define the styles for the new 5xl variation. #### Step 4.1 Chain selectors + Knowing that the modifier `.pf-m-5xl` will apply to the title component, in the CSS, chain the selector to create `.pf-v6-c-title.pf-m-5xl` Add this block inside of `.pf-v6-c-title`, underneath the declaration from step 3. @@ -225,15 +258,16 @@ Add this block inside of `.pf-v6-c-title`, underneath the declaration from step } ``` -#### Step 4.2 +#### Step 4.2 + Create a declaration within the modifier block for the font-size CSS rule using the new component level custom property. It should look like: `font-size: var(--pf-v6-c-title--m-5xl--FontSize);` inside of `.pf-m-5xl{}`. - + - + ### Compare your results. + A fully constructed card can be viewed and modified in the CodeSandbox solution for part 4. Compare your work with the solution. - diff --git a/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/fundamentals.md b/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/fundamentals.md index c66d75566d..4c462f5452 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/fundamentals.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/training/html-css/fundamentals.md @@ -4,13 +4,12 @@ section: get-started subsection: training hideNavItem: true --- -import { Button, ClipboardCopy, Divider, PageSection } from '@patternfly/react-core'; +import { Button, Divider } from '@patternfly/react-core'; import { CopyCodeBlock } from '../copyCodeBlock/copyCodeBlock'; - # Fundamentals -PatternFly Core is based on the principles of Atomic Design and BEM (Block, Element, Modifier). +PatternFly is based on the principles of Atomic Design and BEM (Block, Element, Modifier). Atomic Design is a methodology for creating design systems. Using Atomic Design, user interfaces are broken down into reusable components that can be reassembled to create reusable interaction patterns. PatternFly consists of isolated and modular structures that fall into three categories: @@ -19,14 +18,14 @@ PatternFly consists of isolated and modular structures that fall into three cate - Demos illustrate how to assemble components and layouts into complex structures. ## Components + In PatternFly, components are the basic building blocks of user interfaces. They cannot be broken down into smaller parts. Examples include the button, label, and badge components. A CodeSandbox link has been provided to experiment with and follow the proceeding steps. - - ### Step 1. Add a button component. -Add a button element to the `` of the `index.html` file. To apply PatternFly styling to the button, add the class `pf-v6-c-button`. To also apply ‘primary’ styling to the button and make it a bright blue color, add the `pf-m-primary` class. + +Add a button element to the `` of the `index.html` file. To apply PatternFly styling to the button, add the class `pf-v6-c-button`. To also apply 'primary' styling to the button and make it a bright blue color, add the `pf-m-primary` class. {``} @@ -41,46 +40,47 @@ Primary\n`} ### Step 2. Build more complex components + Simple components can be combined to make more complex components that are still reusable. When simpler components are used within more complex components, the layout of the elements are defined in the stylesheet for the complex component. -In this step, add a badge component to the chip component. +In this step, build a label component with a close button. + +#### Step 2.1 -#### Step 2.1 -To build a chip component, replace the contents of the `` in the index.html file with the following code snippet. +To build a label component, replace the contents of the `` in the index.html file with the following code snippet. -{`
- - Chip - -\n
`} +{` + + + Label + +\n`} -This is the default chip component that already has another component in it: the button. This is why the chip can be considered as a more complex component. +This is a basic filled label. It is made up of nested elements: a content wrapper and a text element. #### Step 2.2 -Add the badge inside the chip. To do this, add this block of code between `pf-v6-c-chip__text` and `pf-v6-c-button`. + +Make the label removable by adding a close button. To do this, add this block of code after the closing `` of `pf-v6-c-label__content` and before the closing `` of `pf-v6-c-label`. -{` -7\n`} +{` +\n`} -**Note:** Remember, this is a component and not a demo because the chip component includes styles that handle how the badge looks within the chip. For example, when the badge component is added to the chip, it receives styling that gives it a margin. You can see that the badge in a chip has its own CSS variable, `--pf-v6-c-chip__c-badge--MarginLeft`, defined for the right margin under the CSS Variables section of the chip documentation. +**Note:** Remember, this is a component and not a demo because the label component includes styles that handle how the button looks within the label. For example, the label has its own CSS variable, `--pf-v6-c-label--m-filled__actions--c-button__icon--Color`, that controls the color of the button icon within a filled label. You can see this under the CSS variables section of the label documentation. Also note the `aria-label` attribute on the button, which provides an accessible name for icon-only buttons. -The resulting chip should match the following image. - -Example of a rendered and styled chip component - - + ## Layouts In PatternFly, layouts allow for organizing and grouping elements. This tutorial covers just 1 of the 7 layouts. -### Step 1 +### Step 1 + Copy code into the `` of the `index.html` file. @@ -98,21 +98,24 @@ Copy code into the `` of the `index.html` file. \n`} -### Step 2 +### Step 2 + Add the `pf-v6-l-bullseye` class to the card. This will center the card horizontally and vertically on the page. Find the outermost `
` wrapper for the card and add the class `pf-v6-l-bullseye`. It should look like: `
` **Note:** It's important to follow the documentation for layouts because it demonstrates where to add the layout class. The documentation for bullseye specifies to add the class `pf-v6-l-bullseye` to the parent container of its child. - + - + ## Demos -Demos show how PatternFly’s components and layouts are put together to build more complex structures. Demos have no additional styling; they are strictly made from components and layouts. If styling is needed for a certain demo, then instead create new components or layouts, or variants of the components or layouts. + +Demos show how PatternFly's components and layouts are put together to build more complex structures. Demos have no additional styling; they are strictly made from components and layouts. If styling is needed for a certain demo, then instead create new components or layouts, or variants of the components or layouts. Create a form demo using components and layouts. ### Step 1. Add five form components + Copy and paste this block of code 5 times in the index.html file. @@ -126,14 +129,17 @@ Copy and paste this block of code 5 times in the index.html file.
- + + +
\n`} ### Step 2. Apply a grid layout -#### Step 2.1 +#### Step 2.1 + Add one `
` wrapper around all 5 form components with the `pf-v6-l-grid` layout class. It should look like this: ```noLive @@ -142,40 +148,43 @@ Add one `
` wrapper around all 5 form components with the `pf-v6-l-grid` lay
``` -### Step 3. +### Step 3 + Wrap each form component in its own `pf-v6-l-grid__item` layout class. To do this, look for each `pf-v6-c-form` in `index.html` and wrap it in the `pf-v6-l-grid__item` class. The wrapper should look like this: ```noLive -
+
/* code for individual form component */
``` -### Step 4. Add the `pf-m-gutter` modifier class to the grid layout +### Step 4. Add the `pf-m-gutter` modifier class to the grid layout + Adding the `pf-m-gutter` modifier class to the grid layout ensures there is equal spacing around all children. Add the class `pf-m-gutter` after `pf-v6-l-grid` to the outermost wrapper, inside the quotation marks. It should look like: `
` + **Note:** Learn how modifier classes work with layout classes by looking at PatternFly's grid documentation. ### Step 5. Add modifier classes to the grid item classes. + This step modifies the number of columns that a grid item spans. The maximum number of columns that a grid item can span is 12 (which is equivalent to 100%). -#### Step 5.1 -Find each `pf-v6-l-grid__item` that was added in step 3 and add the class `pf-m-[number from 1 - 12]`. The numbers across a row should add up to 12. -#### Step 5.2 +#### Step 5.1 + +Find each `pf-v6-l-grid__item` that was added in step 3. To adjust the width of the elements in the grid, add modifier classes in the format of `pf-m-[number from 1 - 12]-col`. The numbers across a row should add up to 12. + Add `pf-m-6-col` to the first 2 grid items and add `pf-m-4-col` to the last 3 grid items. The first 2 grid items should look like: `
` -The second 2 grid items should look like: `
` - +The last 3 grid items should look like: `
` + - + ## Compare your results. A fully constructed demo can be viewed and modified in the provided CodeSandbox solution. Compare your work with the solution. - - diff --git a/packages/documentation-site/patternfly-docs/content/get-started/training/react/fundamentals.md b/packages/documentation-site/patternfly-docs/content/get-started/training/react/fundamentals.md index fe802106cc..b8979bc485 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/training/react/fundamentals.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/training/react/fundamentals.md @@ -5,21 +5,21 @@ subsection: training hideNavItem: true --- -import { Button, ClipboardCopy, Divider, PageSection } from '@patternfly/react-core'; +import { Button, Divider } from '@patternfly/react-core'; import { CopyCodeBlock } from '../copyCodeBlock/copyCodeBlock'; - # React fundamentals + PatternFly React is made up of components, layouts, and demos. The PatternFly React library provides a collection of React components used to build interfaces with consistent markup, styling, and behavior. To become familiar with building UIs with PatternFly, you will build a PatternFly card. A card is a flexible element for containing any type of content. Cards are used on dashboards, in data displays, or for positioning content on a page. - - + ## Step 1. Consider and evaluate the design -Consider the design in Figure 1 and evaluate which components and subcomponents compose the design. +Consider the design in Figure 1 and evaluate which components and subcomponents compose the design. **Figure 1** + Basic card layout Figure 1 is a design using PatternFly's card component. To learn more, read the documentation for a card's React implementation and the HTML structure. @@ -30,12 +30,10 @@ In this exercise, create a card to match the design in figure 1 with an image, c Basic card visually segmented into various subcomponents -The design in Figure 1 can be broken down into the card’s various subcomponents, as demonstrated in Figure 2. The React components used to construct this card can be arranged, as demonstrated in the card structure code snippet below. You can also view and modify this code in the provided CodeSandbox. +The design in Figure 1 can be broken down into the card's various subcomponents, as demonstrated in Figure 2. The React components used to construct this card can be arranged, as demonstrated in the card structure code snippet below. You can also view and modify this code in the provided CodeSandbox. - - **Card structure** @@ -49,13 +47,14 @@ The design in Figure 1 can be broken down into the card’s various subcomponent \n`} - - + ## Step 2. Build out the `CardHeader` + The `CardHeader` contains `CardHeaderMain` and `CardActions`. ### Step 2.1 + Add a `brand` component to the `CardHeaderMain` component to place a product logotype on a screen. All that is needed is the source image or SVG and alt text. Here the PatternFly logo is used. @@ -65,6 +64,7 @@ alt="Patternfly Logo"\n/>`} ### Step 2.2 + Add a close button to the `CardActions` component. Buttons communicate and trigger actions a user can take in an application or website. They come in several variants, such as `primary`, `secondary`, `tertiary`, `danger`, `plain`, `link`, and `control`. Add a button using the `plain` variant. @@ -73,20 +73,22 @@ Add a button using the `plain` variant. ### Step 2.3 + Add an icon inside the button. PatternFly React provides a variety of icons. They're easy to use and compile into SVG files. Use them inside buttons and other components. Add a `TimesIcon` so that the card can be closed. {``} - + - + ## Step 3. Build out the `CardTitle` ### Step 3.1 + Add the content component with a variant inside of the ``. The content component can wrap any static HTML content that is placed on the page to provide correct formatting when using standard HTML tags. The content component comes in several variations, such as `h1`, `p`, `a`, `small`, `blockquote`, and `pre`. -Use the ‘p’ variation, which is specified with `component="p"`. +Use the 'p' variation, which is specified with `component="p"`. Add the following code inside the `CardTitle` component: @@ -95,6 +97,7 @@ PatternFly\n`} ### Step 3.2 + Add a subhead below the content added in Step 3.1. `Content` without component prop is used to wrap html elements and provides them with extra spacing and styling. Add the following code below the content component that is inside of the `CardTitle`: @@ -104,17 +107,19 @@ Add the following code below the content component that is inside of the `CardTi Provided by Red Hat \n`} - + - + ## Step 4. Add content to the `CardBody` component + Any filler text can be added as a child of the `CardBody` component. - + - + ## Step 5. Add content and a layout to the `CardFooter` ### Step 5.1 + Add a split layout to the `CardFooter` component. PatternFly offers several layout options, including grid, bullseye, and split layouts. @@ -129,6 +134,7 @@ Use a split layout to separate a pair of buttons in the footer of the card. The ### Step 5.2 + Add a button to the first `SplitItem` component. Use the link variant of the button and add an `isInline` property so that the buttons are inline rather than block elements. @@ -136,6 +142,7 @@ Add a button to the first `SplitItem` component. Use the link variant of the but ### Step 5.3 + Add a button to the second `SplitItem` component. Use the same variant and properties as Step 5.2. @@ -143,18 +150,17 @@ Add a button to the second `SplitItem` component. Use the same variant and prope ### Step 5.4 + Add a `hasGutter` property to the `Split` component to add more spacing between the buttons. The `Split` component should look like this with the `hasGutter` property set. {``} - + - + ## Compare your results A fully constructed card can be viewed and modified in the CodeSandbox solution. Compare your work with the solution. - -