Skip to content

Commit 89c8787

Browse files
simonsmithsimonsmith
committed
Add demo files
1 parent 93d4bc7 commit 89c8787

File tree

4 files changed

+193
-1
lines changed

4 files changed

+193
-1
lines changed

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,19 @@
2929
"lint": "suitcss index.css build/lint.css && rm build/lint.css",
3030
"preprocess": "suitcss index.css build/build.css",
3131
"preprocess-test": "suitcss -i test test/test.css build/test.css",
32+
"preprocess-demo": "suitcss -i test test/demo.css build/demo.css",
3233
"setup": "npm install",
3334
"watch": "npm run preprocess-test -- -w -v",
3435
"test": "npm run lint"
3536
},
3637
"devDependencies": {
38+
"suitcss-base": "^3.0.0",
39+
"suitcss-components-button": "^6.0.0",
40+
"suitcss-components-grid": "^3.0.3",
3741
"suitcss-components-test": "*",
3842
"suitcss-preprocessor": "^4.0.0",
39-
"suitcss-utils-flex": "^2.0.0"
43+
"suitcss-utils-before": "^1.0.1",
44+
"suitcss-utils-flex": "^2.0.0",
45+
"suitcss-utils-size": "^2.0.0"
4046
}
4147
}

‎test/demo.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@import "suitcss-base";
2+
@import "suitcss-utils-size/lib/size.css";
3+
@import "suitcss-utils-before/lib/before.css";
4+
@import "suitcss-components-grid";
5+
@import "suitcss-components-button";
6+
@import "../index.css";
7+
8+
:root {
9+
--FormField-input-borderColor: #777;
10+
--FormField-input-borderRadius: 5px;
11+
--FormField-input-color: #333;
12+
--FormField-input-padding: 0.6em;
13+
--FormField-text-fontSize: 14px;
14+
}
15+
16+
body {
17+
background-color: #444;
18+
}
19+
20+
.Container {
21+
margin: 0 auto;
22+
max-width: 700px;
23+
}
24+
25+
h1 {
26+
margin: .75em 0;
27+
color: #999;
28+
}
29+
30+
.Register {
31+
background-color: #fff;
32+
border-radius: 10px;
33+
padding: 30px;
34+
border: 3px solid #aaa;
35+
margin-bottom: 50px;
36+
}
37+
38+
.Register-field {
39+
margin-bottom: 20px;
40+
}
41+
42+
.u-textBold {
43+
font-weight: bold;
44+
}
45+
46+
.Button--success {
47+
background-color: #5cb85c;
48+
color: #f2f2f2;
49+
border-radius: 5px;
50+
border-color: color(#5cb85c shade(40%));
51+
}

‎test/demo.html

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>FormField [component] demo - SUIT CSS</title>
6+
<meta name="viewport" content="initial-scale=1, width=device-width">
7+
<link rel="stylesheet" href="../build/demo.css">
8+
</head>
9+
<body>
10+
<div class="Container">
11+
<h1>FormField demo</h1>
12+
13+
<form class="Register" action="">
14+
15+
<div class="Register-field">
16+
<div class="FormField is-error">
17+
<label class="FormField-label u-textBold">Username</label>
18+
<input class="FormField-input" type="text" value="SomeCoolUsername">
19+
<p class="FormField-text">That username is already taken!</p>
20+
</div>
21+
</div>
22+
23+
<div class="Register-field">
24+
<div class="FormField">
25+
<label class="FormField-label u-textBold">Email</label>
26+
<input class="FormField-input" type="email">
27+
</div>
28+
</div>
29+
30+
<div class="Register-field">
31+
<div class="FormField">
32+
<label class="FormField-label u-textBold">About you</label>
33+
<textarea class="FormField-input"></textarea>
34+
</div>
35+
</div>
36+
37+
<div class="Register-field">
38+
<div class="FormField">
39+
<label class="FormField-check">
40+
<input class="FormField-input" type="checkbox">
41+
<span class="FormField-label">I agree to all marketing material</span>
42+
</label>
43+
</div>
44+
</div>
45+
46+
<button class="Button Button--success">Sign up</button>
47+
48+
</form>
49+
50+
<form class="Register" action="">
51+
52+
<div class="Register-field">
53+
<div class="FormField is-error">
54+
<div class="Grid Grid--alignMiddle">
55+
<div class="Grid-cell u-size2of12">
56+
<label class="FormField-label u-textBold">Username</label>
57+
</div>
58+
<div class="Grid-cell u-sizeFill">
59+
<input class="FormField-input" type="text" value="SomeCoolUsername">
60+
<p class="FormField-text">That username is already taken!</p>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="Register-field">
67+
<div class="FormField">
68+
<div class="Grid Grid--alignMiddle">
69+
<div class="Grid-cell u-size2of12">
70+
<label class="FormField-label u-textBold">Email</label>
71+
</div>
72+
<div class="Grid-cell u-sizeFill">
73+
<input class="FormField-input" type="email">
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
79+
<div class="Register-field">
80+
<div class="FormField">
81+
<div class="Grid Grid--alignMiddle">
82+
<div class="Grid-cell u-size2of12">
83+
<label class="FormField-label u-textBold">About you</label>
84+
</div>
85+
<div class="Grid-cell u-sizeFill">
86+
<textarea class="FormField-input"></textarea>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="Register-field">
93+
<div class="FormField u-before2of12">
94+
<label class="FormField-check">
95+
<input class="FormField-input" type="checkbox">
96+
<span class="FormField-label">I agree to all marketing material</span>
97+
</label>
98+
</div>
99+
</div>
100+
101+
<div class="u-before2of12">
102+
<button class="Button Button--success">Sign up</button>
103+
</div>
104+
105+
</form>
106+
107+
</div>
108+
</body>
109+
</html>

‎yarn.lock

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1358,6 +1358,10 @@ normalize-url@^1.4.0:
13581358
query-string "^4.1.0"
13591359
sort-keys "^1.0.0"
13601360

1361+
normalize.css@^6.0.0:
1362+
version "6.0.0"
1363+
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-6.0.0.tgz#22188c2707c911fb3ad3c1aac0677ff68661bea8"
1364+
13611365
npmlog@^4.0.2:
13621366
version "4.0.2"
13631367
resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
@@ -2294,6 +2298,20 @@ sugarss@^0.2.0:
22942298
dependencies:
22952299
postcss "^5.2.4"
22962300

2301+
suitcss-base@^3.0.0:
2302+
version "3.0.0"
2303+
resolved "https://registry.yarnpkg.com/suitcss-base/-/suitcss-base-3.0.0.tgz#83dd53629c37adbdeac11ef6439a7f2ed955f05e"
2304+
dependencies:
2305+
normalize.css "^6.0.0"
2306+
2307+
suitcss-components-button@^6.0.0:
2308+
version "6.0.0"
2309+
resolved "https://registry.yarnpkg.com/suitcss-components-button/-/suitcss-components-button-6.0.0.tgz#20503ca1ac8eea3c9e63a00858ffa477c866945a"
2310+
2311+
suitcss-components-grid@^3.0.3:
2312+
version "3.0.3"
2313+
resolved "https://registry.yarnpkg.com/suitcss-components-grid/-/suitcss-components-grid-3.0.3.tgz#52e0b03659ceace60add000135b57a78b328c303"
2314+
22972315
suitcss-components-test@*:
22982316
version "1.0.0"
22992317
resolved "https://registry.yarnpkg.com/suitcss-components-test/-/suitcss-components-test-1.0.0.tgz#3f6fbc763505e8c3735921795cbb38921f18cdee"
@@ -2328,10 +2346,18 @@ suitcss-preprocessor@^4.0.0:
23282346
stylelint "^7.10.1"
23292347
stylelint-config-suitcss "^11.0.0"
23302348

2349+
suitcss-utils-before@^1.0.1:
2350+
version "1.0.1"
2351+
resolved "https://registry.yarnpkg.com/suitcss-utils-before/-/suitcss-utils-before-1.0.1.tgz#977f1b46b65db140571ebe5f767a12a4a7bc4931"
2352+
23312353
suitcss-utils-flex@^2.0.0:
23322354
version "2.0.0"
23332355
resolved "https://registry.yarnpkg.com/suitcss-utils-flex/-/suitcss-utils-flex-2.0.0.tgz#c0618dbd112891720b9c7f92a4200015f2909b02"
23342356

2357+
suitcss-utils-size@^2.0.0:
2358+
version "2.0.0"
2359+
resolved "https://registry.yarnpkg.com/suitcss-utils-size/-/suitcss-utils-size-2.0.0.tgz#c5816b5435bf1dc2f105a0bb17966a6c6e138784"
2360+
23352361
supports-color@^2.0.0:
23362362
version "2.0.0"
23372363
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

0 commit comments

Comments
 (0)