easy-with-style 3.0.251 → 3.0.253
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,24 @@ You can also clone the repository with [Git](https://git-scm.com/)...
|
|
|
20
20
|
|
|
21
21
|
You can also run a development server, see the section on building later on.
|
|
22
22
|
|
|
23
|
+
## Example
|
|
24
|
+
|
|
25
|
+
There is a small development server that can be run from within the project's directory with the following command:
|
|
26
|
+
|
|
27
|
+
npm start
|
|
28
|
+
|
|
29
|
+
The example will then be available at the following URL:
|
|
30
|
+
|
|
31
|
+
http://localhost:8888
|
|
32
|
+
|
|
33
|
+
The source for the example can be found in the `src/example.js` file and corresponding `src/example` folder. You are encouraged to try the example whilst reading what follows. You can rebuild it on the fly with the following command:
|
|
34
|
+
|
|
35
|
+
npm run watch-debug
|
|
36
|
+
|
|
37
|
+
The development server will reload the page whenever you make changes.
|
|
38
|
+
|
|
39
|
+
One last thing to bear in mind is that this package is included by way of a relative rather than a package import. If you are importing it into your own application, however, you should use the standard package import.
|
|
40
|
+
|
|
23
41
|
## Usage
|
|
24
42
|
|
|
25
43
|
You must call the `renderStyles()` function *after* importing the view but *before* rendering it. Doing so ensures that the styles generated as a result of executing the view code are inserted into the DOM before the view itself.
|
|
@@ -45,12 +63,6 @@ body.mount(
|
|
|
45
63
|
```
|
|
46
64
|
Note that rendering the styles in this way is not done as part of the build process, you must explicitly call the `renderStyles()` function, ideally right before you attach the view to the body.
|
|
47
65
|
|
|
48
|
-
## Example
|
|
49
|
-
|
|
50
|
-
Not an example as such. It allows you to test out CSS against the built-in CSS lexer and parser. It is available from the `index.html` in the root of the repository.
|
|
51
|
-
|
|
52
|
-
This is the first port of call should you suspect that your CSS is not being parsed correctly. Both the lexical entries and BNF that make up the CSS grammar can be altered on the fly.
|
|
53
|
-
|
|
54
66
|
## Creating primitive elements with style
|
|
55
67
|
|
|
56
68
|
All of the standard HTML elements are supported. For a complete list of tag names, see the [`tagNames.js`](https://github.com/djalbat/with-style/blob/master/es6/tagNames.js) file. You can create these elements, which are functional elements under the hood, as follows:
|
|
@@ -291,12 +303,6 @@ Automation is thanks to [npm scripts](https://docs.npmjs.com/misc/scripts), have
|
|
|
291
303
|
npm run build-debug
|
|
292
304
|
npm run watch-debug
|
|
293
305
|
|
|
294
|
-
You can also start a small development server:
|
|
295
|
-
|
|
296
|
-
npm start
|
|
297
|
-
|
|
298
|
-
The example will then be available at http://localhost:8888 and will reload automatically when changes are made.
|
|
299
|
-
|
|
300
306
|
## Contact
|
|
301
307
|
|
|
302
308
|
- james.smith@djalbat.com
|
package/package.json
CHANGED