Skip to content

Commit 97caad0

Browse files
kylebuch8kylebuch8
authored
docs: creating an index page for Netlify (#1012)
* docs: creating an index page for Netlify * fixing misspelling
1 parent 516d9e8 commit 97caad0

File tree

4 files changed

+275
-0
lines changed

4 files changed

+275
-0
lines changed

‎brand/[email protected]‎

19.4 KB
Loading

‎brand/[email protected]‎

25.6 KB
Loading

‎brand/[email protected]‎

23.8 KB
Loading

‎index.html‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>PatternFly Elements</title>
7+
<meta name="description" content="PatternFly Elements. A set of community-created web components based on PatternFly design.">
8+
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&family=Red+Hat+Text&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="elements/pfelement/dist/pfelement.min.css">
10+
<link rel="stylesheet" href="elements/pfe-styles/dist/pfe-base.min.css">
11+
<link rel="stylesheet" href="elements/pfe-styles/dist/pfe-layouts.min.css">
12+
<script type="module" src="elements/pfe-band/dist/pfe-band.min.js"></script>
13+
<script type="module" src="elements/pfe-cta/dist/pfe-cta.min.js"></script>
14+
<script type="module" src="elements/pfe-card/dist/pfe-card.min.js"></script>
15+
<style>
16+
html,
17+
body {
18+
--pfe-theme--font-family--heading: 'Red Hat Text', sans-serif;
19+
font-family: 'Red Hat Text', sans-serif;
20+
}
21+
22+
h1,
23+
h2,
24+
h3 {
25+
font-weight: 400;
26+
font-family: 'Red Hat Display', sans-serif;
27+
}
28+
29+
h1 {
30+
font-size: 36px;
31+
}
32+
33+
.tagline {
34+
font-size: 18px;
35+
}
36+
37+
@media (min-width: 540px) {
38+
h1 {
39+
font-size: 48px;
40+
}
41+
42+
.tagline {
43+
font-size: 24px;
44+
}
45+
}
46+
47+
.title {
48+
margin-bottom: 0;
49+
}
50+
51+
pfe-card h2,
52+
pfe-card h3 {
53+
margin-top: 8px;
54+
}
55+
56+
pfe-card h3 {
57+
font-weight: 700;
58+
margin-bottom: 16px;
59+
}
60+
61+
a:visited {
62+
color: inherit;
63+
}
64+
65+
.header-ctas {
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
flex-direction: column;
70+
}
71+
72+
.header-ctas pfe-cta:first-child {
73+
margin-bottom: 16px;
74+
}
75+
76+
@media (min-width: 500px) {
77+
.header-ctas {
78+
flex-direction: row;
79+
}
80+
81+
.header-ctas pfe-cta:first-child {
82+
margin-bottom: 0;
83+
margin-right: 16px;
84+
}
85+
}
86+
</style>
87+
</head>
88+
<body unresolved>
89+
<header>
90+
<pfe-band pfe-color="accent" class="pfe-l--text-align--center">
91+
<h1 class="title">PatternFly Elements</h1>
92+
<p class="tagline">A set of community-created web components based on PatternFly design.</p>
93+
<div class="header-ctas">
94+
<pfe-cta pfe-priority="primary">
95+
<a href="/examples">View the components</a>
96+
</pfe-cta>
97+
<pfe-cta pfe-priority="secondary">
98+
<a href="https://github.com/patternfly/patternfly-elements">View on GitHub</a>
99+
</pfe-cta>
100+
</div>
101+
</pfe-band>
102+
</header>
103+
<main>
104+
<pfe-band pfe-color="lightest">
105+
<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">
106+
<pfe-card pfe-color="lightest" pfe-border>
107+
<img pfe-overflow="top right left" src="/brand/[email protected]">
108+
<h2>Components</h2>
109+
<p>View the complete inventory of PatternFly Elements components.</p>
110+
<pfe-cta slot="pfe-card--footer">
111+
<a href="/examples">View the components</a>
112+
</pfe-cta>
113+
</pfe-card>
114+
<pfe-card pfe-color="lightest" pfe-border>
115+
<img pfe-overflow="top right left" src="/brand/[email protected]">
116+
<h2>Develop</h2>
117+
<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>
118+
<pfe-cta slot="pfe-card--footer">
119+
<a href="https://patternfly.github.io/patternfly-elements/develop/">Start developing components</a>
120+
</pfe-cta>
121+
</pfe-card>
122+
<pfe-card pfe-color="lightest" pfe-border>
123+
<img pfe-overflow="top right left" src="/brand/[email protected]">
124+
<h2>Theming and styles</h2>
125+
<p>View the documentation on the theme palette, colors, layouts, how to theme slots, and how to write styles</p>
126+
<pfe-cta slot="pfe-card--footer">
127+
<a href="https://patternfly.github.io/patternfly-elements/theme/">More on theming and styles</a>
128+
</pfe-cta>
129+
</pfe-card>
130+
</div>
131+
</pfe-band>
132+
<pfe-band>
133+
<h2 class="pfe-l--text-align--center">Learn more</h2>
134+
<div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
135+
<pfe-card pfe-color="lightest">
136+
<img pfe-overflow="top right left" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*zHHMQQBMora88A_WQJiNtw.png">
137+
<h3>
138+
<a href="https://medium.com/patternfly-elements/web-components-and-seo-58227413e072">Web Components and SEO</a>
139+
</h3>
140+
<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>
141+
<pfe-cta slot="pfe-card--footer">
142+
<a href="https://medium.com/patternfly-elements/web-components-and-seo-58227413e072">Read on Medium</a>
143+
</pfe-cta>
144+
</pfe-card>
145+
<pfe-card pfe-color="lightest">
146+
<h3>
147+
<a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-react-4eb92ffa4c40">Testing your PatternFly Element in React</a>
148+
</h3>
149+
<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>
150+
<pfe-cta slot="pfe-card--footer">
151+
<a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-react-4eb92ffa4c40">Read on Medium</a>
152+
</pfe-cta>
153+
</pfe-card>
154+
<pfe-card pfe-color="lightest">
155+
<h3>
156+
<a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-angular-40624ce1bc54">Testing your PatternFly Element in Angular</a>
157+
</h3>
158+
<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>
159+
<pfe-cta slot="pfe-card--footer">
160+
<a href="https://medium.com/patternfly-elements/testing-your-patternfly-element-in-angular-40624ce1bc54">Read on Medium</a>
161+
</pfe-cta>
162+
</pfe-card>
163+
<pfe-card pfe-color="lightest">
164+
<h3>
165+
<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>
166+
</h3>
167+
<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>
168+
<pfe-cta slot="pfe-card--footer">
169+
<a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-react-app-fe079be262ed">Read on Medium</a>
170+
</pfe-cta>
171+
</pfe-card>
172+
<pfe-card pfe-color="lightest">
173+
<h3>
174+
<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>
175+
</h3>
176+
<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>
177+
<pfe-cta slot="pfe-card--footer">
178+
<a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-vue-app-340fc9a9d7e5">Read on Medium</a>
179+
</pfe-cta>
180+
</pfe-card>
181+
<pfe-card pfe-color="lightest">
182+
<h3>
183+
<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>
184+
</h3>
185+
<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>
186+
<pfe-cta slot="pfe-card--footer">
187+
<a href="https://medium.com/patternfly-elements/using-patternfly-elements-web-components-in-your-angular-app-4b18b1c9c363">Read on Medium</a>
188+
</pfe-cta>
189+
</pfe-card>
190+
<pfe-card pfe-color="lightest">
191+
<img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*VxME5U0fg6jyClhZBo-O3A.png">
192+
<h3>
193+
<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>
194+
</h3>
195+
<p>A real-world example of hardening your components against unknown contexts</p>
196+
<pfe-cta slot="pfe-card--footer">
197+
<a href="https://medium.com/patternfly-elements/more-resilientweb-components-in-angular-or-anywhere-else-with-mutationobserver-72a91cd7cf22">Read on Medium</a>
198+
</pfe-cta>
199+
</pfe-card>
200+
<pfe-card pfe-color="lightest">
201+
<h3>
202+
<a href="https://medium.com/patternfly-elements/web-components-the-constructor-and-patternfly-elements-606bc51938c9">Web Components: The Constructor and PatternFly Elements</a>
203+
</h3>
204+
<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>
205+
<pfe-cta slot="pfe-card--footer">
206+
<a href="https://medium.com/patternfly-elements/web-components-the-constructor-and-patternfly-elements-606bc51938c9">Read on Medium</a>
207+
</pfe-cta>
208+
</pfe-card>
209+
<pfe-card pfe-color="lightest">
210+
<img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*R29zV1u1Fj-s3gw1P_D5LQ.png">
211+
<h3>
212+
<a href="https://medium.com/patternfly-elements/patternfly-elements-writing-automated-tests-e5af412931dd">Writing automated tests for PatternFly Elements</a>
213+
</h3>
214+
<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>
215+
<pfe-cta slot="pfe-card--footer">
216+
<a href="https://medium.com/patternfly-elements/patternfly-elements-writing-automated-tests-e5af412931dd">Read on Medium</a>
217+
</pfe-cta>
218+
</pfe-card>
219+
<pfe-card pfe-color="lightest">
220+
<img pfe-overflow="left top right" src="https://cdn-images-1.medium.com/fit/t/1600/480/1*6TbBJFAxhhi6K5WAbY5aCg.png">
221+
<h3>
222+
<a href="https://medium.com/patternfly-elements/patternfly-elements-how-to-build-a-demo-component-448c32069a21">How to build a demo component</a>
223+
</h3>
224+
<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>
225+
<pfe-cta slot="pfe-card--footer">
226+
<a href="https://medium.com/patternfly-elements/patternfly-elements-how-to-build-a-demo-component-448c32069a21">Read on Medium</a>
227+
</pfe-cta>
228+
</pfe-card>
229+
</div>
230+
</pfe-band>
231+
</main>
232+
<footer>
233+
<pfe-band pfe-color="darkest">
234+
<div class="pfe-l-grid pfe-m-gutters pfe-m-all-4-col">
235+
<div>
236+
<h3>Community</h3>
237+
<ul>
238+
<li>
239+
<a href="https://github.com/patternfly/patternfly-elements">GitHub</a>
240+
</li>
241+
<li>
242+
<a href="https://github.com/patternfly/patternfly-elements/blob/master/CONTRIBUTING.md">Contributing</a>
243+
</li>
244+
<li>
245+
<a href="https://github.com/patternfly/patternfly-elements/blob/master/CODE_OF_CONDUCT.md">Code of conduct</a>
246+
</li>
247+
<li>
248+
<a href="https://www.redhat.com/mailman/listinfo/patternfly-elements-contribute">Contributors email list</a>
249+
</li>
250+
</ul>
251+
</div>
252+
<div>
253+
<h3>Resources</h3>
254+
<ul>
255+
<li>
256+
<a href="https://patternfly.github.io/patternfly-elements/">Documentation</a>
257+
</li>
258+
<li>
259+
<a href="https://patternfly.github.io/patternfly-elements/demo">Storybook</a>
260+
</li>
261+
<li>
262+
<a href="https://medium.com/patternfly-elements">Medium</a>
263+
</li>
264+
</ul>
265+
</div>
266+
<div>
267+
<a href="https://www.netlify.com">
268+
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
269+
</a>
270+
</div>
271+
</div>
272+
</pfe-band>
273+
</footer>
274+
</body>
275+
</html>

0 commit comments

Comments
 (0)