diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.js | 4 | ||||
| -rw-r--r-- | src/components/content/content.tag | 3 | ||||
| -rw-r--r-- | src/components/counter/counter.tag | 13 | ||||
| -rw-r--r-- | src/components/header/header.less | 9 | ||||
| -rw-r--r-- | src/components/header/header.tag | 8 | ||||
| -rw-r--r-- | src/components/push-button/push-button.less | 1 | ||||
| -rw-r--r-- | src/components/push-button/push-button.tag | 13 | ||||
| -rw-r--r-- | src/components/site/site.tag | 10 | ||||
| -rw-r--r-- | src/components/subheading/subheading.tag | 5 | ||||
| -rw-r--r-- | src/index.html | 17 | ||||
| -rw-r--r-- | src/observables/clicker.js | 9 | ||||
| -rw-r--r-- | src/observables/index.js | 3 | ||||
| -rw-r--r-- | src/reset.css | 48 | ||||
| -rw-r--r-- | src/style.less | 49 |
14 files changed, 192 insertions, 0 deletions
diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..6541e13 --- /dev/null +++ b/src/app.js @@ -0,0 +1,4 @@ +import riot from 'riot'; +import './tags'; + +riot.mount('site');
\ No newline at end of file diff --git a/src/components/content/content.tag b/src/components/content/content.tag new file mode 100644 index 0000000..5cd08a6 --- /dev/null +++ b/src/components/content/content.tag @@ -0,0 +1,3 @@ +<content> + <counter /> +</content>
\ No newline at end of file diff --git a/src/components/counter/counter.tag b/src/components/counter/counter.tag new file mode 100644 index 0000000..d558e8e --- /dev/null +++ b/src/components/counter/counter.tag @@ -0,0 +1,13 @@ +<counter> + <h3>Times clicked: { count }</h3> + <push-button /> + <script> + this.count = 0; + const counter = this; + + clicker.on('click', () => { + counter.count += 1; + counter.update(); + }); + </script> +</counter>
\ No newline at end of file diff --git a/src/components/header/header.less b/src/components/header/header.less new file mode 100644 index 0000000..13ac353 --- /dev/null +++ b/src/components/header/header.less @@ -0,0 +1,9 @@ +@import "../../style.less"; + +header h1 { + font-size: 5rem; + font-weight: 300; + @media screen and (max-width: @mobile-width) { + font-size: 3rem; + } +}
\ No newline at end of file diff --git a/src/components/header/header.tag b/src/components/header/header.tag new file mode 100644 index 0000000..d0ebe95 --- /dev/null +++ b/src/components/header/header.tag @@ -0,0 +1,8 @@ +<header> + <h1>Riot + Parcel example</h1> + <subheading>A sample project using riot.js, less and parcel.</subheading> + + <style type="less"> + @import "header.less"; + </style> +</header>
\ No newline at end of file diff --git a/src/components/push-button/push-button.less b/src/components/push-button/push-button.less new file mode 100644 index 0000000..488fc37 --- /dev/null +++ b/src/components/push-button/push-button.less @@ -0,0 +1 @@ +@import "../../style.less";
\ No newline at end of file diff --git a/src/components/push-button/push-button.tag b/src/components/push-button/push-button.tag new file mode 100644 index 0000000..2d24c88 --- /dev/null +++ b/src/components/push-button/push-button.tag @@ -0,0 +1,13 @@ +<push-button> + <button onclick={ click }>Click me!</button> + + <style type="less"> + @import "./push-button"; + </style> + + <script> + click() { + clicker.trigger('click'); + } + </script> +</push-button>
\ No newline at end of file diff --git a/src/components/site/site.tag b/src/components/site/site.tag new file mode 100644 index 0000000..c5e8706 --- /dev/null +++ b/src/components/site/site.tag @@ -0,0 +1,10 @@ +<site> + <header /> + <content /> + + <script> + /* Import everything that you want to have in scope in your tags here */ + import riot from 'riot'; + import { clicker } from './observables'; + </script> +</site>
\ No newline at end of file diff --git a/src/components/subheading/subheading.tag b/src/components/subheading/subheading.tag new file mode 100644 index 0000000..4266a7b --- /dev/null +++ b/src/components/subheading/subheading.tag @@ -0,0 +1,5 @@ +<subheading> + <h2> + <yield /> + </h2> +</subheading>
\ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..901d8ff --- /dev/null +++ b/src/index.html @@ -0,0 +1,17 @@ +<!doctype html> +<html lang="en"> + <head> + <title>Riot + Parcel example</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content="Riot + Parcel example."> + <link ref="stylesheet" href="reset.css"> + <link rel="stylesheet" href="style.less"> + <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet"> + </head> + + <body> + <site></site> + <script src="app.js"></script> + </body> +</html> diff --git a/src/observables/clicker.js b/src/observables/clicker.js new file mode 100644 index 0000000..ae3d3b1 --- /dev/null +++ b/src/observables/clicker.js @@ -0,0 +1,9 @@ +import riot from 'riot'; + +function Clicker() { + riot.observable(this); +} + +const clicker = new Clicker(); + +export default clicker;
\ No newline at end of file diff --git a/src/observables/index.js b/src/observables/index.js new file mode 100644 index 0000000..d26b412 --- /dev/null +++ b/src/observables/index.js @@ -0,0 +1,3 @@ +import clicker from './clicker'; + +export { clicker };
\ No newline at end of file diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 0000000..e29c0f5 --- /dev/null +++ b/src/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/style.less b/src/style.less new file mode 100644 index 0000000..7edb45e --- /dev/null +++ b/src/style.less @@ -0,0 +1,49 @@ +@riot-color-red: #fc0e49; +@riot-color-white: #fff; +@riot-color-black: #313131; +@riot-color-blue: #268bd2; + +@mobile-width: 600px; + +@font: 'Lato', sans-serif; + +*, *:before, *:after { + box-sizing: inherit; +} + +.lato-font(@size) { + font-family: 'Lato', sans-serif; + font-size: @size; +} + +html { + .lato-font(20px); + + background-color: @riot-color-white; + color: @riot-color-black; + box-sizing: border-box; +} + +body { + border: 0; + + max-width: 600px; + margin-left: auto; + margin-right: auto; + + padding: 1rem; +} + +a { + color: @riot-color-blue; +} + +button { + .lato-font(1rem); + + padding: 0.5rem 1rem; + background-color: @riot-color-red; + color: @riot-color-white; + border: 0; + border-radius: 5px; +}
\ No newline at end of file |