├── LICENSE.md
├── favicon.ico
├── assets
├── images
│ ├── team
│ │ ├── ben.jpg
│ │ ├── tim.jpg
│ │ ├── fiona.jpg
│ │ ├── glen.jpg
│ │ └── michael.jpg
│ ├── icons
│ │ ├── icon-128x128.png
│ │ ├── icon-1024x1024.png
│ │ ├── apple-touch-icon.png
│ │ ├── apple-touch-icon-precomposed.png
│ │ ├── apple-touch-icon-57x57-precomposed.png
│ │ ├── apple-touch-icon-76x76-precomposed.png
│ │ ├── apple-touch-icon-120x120-precomposed.png
│ │ └── apple-touch-icon-152x152-precomposed.png
│ └── logo.svg
├── screenshots
│ ├── start.png
│ └── team.png
└── style
│ └── style.css
├── test
└── all.js
├── ui
├── logo.reel
│ ├── logo.css
│ ├── logo.js
│ ├── logo.meta
│ └── logo.html
└── main.reel
│ ├── main.meta
│ ├── main.js
│ ├── main.html
│ └── main.css
├── package.json
├── run-tests.html
├── README.md
└── index.html
/LICENSE.md:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/favicon.ico
--------------------------------------------------------------------------------
/assets/images/team/ben.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/team/ben.jpg
--------------------------------------------------------------------------------
/assets/images/team/tim.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/team/tim.jpg
--------------------------------------------------------------------------------
/assets/images/team/fiona.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/team/fiona.jpg
--------------------------------------------------------------------------------
/assets/images/team/glen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/team/glen.jpg
--------------------------------------------------------------------------------
/assets/screenshots/start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/screenshots/start.png
--------------------------------------------------------------------------------
/assets/screenshots/team.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/screenshots/team.png
--------------------------------------------------------------------------------
/test/all.js:
--------------------------------------------------------------------------------
1 | require("montage-testing").run(require,[
2 | // Please keep in alphabetical order
3 |
4 | ]);
--------------------------------------------------------------------------------
/assets/images/team/michael.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/team/michael.jpg
--------------------------------------------------------------------------------
/assets/images/icons/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/icon-128x128.png
--------------------------------------------------------------------------------
/assets/images/icons/icon-1024x1024.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/icon-1024x1024.png
--------------------------------------------------------------------------------
/ui/logo.reel/logo.css:
--------------------------------------------------------------------------------
1 | .Logo {
2 | width: 3.5em;
3 | height: 2.5em;
4 | }
5 |
6 | .Logo-svg {
7 | fill: inherit;
8 | }
--------------------------------------------------------------------------------
/assets/images/icons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/apple-touch-icon.png
--------------------------------------------------------------------------------
/assets/images/icons/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/apple-touch-icon-precomposed.png
--------------------------------------------------------------------------------
/assets/images/icons/apple-touch-icon-57x57-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/apple-touch-icon-57x57-precomposed.png
--------------------------------------------------------------------------------
/assets/images/icons/apple-touch-icon-76x76-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/apple-touch-icon-76x76-precomposed.png
--------------------------------------------------------------------------------
/assets/images/icons/apple-touch-icon-120x120-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/apple-touch-icon-120x120-precomposed.png
--------------------------------------------------------------------------------
/assets/images/icons/apple-touch-icon-152x152-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simurai/cssconf-app/HEAD/assets/images/icons/apple-touch-icon-152x152-precomposed.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "digit-app",
3 | "version": "0.1.0",
4 | "dependencies": {
5 | "montage": "~0.14.0",
6 | "digit": "~0.5.0"
7 | },
8 | "devDependencies": {
9 | "montage-testing": "~0.4.0"
10 | },
11 | "exclude": [
12 | "run-tests.html",
13 | "test"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/ui/logo.reel/logo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module ui/logo.reel
3 | * @requires montage/ui/component
4 | */
5 | var Component = require("montage/ui/component").Component;
6 |
7 | /**
8 | * @class Logo
9 | * @extends Component
10 | */
11 | exports.Logo = Component.specialize(/** @lends Logo# */ {
12 | constructor: {
13 | value: function Logo() {
14 | this.super();
15 | }
16 | }
17 | });
18 |
--------------------------------------------------------------------------------
/assets/style/style.css:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | * This file is reserved for your global style rules.
4 | */
5 |
6 | html {
7 | height: 100%;
8 | font-family: Avenir, sans-serif;
9 |
10 | /* Play around to your liking */
11 | font-size: 16px;
12 | fill: currentColor;
13 |
14 | color: hsl(212, 72%, 80%);
15 | background: coral;
16 | }
17 |
18 | body {
19 | height: 100%;
20 | margin: 0; /* Remove default margin */
21 | }
22 |
--------------------------------------------------------------------------------
/run-tests.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/ui/logo.reel/logo.meta:
--------------------------------------------------------------------------------
1 | {
2 | "blueprint_component_reference": {
3 | "prototype": "montage/core/meta/blueprint-reference",
4 | "properties": {
5 | "valueReference": {
6 | "blueprintName": "Component",
7 | "blueprintModule": {
8 | "%": "montage/ui/component.meta"
9 | }
10 | }
11 | }
12 | },
13 | "root": {
14 | "prototype": "montage/core/meta/module-blueprint",
15 | "properties": {
16 | "name": null,
17 | "parent": {"@": "blueprint_component_reference"},
18 | "propertyBlueprintGroups": {
19 | "Logo": []
20 | },
21 | "module": {
22 | "%": "ui/logo.reel"
23 | },
24 | "exportName": "Logo"
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/ui/main.reel/main.meta:
--------------------------------------------------------------------------------
1 | {
2 | "blueprint_component_reference": {
3 | "prototype": "montage/core/meta/blueprint-reference",
4 | "properties": {
5 | "valueReference": {
6 | "blueprintName": "Component",
7 | "blueprintModule": {
8 | "%": "montage/ui/component.meta"
9 | }
10 | }
11 | }
12 | },
13 | "root": {
14 | "prototype": "montage/core/meta/module-blueprint",
15 | "properties": {
16 | "name": null,
17 | "parent": {"@": "blueprint_component_reference"},
18 | "propertyBlueprintGroups": {
19 | "Main": []
20 | },
21 | "module": {
22 | "%": "ui/main.reel"
23 | },
24 | "exportName": "Main"
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/ui/main.reel/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module ui/main.reel
3 | * @requires montage/ui/component
4 | */
5 | var Component = require("montage/ui/component").Component;
6 |
7 | /**
8 | * @class Main
9 | * @extends Component
10 | */
11 | exports.Main = Component.specialize(/** @lends Main# */ {
12 | constructor: {
13 | value: function Main() {
14 | this.super();
15 | }
16 | },
17 |
18 | _chip: {
19 | value: null
20 | },
21 |
22 | _badge: {
23 | value: null
24 | },
25 |
26 | _chipColor: {
27 | value: 0
28 | },
29 |
30 | chipColor: {
31 | set: function(value) {
32 | this._chipColor = value;
33 | this.needsDraw = true;
34 | },
35 | get: function() {
36 | return this._chipColor;
37 | }
38 | },
39 |
40 | handleSearchAction: {
41 | value: function(event) {
42 | this.classList.add("is-team");
43 | this._badge.value = 5;
44 | }
45 | },
46 |
47 | draw: {
48 | value: function() {
49 | var hue = Math.round(this._chipColor);
50 | var color = "hsl(" + hue + ",80%,60%)";
51 |
52 | //this._chip.style.color = color;
53 | //this._chip.style.fill = color;
54 | }
55 | }
56 |
57 | });
58 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSSConf App
2 |
3 | > Note: This is totally fake and just used as a __demo__ for my "Styling with STRINGS" talk at [CSSConf AU 2014](http://2014.cssconf.com.au/).
4 |
5 |  
6 |
7 | If you have seen the talk and wanna play around a bit with the Flexbox reordering or `color` and `font-size` changing, you can do that in the:
8 |
9 | [Live Demo](http://simurai.github.io/cssconf-app)
10 |
11 | > Note: The loading can take a while since the app is not optimized for production. That way it's easier to understand the source.
12 |
13 |
14 | ## How to customize
15 |
16 | Just open the inspector/DevTools and start by changing these properties for the root `html` element:
17 |
18 | ```css
19 | html {
20 | font-size: 16px;
21 | color: hsl(212, 72%, 80%);
22 | background: coral;
23 | }
24 | ```
25 |
26 | or limit it to the header/footer `.Bar`s only,
27 |
28 | ```css
29 | .Bar {
30 | font-size: ???;
31 | color: ???;
32 | background: ???;
33 | }
34 | ```
35 |
36 | or any other element.
37 |
38 |
39 | ## Made with
40 |
41 | The app uses the [Digit](https://github.com/montagejs/digit) UI Set that runs on [MontageJS](https://github.com/montagejs/montage)
42 |
43 |
44 | ## Support
45 |
46 | Should work in most browsers, although the animations are only WebKit prefixed
47 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSConf App
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
48 |
49 |
50 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/ui/main.reel/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Main
7 |
8 |
9 |
88 |
89 |
90 |
108 |
109 |
--------------------------------------------------------------------------------
/ui/main.reel/main.css:
--------------------------------------------------------------------------------
1 | .App {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | opacity: 0;
6 | transition: opacity .6s;
7 | }
8 |
9 | .montage-app-loaded .App {
10 | opacity: 1;
11 | }
12 |
13 |
14 | /* Bar ---------------------------------- */
15 |
16 | .Bar {
17 | display: flex;
18 | align-items: center;
19 | justify-content: center;
20 | padding: 0.4rem;
21 | background-color: hsla(0, 0%, 0%, 0.7);
22 | }
23 |
24 | .Bar--header {
25 |
26 | }
27 |
28 | .Bar--footer {
29 |
30 | }
31 |
32 | .Bar > * {
33 | margin: 0.4rem;
34 | }
35 |
36 | /* Header ---------------------------------- */
37 |
38 | .Badge {
39 | width: 2.5em;
40 | height: 2.5em;
41 | line-height: 2.4;
42 | font-weight: 500;
43 | text-align: center;
44 | border-radius: 1.25em;
45 | border-width: 2px;
46 | }
47 |
48 | .is-team .Badge {
49 | -webkit-animation: badge .3s cubic-bezier(0.130, 0.625, 0.405, 1.340);
50 | }
51 | @-webkit-keyframes badge {
52 | 20% { -webkit-transform: scale(.5); }
53 | }
54 |
55 |
56 |
57 | .Search {
58 | flex: 1;
59 | font-family: inherit;
60 | }
61 |
62 |
63 |
64 | /* Main ---------------------------------- */
65 |
66 | .Main {
67 | position: relative;
68 | flex: 1;
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | padding: 1rem 0;
74 | overflow: auto;
75 | -webkit-overflow-scrolling: touch;
76 | }
77 |
78 | .Main-splash {
79 | position: absolute;
80 | top: 0;
81 | left: 0;
82 | right: 0;
83 | bottom: 0;
84 | opacity: .1;
85 | background: url(../../assets/images/logo.svg) no-repeat center center;
86 | background-size: 70% auto;
87 | }
88 |
89 | .is-team .Main-splash {
90 | opacity: 0;
91 | transition: opacity .2s ease-in;
92 | }
93 |
94 |
95 | /* Puppet ---------------------------------- */
96 |
97 | .Puppet {
98 | margin: .4rem 1rem;
99 | width: 7em;
100 | height: 7em;
101 | border-radius: 100%;
102 | border: 3px solid;
103 | background: transparent no-repeat center center;
104 | background-size: auto 130%;
105 | }
106 |
107 | .Puppet .digit-Checkbox-icon {
108 | display: none;
109 | }
110 |
111 | .Puppet:nth-of-type(1) { background-image: url(../../assets/images/team/ben.jpg); }
112 | .Puppet:nth-of-type(2) { background-image: url(../../assets/images/team/fiona.jpg); }
113 | .Puppet:nth-of-type(3) { background-image: url(../../assets/images/team/glen.jpg); }
114 | .Puppet:nth-of-type(4) { background-image: url(../../assets/images/team/michael.jpg); }
115 | .Puppet:nth-of-type(5) { background-image: url(../../assets/images/team/tim.jpg); }
116 |
117 |
118 | /* Shakes ---------------------------------- */
119 |
120 | .Puppet:nth-of-type(1).montage-Checkbox--checked,
121 | .is-teamShake .Puppet:nth-of-type(1) {
122 | -webkit-animation: shake1 .5s ease-in-out infinite;
123 | }
124 | @-webkit-keyframes shake1 {
125 | 40% { -webkit-transform: scale(.7); }
126 | 50% { -webkit-transform: scale(.8); }
127 | 60% { -webkit-transform: scale(.7); }
128 | }
129 |
130 | .Puppet:nth-of-type(2).montage-Checkbox--checked,
131 | .is-teamShake .Puppet:nth-of-type(2) {
132 | -webkit-animation: shake2 .5s ease infinite;
133 | }
134 | @-webkit-keyframes shake2 {
135 | 33% { -webkit-transform: perspective(200) translateY(0px) rotateY(-35deg); }
136 | 40% { -webkit-transform: perspective(200) translateY(4px) rotateY(-30deg); }
137 | 60% { -webkit-transform: perspective(200) translateY(-4px) rotateY( 30deg); }
138 | 66% { -webkit-transform: perspective(200) translateY(-0px) rotateY( 35deg); }
139 | }
140 |
141 | .Puppet:nth-of-type(3).montage-Checkbox--checked,
142 | .is-teamShake .Puppet:nth-of-type(3) {
143 | -webkit-animation: shake3 .5s ease infinite;
144 | }
145 | @-webkit-keyframes shake3 {
146 | 40% { -webkit-transform: translate3d(-4px,15px,0); }
147 | 45% { -webkit-transform: translate3d(10px,20px,0); }
148 | 55% { -webkit-transform: translate3d(-10px,30px,0); }
149 | 60% { -webkit-transform: translate3d(4px,10px,0); }
150 | }
151 |
152 | .Puppet:nth-of-type(4).montage-Checkbox--checked,
153 | .is-teamShake .Puppet:nth-of-type(4) {
154 | -webkit-animation: shake4 .5s ease infinite;
155 | }
156 | @-webkit-keyframes shake4 {
157 | 30% { -webkit-transform: translate3d(8px,-2px,0); }
158 | 34% { -webkit-transform: translate3d(16px,-4px,0); }
159 | 38% { -webkit-transform: translate3d(8px,-2px,0) scale(1,.8); }
160 | 62% { -webkit-transform: translate3d(-8px,2px,0) scale(1,.8); }
161 | 66% { -webkit-transform: translate3d(-16px,4px,0); }
162 | 70% { -webkit-transform: translate3d(-8px,2px,0); }
163 | }
164 |
165 | .Puppet:nth-of-type(5).montage-Checkbox--checked,
166 | .is-teamShake .Puppet:nth-of-type(5) {
167 | -webkit-animation: shake5 .5s ease infinite;
168 | }
169 | @-webkit-keyframes shake5 {
170 | 10% { -webkit-transform: translate3d(-8px,-2px,0); }
171 | 30% { -webkit-transform: translate3d(28px,10px,0); }
172 | 40% { -webkit-transform: translate3d(8px,2px,0); }
173 | 45% { -webkit-transform: translate3d(30px,-20px,0) scale(2); }
174 | 50% { -webkit-transform: translate3d(8px,-12px,0); }
175 | 62% { -webkit-transform: translate3d(-10px,-16px,0); }
176 | 66% { -webkit-transform: translate3d(-26px,24px,0) scale(1.5); }
177 | 70% { -webkit-transform: translate3d(20px,3px,0); }
178 | 80% { -webkit-transform: translate3d(-30px,-2px,0); }
179 | 95% { -webkit-transform: translate3d(0px,20px,0); }
180 | }
181 |
182 |
183 |
184 | /* Show Puppet */
185 |
186 | .Puppet {
187 | opacity: 0;
188 | -webkit-transform: translateY(-600%) rotate(90deg) scale(1.2);
189 | }
190 |
191 | .is-team .Puppet {
192 | opacity: 1;
193 | -webkit-transform: translateY(0) rotate(0) scale(1);
194 | transition: opacity .3s, -webkit-transform .4s cubic-bezier(0.690, 0.160, 0.605, 1.285);
195 | }
196 |
197 | .Puppet:nth-of-type(1) { transition-delay: 0s; }
198 | .Puppet:nth-of-type(2) { transition-delay: 0.02s; }
199 | .Puppet:nth-of-type(3) { transition-delay: 0.04s; }
200 | .Puppet:nth-of-type(4) { transition-delay: 0.06s; }
201 | .Puppet:nth-of-type(5) { transition-delay: 0.2s; }
202 |
203 |
204 |
205 |
206 | /* Footer ---------------------------------- */
207 |
208 | .Toggle {
209 | vertical-align: middle;
210 | }
211 |
212 | .Toggle.montage-ToggleSwitch--checked > .digit-ToggleSwitch-thumb {
213 | background-color: hsla(0, 0%, 0%, 0.72);
214 | }
215 |
216 |
217 |
218 | /* Responsive ---------------------------------- */
219 |
220 | @media (min-width: 500px) and (min-height: 800px) {
221 |
222 | .App {
223 | font-size: 2em;
224 | }
225 |
226 | }
227 |
--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/ui/logo.reel/logo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Logo
6 |
7 |
16 |
17 |
18 |
25 |
26 |
--------------------------------------------------------------------------------