-
Notifications
You must be signed in to change notification settings - Fork 3
/
example.html
111 lines (105 loc) · 3.11 KB
/
example.html
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
<!DOCTYPE html>
<html>
<head>
<title>Nanostyled Example</title>
<style>
/* A DIY functional-CSS framework */
.sans { font-family: sans-serif; }
.serif { font-family: georgia, serif; }
.mono { font-family: menlo, monaco, monospace; }
.f1 { font-size: 4rem; }
.f2 { font-size: 2rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1rem; }
.fw7 { font-weight: 700; }
.black { color: black; }
.gray { color: #666; }
.red { color: #993333; }
.bg-black { background: black }
.bg-gray { background: gray; }
.bg-light-gray { background: #eee; }
.bordered { border: 2px solid; }
.space-sm {
margin: 1em auto;
padding: 1em;
}
.space-lg {
margin: 2em auto;
padding: 2em;
}
.block { display: block; }
</style>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="dist/nanostyled.umd.js"></script>
</head>
<body>
<div id="react-root"></div>
<script type="text/babel">
const Heading = nanostyled('header', {
size: 'f1',
weight: 'fw7',
color: 'black',
font: 'sans',
});
const Text = nanostyled('article', {
size: 'f2',
weight: 'fw4',
color: 'gray',
font: 'serif',
});
const Box = nanostyled('figure', {
border: 'bordered',
space: 'space-sm',
});
const Code = nanostyled('code', {
font: 'mono',
bg: 'bg-light-gray',
color: 'black',
display: 'block',
space: 'space-sm',
});
const App = () => (
<article>
<Heading size="f3" style={{ margin: '2em 0 0' }}>
Nanostyled
</Heading>
<Box>
<Heading>I am a Heading component</Heading>
<Code>
{`<Heading>I am a Heading component</Heading>`}
</Code>
</Box>
<Box>
<Text>I am a Text component</Text>
<Code>
{`<Text>I am a Text component</Text>`}
</Code>
</Box>
<Box>
<Heading tag="h2" size="f2" color="red">
I am a customized Heading component
</Heading>
<Code style={{ whiteSpace: 'pre-line' }}>
{`<Heading tag="h2" size="f2" color="red">
I am a customized Heading component
</Heading>`}
</Code>
</Box>
<Box>
<Text color="black" size="f3" font="sans">
I am a customized Text component
</Text>
<Code style={{ whiteSpace: 'pre-line' }}>
{`<Text color="black" size="f3" font="sans">
I am a customized Text component
</Text>`}
</Code>
</Box>
</article>
);
ReactDOM.render(<App />, document.getElementById('react-root'));
</script>
</body>
</html>