-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: creating an index page for Netlify (#1012)
* docs: creating an index page for Netlify * fixing misspelling
- Loading branch information
Showing
4 changed files
with
275 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,275 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>PatternFly Elements</title> | ||
| <meta name="description" content="PatternFly Elements. A set of community-created web components based on PatternFly design."> | ||
| <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&family=Red+Hat+Text&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="elements/pfelement/dist/pfelement.min.css"> | ||
| <link rel="stylesheet" href="elements/pfe-styles/dist/pfe-base.min.css"> | ||
| <link rel="stylesheet" href="elements/pfe-styles/dist/pfe-layouts.min.css"> | ||
| <script type="module" src="elements/pfe-band/dist/pfe-band.min.js"></script> | ||
| <script type="module" src="elements/pfe-cta/dist/pfe-cta.min.js"></script> | ||
| <script type="module" src="elements/pfe-card/dist/pfe-card.min.js"></script> | ||
| <style> | ||
| html, | ||
| body { | ||
| --pfe-theme--font-family--heading: 'Red Hat Text', sans-serif; | ||
| font-family: 'Red Hat Text', sans-serif; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3 { | ||
| font-weight: 400; | ||
| font-family: 'Red Hat Display', sans-serif; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 36px; | ||
| } | ||
|
|
||
| .tagline { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| @media (min-width: 540px) { | ||
| h1 { | ||
| font-size: 48px; | ||
| } | ||
|
|
||
| .tagline { | ||
| font-size: 24px; | ||
| } | ||
| } | ||
|
|
||
| .title { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| pfe-card h2, | ||
| pfe-card h3 { | ||
| margin-top: 8px; | ||
| } | ||
|
|
||
| pfe-card h3 { | ||
| font-weight: 700; | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| a:visited { | ||
| color: inherit; | ||
| } | ||
|
|
||
| .header-ctas { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .header-ctas pfe-cta:first-child { | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| @media (min-width: 500px) { | ||
| .header-ctas { | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| .header-ctas pfe-cta:first-child { | ||
| margin-bottom: 0; | ||
| margin-right: 16px; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body unresolved> | ||
| <header> | ||
| <pfe-band pfe-color="accent" class="pfe-l--text-align--center"> | ||
| <h1 class="title">PatternFly Elements</h1> | ||
| <p class="tagline">A set of community-created web components based on PatternFly design.</p> | ||
| <div class="header-ctas"> | ||
| <pfe-cta pfe-priority="primary"> | ||
| <a href="/examples">View the components</a> | ||
| </pfe-cta> | ||
| <pfe-cta pfe-priority="secondary"> | ||
| <a href="https://github.com/patternfly/patternfly-elements">View on GitHub</a> | ||
| </pfe-cta> | ||
| </div> | ||
| </pfe-band> | ||
| </header> | ||
| <main> | ||
| <pfe-band pfe-color="lightest"> | ||
| <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col-on-xl pfe-m-all-6-col-on-lg pfe-m-all-6-col-on-sm"> | ||
| <pfe-card pfe-color="lightest" pfe-border> | ||
| <img pfe-overflow="top right left" src="/brand/[email protected]"> | ||
| <h2>Components</h2> | ||
| <p>View the complete inventory of PatternFly Elements components.</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="/examples">View the components</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest" pfe-border> | ||
| <img pfe-overflow="top right left" src="/brand/[email protected]"> | ||
| <h2>Develop</h2> | ||
| <p>Learn how to develop components for PatternFly Elements. View the basics on how to write HTML, CSS, and JavaScript for PatternFly Elements as well as how to properly test a component.</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://patternfly.github.io/patternfly-elements/develop/">Start developing components</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest" pfe-border> | ||
| <img pfe-overflow="top right left" src="/brand/[email protected]"> | ||
| <h2>Theming and styles</h2> | ||
| <p>View the documentation on the theme palette, colors, layouts, how to theme slots, and how to write styles</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://patternfly.github.io/patternfly-elements/theme/">More on theming and styles</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| </div> | ||
| </pfe-band> | ||
| <pfe-band> | ||
| <h2 class="pfe-l--text-align--center">Learn more</h2> | ||
| <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col"> | ||
| <pfe-card pfe-color="lightest"> | ||
| <img pfe-overflow="top right left" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*zHHMQQBMora88A_WQJiNtw.png"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/web-components-and-seo-58227413e072">Web Components and SEO</a> | ||
| </h3> | ||
| <p>We all understand how important SEO is and how crucial it is for crawlers to be able to understand our content in our…</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/web-components-and-seo-58227413e072">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-react-4eb92ffa4c40">Testing your PatternFly Element in React</a> | ||
| </h3> | ||
| <p>We’ve built PatternFly Elements to work in most frontend frameworks and React is one of the frameworks that we formally support. So, we must test our components in React.</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-react-4eb92ffa4c40">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-angular-40624ce1bc54">Testing your PatternFly Element in Angular</a> | ||
| </h3> | ||
| <p>We’ve built PatternFly Elements to work in most frontend frameworks and Angular is one of the frameworks that we formally support. So, we must test our components in Angular.</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-angular-40624ce1bc54">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-react-app-fe079be262ed">Using PatternFly Elements (web components) in your React App</a> | ||
| </h3> | ||
| <p>To get web components to work with React it’s pretty easy and straightforward. If you’d like to follow along, go ahead and...</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-react-app-fe079be262ed">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-vue-app-340fc9a9d7e5">Using PatternFly Elements (web components) in your Vue App</a> | ||
| </h3> | ||
| <p>To get web components to work with Vue, it’s pretty easy and straightforward. If you’d like to follow along, go ahead and...</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-vue-app-340fc9a9d7e5">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363">Using PatternFly Elements (web components) in your Angular App</a> | ||
| </h3> | ||
| <p>To get web components to work with Angular, there are a few steps that we need to take. If you’d like to follow along, go ahead and...</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*VxME5U0fg6jyClhZBo-O3A.png"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/more-resilientweb-components-in-angular-or-anywhere-else-with-mutationobserver-72a91cd7cf22">More Resilient Web Components in Angular (or anywhere else) with MutationObserver</a> | ||
| </h3> | ||
| <p>A real-world example of hardening your components against unknown contexts</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/more-resilientweb-components-in-angular-or-anywhere-else-with-mutationobserver-72a91cd7cf22">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/web-components-the-constructor-and-patternfly-elements-606bc51938c9">Web Components: The Constructor and PatternFly Elements</a> | ||
| </h3> | ||
| <p>There’s not a lot of documentation on what you should or should not do in the constructor() of a web component. Here we try to shed some light on the dos and don’ts and we also show the benefits of building web components by extending...</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/web-components-the-constructor-and-patternfly-elements-606bc51938c9">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*R29zV1u1Fj-s3gw1P_D5LQ.png"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/patternfly-elements-writing-automated-tests-e5af412931dd">Writing automated tests for PatternFly Elements</a> | ||
| </h3> | ||
| <p>Automated Tests (aka AT) are a blessing and a curse. You love them when they catch an unexpected change before it breaks in production but when you have spent the last two weeks (or more) building...</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/patternfly-elements-writing-automated-tests-e5af412931dd">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| <pfe-card pfe-color="lightest"> | ||
| <img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*6TbBJFAxhhi6K5WAbY5aCg.png"> | ||
| <h3> | ||
| <a href="https://medium.com/patternfly-elements/patternfly-elements-how-to-build-a-demo-component-448c32069a21">How to build a demo component</a> | ||
| </h3> | ||
| <p>PatternFly Elements is an exciting new approach for building web components to meet our front-end needs at Red Hat and beyond (yay open source!).</p> | ||
| <pfe-cta slot="pfe-card--footer"> | ||
| <a href="https://medium.com/patternfly-elements/patternfly-elements-how-to-build-a-demo-component-448c32069a21">Read on Medium</a> | ||
| </pfe-cta> | ||
| </pfe-card> | ||
| </div> | ||
| </pfe-band> | ||
| </main> | ||
| <footer> | ||
| <pfe-band pfe-color="darkest"> | ||
| <div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col"> | ||
| <div> | ||
| <h3>Community</h3> | ||
| <ul> | ||
| <li> | ||
| <a href="https://github.com/patternfly/patternfly-elements">GitHub</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://github.com/patternfly/patternfly-elements/blob/master/CONTRIBUTING.md">Contributing</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://github.com/patternfly/patternfly-elements/blob/master/CODE_OF_CONDUCT.md">Code of conduct</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.redhat.com/mailman/listinfo/patternfly-elements-contribute">Contributors email list</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h3>Resources</h3> | ||
| <ul> | ||
| <li> | ||
| <a href="https://patternfly.github.io/patternfly-elements/">Documentation</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://patternfly.github.io/patternfly-elements/demo">Storybook</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://medium.com/patternfly-elements">Medium</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <a href="https://www.netlify.com"> | ||
| <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </pfe-band> | ||
| </footer> | ||
| </body> | ||
| </html> |