Skip to content

Commit caafd8d

Browse files
giuseppeggiuseppeg
committed
App Example initial commit
1 parent a96b8f0 commit caafd8d

File tree

20 files changed

+535
-0
lines changed

20 files changed

+535
-0
lines changed

‎examples/app/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
dist
2+
node_modules
3+
__buildcss.js

‎examples/app/README.md

+208
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
TodoMVC app styled following the [SUIT's design principles](https://github.com/suitcss/suit/).
2+
3+
## Installation
4+
5+
* clone this repo
6+
* run `npm install`
7+
8+
## Build
9+
10+
Run `npm run build`.
11+
12+
The script will build your [themes](#themes) into the `build` folder.
13+
14+
## Folders structure
15+
16+
The app source code is in `src`.
17+
Here you have the following structure:
18+
19+
```
20+
base
21+
components
22+
views
23+
utils
24+
themes
25+
```
26+
27+
In general it is a good idea to build standalone pieces and keep theme specific styles in `themes`.
28+
29+
This approach is recommended even if you have a single theme app since you should always have alternative themes for accessibility reasons.
30+
You can read more about this topic in the [themes](#themes) section.
31+
32+
## base
33+
34+
Suggested maximum specificity: `0011`
35+
36+
Contains `suitcss-base` and generic rules or resets.
37+
<br>At this point you may want to only target elements and keep the specificity very low.
38+
39+
## components
40+
41+
Suggested maximum specificity: `0020`
42+
43+
Contains suitcss components.
44+
<br>It is a good idea to keep components simple and reusable.
45+
46+
Components are standalone, they just define variables that can be overriden in a Theme/Site file.
47+
48+
For consistency we suggest to use the following convention for properties names:
49+
50+
```
51+
--ComponentName[-descendant|--modifier][-onState]-(cssProperty|variableName)
52+
```
53+
54+
55+
Examples
56+
57+
```
58+
--ComponentName-backgroundColor
59+
--ComponentName-descendant-backgroundColor
60+
--ComponentName--modifier-backgroundColor
61+
--ComponentName-onHover-backgroundColor
62+
--ComponentName-descendant-onHover-backgroundColor
63+
...
64+
```
65+
66+
Example component `components/MyComponent/index.css`:
67+
68+
69+
```css
70+
/** @define MyComponent */
71+
72+
:root {
73+
--MyComponent-color: currentColor;
74+
--MyComponent-fontFamily: inherit;
75+
--MyComponent-fontSize: inherit;
76+
}
77+
78+
.MyComponent {
79+
color: var(--MyComponent-color);
80+
font-family: var(--MyComponent-fontFamily);
81+
font-size: var(--MyComponent-fontSize);
82+
}
83+
84+
.MyComponent-descendant {
85+
padding: var(--MyComponent-descendant-padding);
86+
}
87+
88+
@media (--MyComponent-mediaLarge) {
89+
.MyComponent-descendant {
90+
display: none;
91+
}
92+
}
93+
```
94+
95+
Components should use but not define their own custom media queries.
96+
97+
In the example `--MyComponent-mediaLarge` will be defined at the theme level.
98+
99+
Read more about [components](https://github.com/suitcss/suit/blob/master/doc/components.md).
100+
101+
## views
102+
103+
No suggested maximum specificity.
104+
105+
Views are page (or portions of it) specific styles.
106+
<br>Those styles usually are used to make small tweaks to a specific page or component in a specific context.
107+
108+
## utils
109+
110+
Specificity: `!important`.
111+
112+
Utility classes are one off and *final* rules.
113+
114+
Read more about [utilities](https://github.com/suitcss/suit/blob/master/doc/utilities.md).
115+
116+
## themes
117+
118+
Themes is the place where you customize your components and app.
119+
<br>Each theme is a folder in `themes` and defines theme specific variables.
120+
121+
Customization usually happens by mapping component properties to theme specific ones.
122+
123+
```css
124+
:root {
125+
--MyComponent-color: var(--color-primary);
126+
}
127+
```
128+
129+
A theme folder reproduces the app structure.
130+
Say that you are making a `ThemeName` theme:
131+
132+
```
133+
ThemeName
134+
- base
135+
- components
136+
- utils
137+
- views
138+
- variables
139+
```
140+
141+
### variables
142+
143+
Variables is the place where you define theme properties to use in the maps.
144+
145+
```
146+
variables
147+
- color.css
148+
- font.css
149+
- spacing.css
150+
- index.css
151+
```
152+
153+
Properties are namespaced using the file name `themes/ThemeName/variables/color.css`:
154+
155+
```css
156+
:root {
157+
--color-primary: black;
158+
--color-secondary: blue;
159+
--color-inverse: white;
160+
/* ... */
161+
}
162+
```
163+
164+
`index.css` includes them all `themes/ThemeName/variables/index.css`:
165+
166+
```css
167+
@import "./color";
168+
@import "./font";
169+
@import "./size";
170+
```
171+
172+
### theme parts
173+
174+
base, components, utils and views contain a single `index.css` file where we include the corrispective file from the app, variables and where we do the mapping.
175+
176+
Example:
177+
178+
```css
179+
/* themes/ThemeName/components/index.css */
180+
181+
/* import the generic components from the app */
182+
@import "../../../components";
183+
184+
/* import the variables */
185+
@import "../variables";
186+
187+
/* optionally import theme only components or overrides */
188+
/* @import "./Button"; */
189+
190+
/*
191+
Create a map of component variables and `../variables/`
192+
N.B. the maps could as well live in separate files e.g. in "./Button/index.css"
193+
*/
194+
195+
196+
/** MyComponent */
197+
198+
:root {
199+
--MyComponent-color: var(--color-primary);
200+
--MyComponent-fontFamily: var(--font-family-sansSerif);
201+
--MyComponent-fontSize: var(--font-size-medium);
202+
}
203+
204+
@custom-media --MyComponent-mediaLarge (min-width: 960px);
205+
206+
207+
/** AnotherComponent */
208+
```

‎examples/app/buildcss.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const dirname = require('path').dirname
2+
const glob = require('glob-promise');
3+
const mkdirp = require('mkdirp-promise')
4+
const read = require('fs-readfile-promise')
5+
const suitcss = require('suitcss-preprocessor')
6+
const write = require('fs-writefile-promise')
7+
8+
async function process(fileName) {
9+
const src = `src/${fileName}`
10+
const dest = `dist/${fileName}`
11+
const content = await read(src)
12+
const result = await suitcss(
13+
content,
14+
{ root: dirname(src) },
15+
src
16+
)
17+
await mkdirp(dirname(dest))
18+
await write(dest, result.css)
19+
}
20+
21+
async function build() {
22+
const entryFiles = await glob(
23+
'themes/*/{index,views/*}.css',
24+
{ cwd: 'src' }
25+
)
26+
if (entryFiles.length == 0) return
27+
return Promise.all(entryFiles.map(process))
28+
}
29+
30+
build().catch(e=>{
31+
console.error(e)
32+
process.exit(1)
33+
})

‎examples/app/package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"private": true,
3+
"name": "app",
4+
"version": "0.1.0",
5+
"description": "TodoMVC styled with SUITCSS",
6+
"main": "index.css",
7+
"watch": {
8+
"build": {
9+
"patterns": [
10+
"src"
11+
],
12+
"extensions": "css, html"
13+
}
14+
},
15+
"scripts": {
16+
"prebuild": "rm -rf dist && mkdir -p dist",
17+
"build": "npm run build:html && npm run build:css",
18+
"build:html": "cp src/index.html dist/index.html",
19+
"prebuild:css": "async-to-gen buildcss.js > __buildcss.js",
20+
"build:css": "node __buildcss.js",
21+
"postbuild:css": "rm __buildcss.js",
22+
"test": "exit 0",
23+
"watch": "npm-watch"
24+
},
25+
"keywords": [
26+
"suitcss",
27+
"app",
28+
"global",
29+
"styles"
30+
],
31+
"author": "Giuseppe Gurgone",
32+
"license": "BSD-3-Clause",
33+
"dependencies": {
34+
"suitcss-base": "^2.0.0"
35+
},
36+
"devDependencies": {
37+
"async-to-gen": "^1.1.4",
38+
"fs-readfile-promise": "^3.0.0",
39+
"fs-writefile-promise": "^1.0.3",
40+
"glob-fs": "^0.1.6",
41+
"glob-promise": "^1.0.6",
42+
"mkdirp-promise": "^3.0.1",
43+
"npm-watch": "^0.1.6",
44+
"suitcss-preprocessor": "git://github.com/suitcss/preprocessor.git#6fe1ec161eade4267cc5102b12d90498a9a91352"
45+
}
46+
}

‎examples/app/src/base/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "suitcss-base";

‎examples/app/src/components/App/index.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/** @define App */
2+
3+
:root {
4+
--App-color: currentColor;
5+
--App-backgroundColor: transparent;
6+
--App-borderWidth: 1px;
7+
--App-borderColor: currentColor;
8+
--App-fontFamily: inherit;
9+
--App-fontSize: 1rem;
10+
}
11+
12+
.App {
13+
background-color: var(--App-backgroundColor);
14+
border: var(--App-borderWidth) solid var(--App-borderColor);
15+
color: var(--App-color);
16+
font-family: var(--App-fontFamily);
17+
font-size: var(--App-fontSize);
18+
width: 100%;
19+
}
20+
21+
.App-addTodo {
22+
23+
}
24+
25+
.App-todos,
26+
.App-filters {
27+
border-top: var(--App-borderWidth) solid var(--App-borderColor);
28+
}

‎examples/app/src/components/FormField/index.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/** @define FormField */
2+
3+
:root {
4+
--FormField-fontFamily: inherit;
5+
--FormField-fontSize: 1rem;
6+
--FormField-fontWeight: normal;
7+
8+
--FormField-input-borderWidth: 1px;
9+
--FormField-input-borderColor: currentColor;
10+
--FormField-input-color: currentColor;
11+
--FormField-input-padding: 0.5rem 1rem;
12+
}
13+
14+
.FormField {
15+
display: block;
16+
font-size: var(--FormField-fontSize);
17+
width: 100%;
18+
}
19+
20+
.FormField-input {
21+
color: var(--FormField-input-color);
22+
display: block;
23+
padding: var(--FormField-input-padding);
24+
width: 100%;
25+
}

‎examples/app/src/components/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./App";
2+
@import "./FormField";

‎examples/app/src/index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>TodoMVC styled with SUITCSS</title>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width">
6+
<link href="themes/Default/index.css" rel="stylesheet">
7+
<link href="themes/Default/views/Page.css" rel="stylesheet">
8+
9+
<div class="Page">
10+
<div class="Page-container">
11+
<header>
12+
<h1 class="Page-title">todos</h1>
13+
</header>
14+
15+
<main class="Page-main">
16+
<div class="App">
17+
<div class="App-addTodo">
18+
<label class="FormField FormField--overlabel">
19+
<span class="FormField-label">What needs to be done?</span>
20+
<input class ="FormField-input" name="todo:new" type="text">
21+
</label>
22+
</div>
23+
<div class="App-wrapToggleAllButton">
24+
<button class="ToggleAllButton" aria-label="toggle all the todos"></button>
25+
</div>
26+
<div class="App-todos">
27+
todos
28+
</div>
29+
<div class="App-filters">
30+
filders
31+
</div>
32+
</div>
33+
</main>
34+
35+
<footer class="Page-footer">
36+
something
37+
</footer>
38+
</div>
39+
</div>

0 commit comments

Comments
 (0)