This repository has been archived by the owner on Jun 14, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.xml
194 lines (157 loc) · 14.2 KB
/
index.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>RHElements</title>
<link>https://rhelements.github.io/</link>
<description>Recent content on RHElements</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Fri, 31 Aug 2018 14:02:31 -0400</lastBuildDate>
<atom:link href="https://rhelements.github.io/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Browser Support</title>
<link>https://rhelements.github.io/getting-started/browser-support/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/getting-started/browser-support/</guid>
<description>RHElements are built on top of the Custom Elements v1 spec, but we can support all of the major browsers with web components polyfills, including IE 11.
Chrome Firefox Safari Edge IE 11 &#10003; &#10003; &#10003; &#10003; &#10003; Written in ES6 To make sure we&rsquo;re future-proof, RHElements are written in ES6. As more browsers begin to support the use of ES6 modules and the ability to import dependencies, the ES6 versions of our RHElements can be used directly.</description>
</item>
<item>
<title>Code of conduct</title>
<link>https://rhelements.github.io/site-info/code-of-conduct/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/site-info/code-of-conduct/</guid>
<description>Contributor Covenant Code of Conduct Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
Our Standards Examples of behavior that contributes to creating a positive environment include:</description>
</item>
<item>
<title>Create a themed RHElement</title>
<link>https://rhelements.github.io/theme/rhe-theme-component/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/theme/rhe-theme-component/</guid>
<description>When applying colors to your new component, it&rsquo;s important to reference CSS variables from the RHElements palette. This way people using the components will be able to update all of them at once by changing the value of those palette variables.
It&rsquo;s also important for all CSS variables to have fallback values, but then the code can become difficult to read and manage, since you now must input two colors (the variable of choice and the fallback):</description>
</item>
<item>
<title>Setup</title>
<link>https://rhelements.github.io/develop/step-1a/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-1a/</guid>
<description>Prerequisites Clone the RHElements/rhelements and run the install command from the root of the repository.
npm install Generate a RHElement Using the generator-rhelement, which installed as a dev dependency, the generator will ask you a few questions that will help with the scaffolding. Make sure you are in the root directory of the RHElements repository.
npm run new Scaffolding Structure The generator will scaffold out a new RHElement that will include a ES6 module version of your element as well as a version compiled to ES5 code.</description>
</item>
<item>
<title>Create a RHElement</title>
<link>https://rhelements.github.io/develop/step-1b/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-1b/</guid>
<description>Prerequisites Before you begin, make sure you&rsquo;ve followed the Prerequisites in Getting Started.
The RHElement Generator Use the RHElement generator to start the scaffolding process. From the root directory of the RHElements repository, run the following command.
npm run new The generator will ask you a series of questions to set up your project.
Your element name:
Your element&rsquo;s name should be lowercase and needs to contain at least one hyphen.</description>
</item>
<item>
<title>Framework Support</title>
<link>https://rhelements.github.io/getting-started/framework-support/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/getting-started/framework-support/</guid>
<description>Supported and Tested Frameworks If a framework isn&rsquo;t listed below, it doesn&rsquo;t mean that RHElements won&rsquo;t work with that framework. Chances are that RHElements will work, it&rsquo;s just that we aren&rsquo;t explicitly testing against that framework.
AngularJS Angular React Vue Every RHElement is built on top of the Custom Elements v1 spec. There are some caveats, but we&rsquo;ll get into those later.
Framework Integration We&rsquo;re working on writing a few guides that will demonstrate how to incorporate RHElements into certain frameworks.</description>
</item>
<item>
<title>Join the Community</title>
<link>https://rhelements.github.io/site-info/community/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/site-info/community/</guid>
<description>Contribute to RHElements How to Report a Bug Think you found a bug? Please check the list of open issues to see if your bug has already been reported. If it hasn&rsquo;t please submit a new issue.
How to Suggest a Feature or Enhancement Open an issue which describes the feature you would like to see, why you want it, how it should work, etc.
Bootstrapping Your Local Development Environment npm install Running Tests npm test Code of Conduct This project is governed by the Contributor Covenant Code of Conduct.</description>
</item>
<item>
<title>RHElements color palette</title>
<link>https://rhelements.github.io/theme/rhe-color-palette/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/theme/rhe-color-palette/</guid>
<description>Looking for values fast? You can find a list of all the system colors here.
UI Colors A user interface uses color to convey:
Feedback: Error and success states Information: Charts, graphs, and wayfinding elements Hierarchy: Showing structured order through color and typography We&rsquo;ve exposed 3 color variants for this design system to represent your brand:
Base Complement Accent These colors are used throughout RHElements, but accent is the color which should stand out the most.</description>
</item>
<item>
<title>Develop a Structure</title>
<link>https://rhelements.github.io/develop/step-2a/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-2a/</guid>
<description>Run the dev command found in the package.json file at the root of your element to start watching for changes to any files located in the /src directory. This will build rh-cool-element.js and rh-cool-element.umd.js whenever you save changes.
# from the root of your element npm run dev After running the dev command, start a server at the root of the RHElements repository to view it in the browser.</description>
</item>
<item>
<title>Get Help</title>
<link>https://rhelements.github.io/site-info/get-help/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/site-info/get-help/</guid>
<description>Drop us a line at [email protected]</description>
</item>
<item>
<title>Polyfills</title>
<link>https://rhelements.github.io/getting-started/polyfills/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/getting-started/polyfills/</guid>
<description>Browser Support Some browsers do not support ES6 modules, custom elements, shadow DOM, and custom CSS variables yet. We&rsquo;ll need to add some polyfills to make everything work in our supported browsers.
The easiest way to get everything working is to add the following polyfills to the head of your document.
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;RHElements&lt;/title&gt; &lt;!-- polyfills --&gt; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/custom-elements-es5-adapter.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/webcomponents-lite.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;&lt;/body&gt; &lt;/html What type of Javascript are you using?</description>
</item>
<item>
<title>RH Layouts</title>
<link>https://rhelements.github.io/theme/rhe-layouts/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/theme/rhe-layouts/</guid>
<description>.rhe-l-grid * { background: #e0d7ee; padding: 8px; } Grid Pure Grid Item Item Item Item Item Code &lt;div class="rhe-l-grid rhe-m-gutters rhe-m-all-6-col rhe-m-all-4-col-on-md rhe-m-all-3-col-on-lg"&gt; &lt;div&gt;Item&lt;/div&gt; &lt;div&gt;Item&lt;/div&gt; &lt;div&gt;Item&lt;/div&gt; &lt;div&gt;Item&lt;/div&gt; &lt;div&gt;Item&lt;/div&gt; &lt;/div&gt; Bootstrap-style Columns Default Item rhe-m-2-col rhe-m-10-col rhe-m-4-col rhe-m-4-col rhe-m-4-col rhe-m-6-col rhe-m-3-col-on-md rhe-m-6-col rhe-m-3-col-on-md rhe-m-startat-7-col-on-md rhe-m-6-col rhe-m-3-col-on-md Code &lt;div class="rhe-l-grid rhe-m-gutters"&gt; &lt;div class="rhe-l-grid__item"&gt;Default Item&lt;/div&gt; &lt;div class="rhe-l-grid__item rhe-m-2-col"&gt;&lt;code&gt;rhe-m-2-col&lt;/code&gt;&lt;/div&gt; &lt;div class="rhe-l-grid__item rhe-m-10-col"&gt;&lt;code&gt;rhe-m-10-col&lt;/code&gt;&lt;/div&gt; &lt;div class="rhe-l-grid__item rhe-m-4-col"</description>
</item>
<item>
<title>Write your HTML</title>
<link>https://rhelements.github.io/develop/step-2b/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-2b/</guid>
<description>Now that our element is set up and our dev server is running, let&rsquo;s take advantage of the slot and shadow root to make our element a bit more interesting.
We&rsquo;ll edit the /src/rh-cool-element.html file to add some additional HTML. Let&rsquo;s turn rh-cool-element into a profile element that has a profile photo, a username, and a button to follow the user.
Here&rsquo;s the updated HTML in /src/rh-cool-element.html:
&lt;div id=&quot;profile-pic&quot;&gt;&lt;/div&gt; &lt;slot&gt;&lt;/slot&gt; &lt;div&gt; &lt;button&gt;Follow&lt;/button&gt; &lt;/div&gt; We&rsquo;ll also need to update /demo/index.</description>
</item>
<item>
<title>Write your CSS (or Sass)</title>
<link>https://rhelements.github.io/develop/step-2c/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-2c/</guid>
<description>We want the rh-cool-element to have a profile photo, a username, and a follow button. Right now, it only contains the HTML structure, but we can style our element by updating our Sass (or CSS) to make it look the way we want.
We&rsquo;ll be working in the /src/rh-cool-element.scss file since we decided to use the Sass option in the RHElement generator.
Your Sass file will initially import additional Sass from the rh-sass node module, but we can ignore that for now.</description>
</item>
<item>
<title>Integrate your JavaScript</title>
<link>https://rhelements.github.io/develop/step-2d/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-2d/</guid>
<description>In this step, we will: - Add a click listener to the follow button - Set a follow state on element - Add a the profile photo - Properly disconnect our element
First, we&rsquo;ll go ahead and listen for click events on the button. The best place to add a click listener is in the constructor, according to the W3C Custom Elements draft section called &ldquo;2.2 Requirements for custom element constructors&rdquo;:</description>
</item>
<item>
<title>Write tests</title>
<link>https://rhelements.github.io/develop/step-3/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-3/</guid>
<description>Let&rsquo;s write a test for the rh-cool-element.
We rely on a few tools to ensure our element is reliable in production: 1. Web Component Tester, built and maintained by the Polymer team, makes testing easy. All we have to do is add the element&rsquo;s HTML to a file and set up our suite of tests. 2. We&rsquo;ll use the Chai Assertion Library to make sure our tests pass since Mocha and Chai are both included in Web Component Tester.</description>
</item>
<item>
<title>Publish</title>
<link>https://rhelements.github.io/develop/step-4/</link>
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
<guid>https://rhelements.github.io/develop/step-4/</guid>
<description>We&rsquo;ve been publishing our RHElements to the @rhelements organization on npm.</description>
</item>
</channel>
</rss>