This repository has been archived by the owner on Jun 29, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
compositor.json
88 lines (88 loc) · 14.7 KB
/
compositor.json
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
{
"name": "jxnblk/understyle",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.19"
},
"title": "Understyle",
"branch": "",
"style": {
"name": "Swiss",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/SwissHeader",
"article": "article/SwissArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"heading": {
"fontWeight": 700,
"letterSpacing": "-0.01em"
},
"layout": {
"fluid": true
},
"colors": {
"text": "#000",
"background": "#fff",
"primary": "#05a",
"secondary": "#444",
"highlight": "#f30",
"border": "#ccc",
"muted": "#eee"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/jxnblk/understyle",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/understyle",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "understyle",
"subhead": "Functional style utilities for authoring JavaScript style objects",
"children": [
{
"component": "ui/TweetButton",
"text": "understyle: Functional style utilities for authoring JavaScript style objects",
"url": null
},
{
"component": "ui/GithubButton",
"user": "jxnblk",
"repo": "understyle"
}
],
"text": "v1.2.0"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n\n<p><a href=\"https://travis-ci.org/jxnblk/understyle\"><img src=\"https://travis-ci.org/jxnblk/understyle.svg?branch=master\"></a>\n<a href=\"http://standardjs.com/\"><img src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg\"></a></p>\n<pre>npm i understyle</pre><pre><span class=\"hljs-comment\">// Example</span>\n<span class=\"hljs-keyword\">import</span> _style <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'understyle'</span>\n\n<span class=\"hljs-keyword\">const</span> style = _style({\n m: <span class=\"hljs-number\">2</span>,\n flex: <span class=\"hljs-literal\">true</span>\n})\n<span class=\"hljs-comment\">// { margin: 16, display: 'flex' }</span></pre><h3>Usage in React, etc.</h3>\n<p>Understyle is intended for use in functional component-based UI systems, like React.\nIt can be used in any framework and for either inline styles or\nwith any CSS-in-JS library.</p>\n<pre><span class=\"hljs-comment\">// Example component</span>\n<span class=\"hljs-keyword\">import</span> React <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'react'</span>\n<span class=\"hljs-keyword\">import</span> _style <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'understyle'</span>\n\n<span class=\"hljs-keyword\">const</span> MyComponent = ({ children, ...props }) => {\n <span class=\"hljs-keyword\">const</span> style = {\n ..._style(props),\n color: <span class=\"hljs-string\">'tomato'</span>\n }\n\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">style</span>=<span class=\"hljs-string\">{style}</span>></span>{children}<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>\n}\n\n<span class=\"hljs-keyword\">export</span> <span class=\"hljs-keyword\">default</span> MyComponent</pre><pre><span class=\"hljs-comment\">// Example component instance</span>\n<span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">MyComponent</span> <span class=\"hljs-attr\">p</span>=<span class=\"hljs-string\">{2}</span> <span class=\"hljs-attr\">mb</span>=<span class=\"hljs-string\">{4}</span>></span>\n Hello\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">MyComponent</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span></span>\n)</pre><h2>Props</h2>\n<p>The following keys can be passed in to understyle.</p>\n<h3>Display</h3>\n<pre>_style({ display: <span class=\"hljs-string\">'block'</span> })</pre><h3>Width</h3>\n<p>The <code>width</code> prop accepts number values.\nAny number larger than 1 is returned as a number, to be handled with React inline styles or other CSS-in-JS solutions.\nAny number between 0 and 1 will become a percentage width.</p>\n<pre>_style({ width: <span class=\"hljs-number\">1</span> / <span class=\"hljs-number\">2</span> }) <span class=\"hljs-comment\">// { width: '50%' }</span>\n_style({ width: <span class=\"hljs-number\">1</span> }) <span class=\"hljs-comment\">// { width: '100%' }</span>\n_style({ width: <span class=\"hljs-number\">64</span> }) <span class=\"hljs-comment\">// { width: 64 }</span></pre><h3>Margin</h3>\n<p>Margin props are set based on a spacing scale for numbers 1–4.\nAny number above 4 will return the raw number value.</p>\n<pre>_style({\n margin: <span class=\"hljs-number\">0</span>, <span class=\"hljs-comment\">// margin: 0</span>\n marginBottom: <span class=\"hljs-number\">3</span>, <span class=\"hljs-comment\">// marginBottom: 32</span>\n marginX: <span class=\"hljs-number\">12</span> <span class=\"hljs-comment\">// marginLeft: 12, marginRight: 12</span>\n})</pre><p>Shorthand props are also available.</p>\n<pre>_style({\n m: <span class=\"hljs-number\">0</span>, <span class=\"hljs-comment\">// margin: 0</span>\n mb: <span class=\"hljs-number\">3</span>, <span class=\"hljs-comment\">// marginBottom: 32</span>\n mx: <span class=\"hljs-number\">12</span> <span class=\"hljs-comment\">// marginLeft: 12, marginRight: 12,</span>\n})</pre><h3>Padding</h3>\n<p>Padding also supports longform and shorthand keys.</p>\n<pre>_style({\n p: <span class=\"hljs-number\">0</span>, <span class=\"hljs-comment\">// padding: 0</span>\n paddingLeft: <span class=\"hljs-number\">2</span>, <span class=\"hljs-comment\">// paddingLeft: 16</span>\n py: <span class=\"hljs-number\">48</span> <span class=\"hljs-comment\">// paddingTop: 48, paddingBottom: 48</span>\n})</pre><h3>Typography</h3>\n<pre>_style({\n fontSize: <span class=\"hljs-number\">16</span>, <span class=\"hljs-comment\">// fontSize: 16</span>\n align: <span class=\"hljs-string\">'center'</span>, <span class=\"hljs-comment\">// textAlign: 'center'</span>\n bold: <span class=\"hljs-literal\">true</span>, <span class=\"hljs-comment\">// fontWeight: 'bold'</span>\n caps: <span class=\"hljs-literal\">true</span>, <span class=\"hljs-comment\">// textTransform: 'uppercase', letterSpacing: '.1em'</span>\n})</pre><p>Font size also accepts numbers representing steps on the configured type scale, for any number below 7</p>\n<pre>_style({ fontSize: <span class=\"hljs-number\">1</span> })\n<span class=\"hljs-comment\">// fontSize: 48</span></pre><h3>Flexbox</h3>\n<pre>_style({\n flexWrap: <span class=\"hljs-string\">'wrap'</span>, <span class=\"hljs-comment\">// flexWrap: 'wrap'</span>\n alignItems: <span class=\"hljs-string\">'center'</span>, <span class=\"hljs-comment\">// alignItems: 'center'</span>\n justifyContent: <span class=\"hljs-string\">'space-between'</span>, <span class=\"hljs-comment\">// justifyContent: 'space-between'</span>\n flexDirection: <span class=\"hljs-string\">'column'</span>, <span class=\"hljs-comment\">// flexDirection: 'column'</span>\n flexAuto: <span class=\"hljs-literal\">true</span>, <span class=\"hljs-comment\">// flex: '1 1 auto'</span>\n flexNone: <span class=\"hljs-literal\">true</span>, <span class=\"hljs-comment\">// flex: 'none'</span>\n})</pre><h3>Color</h3>\n<p>Color props accept strings as either keys from the configured\ncolor object or raw color values.</p>\n<pre>_style({\n color: <span class=\"hljs-string\">'blue'</span>, <span class=\"hljs-comment\">// color: '#07c'</span>\n backgroundColor: <span class=\"hljs-string\">'tomato'</span>, <span class=\"hljs-comment\">// color: 'tomato'</span>\n borderColor: <span class=\"hljs-string\">'#eee'</span>, <span class=\"hljs-comment\">// color: '#eee'</span>\n})</pre><h3>Border</h3>\n<pre>_style({ border: <span class=\"hljs-literal\">true</span> })\n<span class=\"hljs-comment\">// border: '1px solid'</span>\n\n_style({ border: <span class=\"hljs-literal\">false</span> })\n<span class=\"hljs-comment\">// border: 0</span>\n\n_style({ border: <span class=\"hljs-number\">3</span> })\n<span class=\"hljs-comment\">// border: '3px solid'</span>\n\n_style({ borderTop: <span class=\"hljs-literal\">true</span> })\n<span class=\"hljs-comment\">// borderTop: '1px solid'</span>\n\n_style({ borderRight: <span class=\"hljs-literal\">true</span> })\n<span class=\"hljs-comment\">// borderRight: '1px solid'</span>\n\n_style({ borderBottom: <span class=\"hljs-literal\">true</span> })\n<span class=\"hljs-comment\">// borderBottom: '1px solid'</span>\n\n_style({ borderLeft: <span class=\"hljs-literal\">true</span> })\n<span class=\"hljs-comment\">// borderLeft: '1px solid'</span></pre><h3>Border Radius</h3>\n<pre>_style({ rounded: <span class=\"hljs-literal\">true</span> })\n<span class=\"hljs-comment\">// borderRadius: 2</span>\n\n_style({ rounded: <span class=\"hljs-literal\">false</span> })\n<span class=\"hljs-comment\">// borderRadius: 0</span>\n\n_style({ rounded: <span class=\"hljs-string\">'top'</span> })\n<span class=\"hljs-comment\">// borderRadius: '2px 2px 0 0'</span>\n\n_style({ rounded: <span class=\"hljs-string\">'right'</span> })\n<span class=\"hljs-comment\">// borderRadius: '0 2px 2px 0'</span>\n\n_style({ rounded: <span class=\"hljs-string\">'bottom'</span> })\n<span class=\"hljs-comment\">// borderRadius: '0 0 2px 2px'</span>\n\n_style({ rounded: <span class=\"hljs-string\">'left'</span> })\n<span class=\"hljs-comment\">// borderRadius: '2px 0 0 2px'</span></pre><h3>Responsive Styles</h3>\n<p>All props accept arrays to set styles for multiple breakpoints,\nwhere the first value is no breakpoint,\nthen the following values are from the small breakpoint up,\nfor a mobile-first styling approach.</p>\n<pre>_style({\n width: [\n <span class=\"hljs-number\">1</span>,\n <span class=\"hljs-number\">1</span> / <span class=\"hljs-number\">2</span>,\n <span class=\"hljs-number\">1</span> / <span class=\"hljs-number\">3</span>,\n <span class=\"hljs-number\">1</span> / <span class=\"hljs-number\">4</span>,\n ]\n})\n<span class=\"hljs-comment\">// {</span>\n<span class=\"hljs-comment\">// width: '100%',</span>\n<span class=\"hljs-comment\">// '@media screen and (min-width:40em)': {</span>\n<span class=\"hljs-comment\">// width: '50%'</span>\n<span class=\"hljs-comment\">// },</span>\n<span class=\"hljs-comment\">// '@media screen and (min-width:52em)': {</span>\n<span class=\"hljs-comment\">// width: '33.333333%'</span>\n<span class=\"hljs-comment\">// },</span>\n<span class=\"hljs-comment\">// '@media screen and (min-width:64em)': {</span>\n<span class=\"hljs-comment\">// width: '25%'</span>\n<span class=\"hljs-comment\">// }</span>\n<span class=\"hljs-comment\">// }</span></pre><p>This helps create a succinct syntax for use in React components.</p>\n<pre><span class=\"hljs-comment\">// Example</span>\n<Box width={[ <span class=\"hljs-number\">1</span>, <span class=\"hljs-number\">1</span>/<span class=\"hljs-number\">2</span>, <span class=\"hljs-number\">1</span>/<span class=\"hljs-number\">3</span>, <span class=\"hljs-number\">1</span>/<span class=\"hljs-number\">4</span> ]} /></pre><p>Arrays work for any understyle property,\nand null values can be passed to the array to skip breakpoints.</p>\n<pre>_style({\n margin: [ <span class=\"hljs-number\">0</span>, <span class=\"hljs-literal\">null</span>, <span class=\"hljs-number\">16</span>, <span class=\"hljs-number\">32</span> ],\n padding: [ <span class=\"hljs-literal\">null</span>, <span class=\"hljs-literal\">null</span>, <span class=\"hljs-number\">16</span>, <span class=\"hljs-number\">32</span> ],\n border: [ <span class=\"hljs-literal\">null</span>, <span class=\"hljs-literal\">null</span>, <span class=\"hljs-literal\">true</span> ]\n})</pre><h3>Shorthand Props</h3>\n<p>Understyle provides shorthand props for setting common styles.\nEach shorthand prop accepts a boolean value.</p>\n<pre>_style({\n mb4: <span class=\"hljs-literal\">true</span>\n})</pre><p>These are provided as a convenience for use in React.</p>\n<pre><span class=\"hljs-comment\">// Example</span>\n<Button mb4 /></pre><p>The following boolean keys can be passed to understyle.</p>\n<ul>\n<li><code>block</code> - display block</li>\n<li><code>inlineBlock</code> - display inline-block</li>\n<li><code>inline</code></li>\n<li><code>table</code></li>\n<li><code>tableRow</code></li>\n<li><code>tableCell</code></li>\n<li><code>flex</code></li>\n<li><code>inlineFlex</code></li>\n<li><code>m0</code> - <code>m4</code> - margin</li>\n<li><code>mt0</code> - <code>mt4</code> - margin-top</li>\n<li><code>mr0</code> - <code>mr4</code> - margin-right</li>\n<li><code>mb0</code> - <code>mb4</code> - margin-bottom</li>\n<li><code>ml0</code> - <code>ml4</code> - margin-left</li>\n<li><code>p0</code> - <code>p4</code> - padding</li>\n<li><code>pt0</code> - <code>pt4</code> - padding-top</li>\n<li><code>pr0</code> - <code>pr4</code> - padding-right</li>\n<li><code>pb0</code> - <code>pb4</code> - padding-bottom</li>\n<li><code>pl0</code> - <code>pl4</code> - padding-left</li>\n<li><code>left</code> - text align left</li>\n<li><code>center</code> - text align center</li>\n<li><code>right</code> - text align right</li>\n<li><code>justify</code> - text align justify</li>\n<li><code>bg</code> - background color</li>\n<li><code><COLOR></code> - foreground color - e.g. <code>red</code></li>\n<li><code>bg<COLOR></code> - background color - e.g. <code>bgRed</code></li>\n<li><code>border<COLOR></code> - border color - e.g. <code>borderRed</code></li>\n</ul>\n<p><a href=\"LICENSE.md\">MIT License</a></p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/jxnblk/understyle",
"text": "GitHub"
},
{
"href": "https://github.com/jxnblk",
"text": "jxnblk"
}
]
}
]
}