From d0142fb682f09ab85111fba6d5a84c82f6aa1b65 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Thu, 24 Aug 2017 06:22:00 +0800 Subject: [PATCH 01/44] Initial implementation --- _config.yml | 2 +- _includes/2017/foot.html | 3 + _includes/2017/head.html | 19 ++ _layouts/2017/sheet.html | 9 + assets/2017/script.js | 80 +++++++ assets/2017/style.css | 248 +++++++++++++++++++++ react.md | 453 +++++++++++++++++++-------------------- react@0.14.md | 416 +++++++++++++++++++++++++++++++++++ sketch.md | 9 +- 9 files changed, 992 insertions(+), 247 deletions(-) create mode 100644 _includes/2017/foot.html create mode 100644 _includes/2017/head.html create mode 100644 _layouts/2017/sheet.html create mode 100644 assets/2017/script.js create mode 100644 assets/2017/style.css create mode 100644 react@0.14.md diff --git a/_config.yml b/_config.yml index 1fd48e8c4..47137a302 100644 --- a/_config.yml +++ b/_config.yml @@ -9,7 +9,7 @@ exclude: - _deprecated # Markdown -highlighter: rouge +highlighter: false markdown: kramdown kramdown: input: GFM diff --git a/_includes/2017/foot.html b/_includes/2017/foot.html new file mode 100644 index 000000000..9943ff0f8 --- /dev/null +++ b/_includes/2017/foot.html @@ -0,0 +1,3 @@ + + + diff --git a/_includes/2017/head.html b/_includes/2017/head.html new file mode 100644 index 000000000..837771124 --- /dev/null +++ b/_includes/2017/head.html @@ -0,0 +1,19 @@ + + + + {% include meta.html %} + {% include polyfills.html %} + + + + + + + + + + + + + +
diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html new file mode 100644 index 000000000..54851ac5d --- /dev/null +++ b/_layouts/2017/sheet.html @@ -0,0 +1,9 @@ +--- +type: article +--- +{% include 2017/head.html %} +

{{ page.title }}

+
+ {{ content }} +
+{% include 2017/foot.html %} diff --git a/assets/2017/script.js b/assets/2017/script.js new file mode 100644 index 000000000..670e17ef8 --- /dev/null +++ b/assets/2017/script.js @@ -0,0 +1,80 @@ +$(function () { + const $root = $('[data-js-main-body]') + wrapify($root) +}) + +/* + * Isotope + */ + +$(function () { + $('[data-js-h3-section-list]').each(function () { + var iso = new Isotope(this, { + itemSelector: '.h3-section', + transitionDuration: 0 + }) + }) +}) + +/* + * Wraps h2 sections into h2-section. + * Wraps h3 sections into h3-section. + */ + +function wrapify ($root) { + const $h2sections = groupify($root, { + tag: 'h2', + wrapper: '
', + body: '
' + }) + + $h2sections.each(function () { + const $body = $(this).children('[data-js-h3-section-list]') + + groupify($body, { + tag: 'h3', + wrapper: '
', + body: '
' + }) + }) +} + +/* + * Groups stuff + */ + +function groupify ($this, { tag, wrapper, body }) { + const $first = $this.children(':first-child') + let $result = $() + + // Handle the markup before the first h2 + if (!$first.is(tag)) { + const $sibs = $first.nextUntil(tag) + $result = $result.add(wrap($first, null, $first.add($sibs))) + } + + $this.children(tag).each(function () { + const $sibs = $(this).nextUntil(tag) + const $heading = $(this) + $result = $result.add(wrap($heading, $heading, $sibs)) + }) + + return $result + + function wrap ($pivot, $first, $sibs) { + const $wrap = $(wrapper) + $wrap.addClass($pivot.attr('class')) + console.log($pivot[0]) + console.log('addclass', $pivot.attr('class')) + $pivot.before($wrap) + + const $body = $(body) + $body.addClass($pivot.attr('class')) + $body.append($sibs) + + if ($first) $wrap.append($first) + $wrap.append($body) + + return $wrap + } +} diff --git a/assets/2017/style.css b/assets/2017/style.css new file mode 100644 index 000000000..bd73e6e8f --- /dev/null +++ b/assets/2017/style.css @@ -0,0 +1,248 @@ +@import url('https://unpkg.com/sanitize.css@5.0.0/sanitize.css'); + +:root { + --gutter: 32px; + --column: 400px; + + --body-font: roboto, sans-serif; + --monospace-font: menlo, monospace; + + --gray-bg: #fcfcfc; + --gray-text: #678; + --text-color: #333; + --baseA-400: #53a; + --line-color: #f5f5f5; + --dark-line-color: #ccc; +} + +/* + * Base + */ + +html, body { + background: #fcfcfc; + font-family: var(--body-font); + font-size: 14px; + line-height: 1.6; + color: var(--text-color); +} + +body { + padding: 16px; + max-width: calc(var(--column) * 3 + 32px); + margin: 0 auto; +} + +pre, code { + font-family: var(--monospace-font); +} + +/* + * MarkdownBody context + */ + +.main-heading, +.MarkdownBody h1, +.MarkdownBody h2 { + font-weight: 300; + font-family: var(--body-font); + margin: calc(var(--gutter) / 2); + padding: 0; + margin-bottom: 16px; + padding-bottom: 16px; + border-bottom: solid 1px var(--line-color); +} + +.main-heading, +.MarkdownBody h1 { + font-size: 3.2em; +} + +.MarkdownBody h2 { + font-size: 2.4em; +} + +.MarkdownBody h3 { + margin: 0; + padding: 0; + margin-bottom: 16px; + font-family: var(--body-font); + font-size: 1.66em; + font-weight: 300; + color: var(--baseA-400); +} + +/* + * h2 section + */ + +/* Hide the first h2 heading */ +.h2-section > h2 { + margin-top: 64px; +} + +.h2-section:first-child > h2 { + display: none; +} + +/* + * H3 section list: + * The body that is isotoped. + */ + +.h3-section-list { + margin: 0 auto; +} + +.h3-section-list::after { + content: ''; + display: table; + clear: both; + zoom: 1; +} +.h3-section-list > .h3-section { + float: left; + padding: calc(var(--gutter) / 2); + width: 100%; +} + +@media (min-width: 768px) { + .h3-section-list > .h3-section { + width: 50%; + } + + .h3-section-list > .h3-section.-wide { + width: 100%; + } + + .h3-section-list > .h3-section.-halfwide { + width: 100%; + } +} + +@media (min-width: 960px) { + .h3-section-list > .h3-section { + width: 33.33%; + } + + .h3-section-list > .h3-section.-wide { + width: 66.67%; + } + + .h3-section-list > .h3-section.-halfwide { + width: 50%; + } +} + +/* + * H3 section + */ + +.h3-section > .body > pre { + margin: 0; + padding: 16px; + font-size: 12px; + overflow: auto; + background: white; +} + +.h3-section > .body { + background: white; + box-shadow: 0 4px 5px rgba(80, 100, 150, 0.05), 0 2px 3px rgba(80, 100, 150, 0.1); +} + +.h3-section > .body > ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.h3-section > .body > ul > li { + padding: 8px 16px; + padding-left: 32px; + position: relative; +} + +.h3-section > .body > ul > li::before { + content: ''; + position: absolute; + display: inline-block; + width: 8px; + height: 8px; + background: #666; + border-radius: 50%; + left: 16px; + top: 16px; +} + +.h3-section > .body > ul > li + li { + border-top: solid 1px var(--line-color); +} + +/* Description paragraphs */ +.h3-section > .body > pre ~ p, +.h3-section > .body > ul ~ p, +.h3-section > .body > table ~ p { + padding: 16px; + margin: 0; + background: var(--gray-bg); + color: var(--gray-text); +} + +.h3-section > .body > p > a, +.h3-section > .body > p > a:visited { + color: var(--text-color); + text-decoration: none; + border-bottom: solid 1px var(--line-color); +} + +.h3-section > .body > *:not(:first-child) { + border-top: solid 1px var(--line-color); +} + +/* + * Table + */ + +table { + width: 100%; +} + +table tr + tr { + border-top: solid 1px var(--line-color); +} + +/* Horizontal lines */ +table tbody + tbody { + border-top: solid 1px var(--dark-line-color); +} + +table td, +table th { + padding: 8px 16px; +} + +table tr td:last-child { + text-align: right; +} + +table code { + font-size: 0.86em; + color: #35a; +} + +table a, +table a:visited { + color: #35a; + text-decoration: none; +} + +table code ~ em { + font-style: normal; + font-size: 0.86em; + color: var(--gray-text); +} + +table thead { + display: none; +} diff --git a/react.md b/react.md index 2fbf306b0..540f8cbef 100644 --- a/react.md +++ b/react.md @@ -1,121 +1,82 @@ --- title: React.js category: React -layout: default-ad +layout: 2017/sheet --- {%raw%} -Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)) -{:.brief-intro.center} +Getting started +--------------- -```js -var Component = React.createClass({ - render: function () { - return
Hello {this.props.name}
; +{:.-three-column} + + + +### Getting started + +```jsx +class MyComponent extends React.Component { + render () { + return
+ Hello {this.props.name} +
} -}); -``` - -```js -ReactDOM.render(, document.body); -``` -{:.light} - -## Nesting -Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html). -{:.center} - -```js -var UserAvatar = React.createClass({...}); -var UserProfile = React.createClass({...}); -``` -{:.light} - -```js -var Info = React.createClass({ - render() { - return
- - -
; - } -}); -``` - -## States & Properties -Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent. -Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data. -{:.center} - -```html - -``` -{:.light} - -```js -// props - this.props.fullscreen //=> true - -// state - this.setState({ username: 'rstacruz' }); - this.replaceState({ ... }); - this.state.username //=> 'rstacruz' -``` - -```js -render: function () { - return
- Welcome, {this.state.username} -
; } ``` -### Setting defaults -Pre-populates `this.state.comments` and `this.props.name`. - -```js -React.createClass({ - getInitialState: function () { - return { comments: [] }; - }, - - getDefaultProps: function () { - return { name: "Hello" }; - } -); +```jsx +const el = document.body +ReactDOM.render(, el) ``` -## Component API +Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)). + +### Functional components + +```jsx +function MyComponent ({ name }) { + return
+ Hello {name} +
+} +``` + +### Nesting + +```jsx +class Info extends React.Component { + render () { + const { avatar, username } = this.props + + return
+ + +
+ } +} +``` + +Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html) + + +### Component API + +```jsx +this.forceUpdate() +this.isMounted() + +this.setState({ ... }) +this.replaceState({ ... }) + +this.state +this.props +``` These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html). -{:.center} -```js -ReactDOM.findDOMNode(c) // 0.14+ -React.findDOMNode(c) // 0.13 -c.getDOMNode() // 0.12 below -``` -{:.light} - -```js -c.forceUpdate() -c.isMounted() - -c.state -c.props - -c.setState({ ... }) -c.replaceState({ ... }) - -c.setProps({ ... }) // for deprecation -c.replaceProps({ ... }) // for deprecation - -c.refs -``` ### Component specs -Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html). | Method | What | | ---- | ---- | @@ -130,77 +91,95 @@ Methods and properties you can override. See [component specs](http://facebook.g | [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX | {:.greycode.no-head} -## Lifecycle +Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html). + +### States & properties + +```html + +``` + +```jsx +// props + this.props.fullscreen //=> true + +// state + this.setState({ username: 'rstacruz' }); + this.replaceState({ ... }); + this.state.username //=> 'rstacruz' +``` + +```jsx +render: function () { + return
+ Welcome, {this.state.username} +
; +} +``` + +Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent. +Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data. + +### Setting defaults + +```jsx +React.createClass({ + getInitialState: function () { + return { comments: [] }; + }, + + getDefaultProps: function () { + return { name: "Hello" }; + } +); +``` + +Pre-populates `this.state.comments` and `this.props.name`. + +Lifecycle +--------- + +{:.-two-column} ### Mounting -Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount). | `componentWillMount()` | Before rendering (no DOM yet) | | `componentDidMount()` | After rendering | -{:.greycode.no-head.lc} +| `componentWillUnmount()` | Invoked before DOM removal | -
+Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount). + +Clear your DOM stuff in componentWillMount (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount). ### Updating -Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). | `componentWillReceiveProps`*(newProps={})* | Use `setState()` here | | `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false | | `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here | | `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here | -{:.greycode.no-head.lc} -
+Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). -### Unmounting -Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount). +DOM nodes +--------- -| `componentWillUnmount()` | Invoked before DOM removal | -{:.greycode.no-head.lc} - - - -
- -### Example: loading data -See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html). - -```js -React.createClass({ - componentDidMount: function () { - $.get(this.props.url, function (data) { - this.setState(data); - }.bind(this)); - }, - - render: function () { - return - } -}); -``` - -## DOM nodes +{:.-two-column} ### References -Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html). ```html ``` -{:.light} -```js +```jsx this.refs.myInput ReactDOM.findDOMNode(this.refs.myInput).focus() ReactDOM.findDOMNode(this.refs.myInput).value ``` +Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html). + ### DOM Events -Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html). ```html -``` -{:.light} +Property validation +------------------- -```js -React.createClass({ - mixins: [React.addons.LinkedStateMixin] -}); -``` +### React.PropTypes -```js -this.state.email -``` +| PropType | Description | +| --- | --- | +| `any` | Anything | +| --- | --- | +| `string` | | +| `number` | | +| `func` | Function | +| `bool` | True or false | +| --- | --- | +| `oneOf`_(any)_ | Enum types | +| `oneOfType`_(type array)_ | Union | +| --- | --- | +| `array` | | +| `arrayOf`_(...)_ | | +| --- | --- | +| `object` | | +| `objectOf`_(...)_ | | +| `instanceOf`_(...)_ | | +| `shape`_(...)_ | | +| --- | --- | +| `element` | React element | +| `node` | DOM node | +| --- | --- | +| `.isRequired` | Required | -## Property validation +See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation). ### Basic types -Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation). -```js -React.createClass({ - propTypes: { - email: React.PropTypes.string, - seats: React.PropTypes.number, - settings: React.PropTypes.object, - callback: React.PropTypes.func, - isClosed: React.PropTypes.bool, - any: React.PropTypes.any, - } -}); +```jsx +MyComponent.propTypes = { + email: React.PropTypes.string, + seats: React.PropTypes.number, + callback: React.PropTypes.func, + isClosed: React.PropTypes.bool, + any: React.PropTypes.any +} ``` +See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation). + ### Required types + +```jsx +MyComponent.propTypes = { + requiredFunc: React.PropTypes.func.isRequired, + requiredAny: React.PropTypes.any.isRequired +} +``` + Add `.isRequired`. -```js -propTypes: { - requiredFunc: React.PropTypes.func.isRequired, - requiredAny: React.PropTypes.any.isRequired, +### React elements + +```jsx +MyComponent.propTypes = { + // React element + element: React.PropTypes.element, + + // num, string, element, or an array of those + node: React.PropTypes.node +} ``` -### React elements Use `.element`, `.node`. -```js -propTypes: { - element: React.PropTypes.element, // react element - node: React.PropTypes.node, // num, string, element - // ...or array of those -``` - ### Enumerables -Use `.oneOf`, `.oneOfType`. ``` propTypes: { @@ -281,10 +277,11 @@ propTypes: { React.PropTypes.number ]), ``` -### Arrays and objects -Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`. +Use `.oneOf`, `.oneOfType`. -```js +### Arrays and objects + +```jsx propTypes: { array: React.PropTypes.array, arrayOf: React.PropTypes.arrayOf(React.PropTypes.number), @@ -299,10 +296,11 @@ propTypes: { }), ``` -### Custom validation -Supply your own function. +Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`. -```js +### Custom validation + +```jsx propTypes: { customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { @@ -312,61 +310,31 @@ propTypes: { } ``` +Supply your own function. + ## Other features -### Class set -Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html). - -```js -var cx = require('classnames'); - -render: function() { - var classes = cx({ - 'message': true, - 'message-important': this.props.isImportant, - 'message-read': this.props.isRead - }); - - return
Great Scott!
; -} -``` - ### Propagating properties -See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html). ```html ``` -{:.light} -```js -var VideoPlayer = React.createClass({ - render: function() { - /* propagates src="..." down to this sub component */ - return ; +```jsx +class VideoPlayer extends React.Component { + render () { + return } -}); -``` - -### Mixins -See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins. - -```js -var SetIntervalMixin = { - componentWillMount: function() { .. } -} -``` -{:.light} - -```js -var TickTock = React.createClass({ - mixins: [SetIntervalMixin] } ``` -## [Top level API](https://facebook.github.io/react/docs/top-level-api.html) +Propagates `src="..."` down to the sub-component. -```js +See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html). + +### Top-level API + +```jsx React.createClass({ ... }) React.isValidElement(c) @@ -379,27 +347,30 @@ ReactDOMServer.renderToString() // 0.14+ ReactDOMServer.renderToStaticMarkup() // 0.14+ ``` -## JSX patterns +JSX patterns +------------ ### Style shorthand -See [inline styles](https://facebook.github.io/react/tips/inline-styles.html). -```js +```jsx var style = { backgroundImage: 'url(x.jpg)', height: 10 }; return
; ``` -### InnerHTML -See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html). +See [inline styles](https://facebook.github.io/react/tips/inline-styles.html). -```js +### Inner HTML + +```jsx function markdownify() { return "

...

"; }
``` +See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html). + ### Lists -```js +```jsx var TodoList = React.createClass({ render: function() { function item(itemText) { @@ -410,7 +381,13 @@ var TodoList = React.createClass({ }); ``` -## See also +See also +-------- + +{:.-two-column} + +### Also see * [Animations](http://facebook.github.io/react/docs/animation.html) + {%endraw%} diff --git a/react@0.14.md b/react@0.14.md new file mode 100644 index 000000000..2fbf306b0 --- /dev/null +++ b/react@0.14.md @@ -0,0 +1,416 @@ +--- +title: React.js +category: React +layout: default-ad +--- + +{%raw%} + +Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)) +{:.brief-intro.center} + +```js +var Component = React.createClass({ + render: function () { + return
Hello {this.props.name}
; + } +}); +``` + +```js +ReactDOM.render(, document.body); +``` +{:.light} + +## Nesting +Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html). +{:.center} + +```js +var UserAvatar = React.createClass({...}); +var UserProfile = React.createClass({...}); +``` +{:.light} + +```js +var Info = React.createClass({ + render() { + return
+ + +
; + } +}); +``` + +## States & Properties +Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent. +Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data. +{:.center} + +```html + +``` +{:.light} + +```js +// props + this.props.fullscreen //=> true + +// state + this.setState({ username: 'rstacruz' }); + this.replaceState({ ... }); + this.state.username //=> 'rstacruz' +``` + +```js +render: function () { + return
+ Welcome, {this.state.username} +
; +} +``` + +### Setting defaults +Pre-populates `this.state.comments` and `this.props.name`. + +```js +React.createClass({ + getInitialState: function () { + return { comments: [] }; + }, + + getDefaultProps: function () { + return { name: "Hello" }; + } +); +``` + +## Component API + +These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html). +{:.center} + +```js +ReactDOM.findDOMNode(c) // 0.14+ +React.findDOMNode(c) // 0.13 +c.getDOMNode() // 0.12 below +``` +{:.light} + +```js +c.forceUpdate() +c.isMounted() + +c.state +c.props + +c.setState({ ... }) +c.replaceState({ ... }) + +c.setProps({ ... }) // for deprecation +c.replaceProps({ ... }) // for deprecation + +c.refs +``` + +### Component specs +Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html). + +| Method | What | +| ---- | ---- | +| [`render()`](http://facebook.github.io/react/docs/component-specs.html#render) | | +| ---- | ---- | +| [`getInitialState()`](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) | | +| [`getDefaultProps()`](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) | | +| ---- | ---- | +| [`mixins: [ ... ]`](http://facebook.github.io/react/docs/component-specs.html#mixins) | Mixins ... [more](#mixins) | +| [`propTypes: { ... }`](http://facebook.github.io/react/docs/component-specs.html#proptypes) | Validation ... [more](#property-validation) | +| [`statics: { ... }`](http://facebook.github.io/react/docs/component-specs.html#statics) | Static methods | +| [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX | +{:.greycode.no-head} + +## Lifecycle + +### Mounting +Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount). + +| `componentWillMount()` | Before rendering (no DOM yet) | +| `componentDidMount()` | After rendering | +{:.greycode.no-head.lc} + +
+ +### Updating +Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops). + +| `componentWillReceiveProps`*(newProps={})* | Use `setState()` here | +| `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false | +| `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here | +| `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here | +{:.greycode.no-head.lc} + +
+ +### Unmounting +Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount). + +| `componentWillUnmount()` | Invoked before DOM removal | +{:.greycode.no-head.lc} + + + +
+ +### Example: loading data +See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html). + +```js +React.createClass({ + componentDidMount: function () { + $.get(this.props.url, function (data) { + this.setState(data); + }.bind(this)); + }, + + render: function () { + return + } +}); +``` + +## DOM nodes + +### References +Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html). + +```html + +``` +{:.light} + +```js +this.refs.myInput +ReactDOM.findDOMNode(this.refs.myInput).focus() +ReactDOM.findDOMNode(this.refs.myInput).value +``` + +### DOM Events +Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html). + +```html + +``` +{:.light} + +```js +handleChange: function(event) { + this.setState({ value: event.target.value }); +} +``` + +### Two-way binding +Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding. + +```html +Email: +``` +{:.light} + +```js +React.createClass({ + mixins: [React.addons.LinkedStateMixin] +}); +``` + +```js +this.state.email +``` + +## Property validation + +### Basic types +Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation). + +```js +React.createClass({ + propTypes: { + email: React.PropTypes.string, + seats: React.PropTypes.number, + settings: React.PropTypes.object, + callback: React.PropTypes.func, + isClosed: React.PropTypes.bool, + any: React.PropTypes.any, + } +}); +``` + +### Required types +Add `.isRequired`. + +```js +propTypes: { + requiredFunc: React.PropTypes.func.isRequired, + requiredAny: React.PropTypes.any.isRequired, +``` + +### React elements +Use `.element`, `.node`. + +```js +propTypes: { + element: React.PropTypes.element, // react element + node: React.PropTypes.node, // num, string, element + // ...or array of those +``` + +### Enumerables +Use `.oneOf`, `.oneOfType`. + +``` +propTypes: { + enum: React.PropTypes.oneOf(['M','F']), // enum + union: React.PropTypes.oneOfType([ // any + React.PropTypes.string, + React.PropTypes.number ]), +``` + +### Arrays and objects +Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`. + +```js +propTypes: { + array: React.PropTypes.array, + arrayOf: React.PropTypes.arrayOf(React.PropTypes.number), + object: React.PropTypes.object, + objectOf: React.PropTypes.objectOf(React.PropTypes.number), + + message: React.PropTypes.instanceOf(Message), + + object2: React.PropTypes.shape({ + color: React.PropTypes.string, + size: React.PropTypes.number + }), +``` + +### Custom validation +Supply your own function. + +```js +propTypes: { + customProp: function(props, propName, componentName) { + if (!/matchme/.test(props[propName])) { + return new Error('Validation failed!'); + } + } +} +``` + +## Other features + +### Class set +Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html). + +```js +var cx = require('classnames'); + +render: function() { + var classes = cx({ + 'message': true, + 'message-important': this.props.isImportant, + 'message-read': this.props.isRead + }); + + return
Great Scott!
; +} +``` + +### Propagating properties +See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html). + +```html + +``` +{:.light} + +```js +var VideoPlayer = React.createClass({ + render: function() { + /* propagates src="..." down to this sub component */ + return ; + } +}); +``` + +### Mixins +See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins. + +```js +var SetIntervalMixin = { + componentWillMount: function() { .. } +} +``` +{:.light} + +```js +var TickTock = React.createClass({ + mixins: [SetIntervalMixin] +} +``` + +## [Top level API](https://facebook.github.io/react/docs/top-level-api.html) + +```js +React.createClass({ ... }) + +React.isValidElement(c) + +ReactDOM.findDOMNode(c) // 0.14+ +ReactDOM.render(, domnode, [callback]) // 0.14+ +ReactDOM.unmountComponentAtNode(domnode) // 0.14+ + +ReactDOMServer.renderToString() // 0.14+ +ReactDOMServer.renderToStaticMarkup() // 0.14+ +``` + +## JSX patterns + +### Style shorthand +See [inline styles](https://facebook.github.io/react/tips/inline-styles.html). + +```js +var style = { backgroundImage: 'url(x.jpg)', height: 10 }; +return
; +``` + +### InnerHTML +See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html). + +```js +function markdownify() { return "

...

"; } +
+``` + +### Lists + +```js +var TodoList = React.createClass({ + render: function() { + function item(itemText) { + return
  • {itemText}
    • ; + }; + return
      {this.props.items.map(item)}
    ; + } +}); +``` + +## See also + +* [Animations](http://facebook.github.io/react/docs/animation.html) +{%endraw%} diff --git a/sketch.md b/sketch.md index 38f4767d1..6239d18b2 100644 --- a/sketch.md +++ b/sketch.md @@ -1,6 +1,7 @@ --- title: Sketch category: Apps +layout: 2017/sheet --- ### Insert @@ -12,7 +13,6 @@ category: Apps | `R` | rect | | `O` | oval | | `U` | rounded | -{:.shortcuts} ### Show @@ -21,7 +21,6 @@ category: Apps | `^P` | pixels | | `^H` | selection handles | | `^R` | rulers | -{:.shortcuts} ### Sidebars @@ -29,7 +28,6 @@ category: Apps | `⌘⌥2` | toggle right (inspector) | | `⌘⌥3` | toggle both | | `⌘.` | presentation | -{:.shortcuts} ### Zoom @@ -37,19 +35,16 @@ category: Apps | `⌘1` | fit to screen | | `⌘2` | fit selection to screen | | `⌘3` | center selection | -{:.shortcuts} ### Arrange | `⌘⌥ up/dn` | forward or backward | | `^⌘⌥ up/dn` | front or back | -{:.shortcuts} ### Distribute | `^⌘H` | horizontal | | `^⌘V` | vertical | -{:.shortcuts} ### Layers @@ -57,7 +52,6 @@ category: Apps | `⌘F` | find | | `⌘G` | group | | `⌘⇧G` | ungroup | -{:.shortcuts} ### Font @@ -65,4 +59,3 @@ category: Apps | `⌘⇧[` | left align | | `⌘⇧\` | center align | | `⌘⇧]` | right align | -{:.shortcuts} From d95efb54c54f2e718f5f8ca4bbd31943dcf4e4c3 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Thu, 24 Aug 2017 06:30:53 +0800 Subject: [PATCH 02/44] Update --- react.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/react.md b/react.md index 540f8cbef..463f1b8c1 100644 --- a/react.md +++ b/react.md @@ -167,14 +167,19 @@ DOM nodes ### References -```html - +```jsx +class MyComponent extends React.Component { + render () { + return
    + this.input = el} /> +
    + } +} ``` ```jsx -this.refs.myInput -ReactDOM.findDOMNode(this.refs.myInput).focus() -ReactDOM.findDOMNode(this.refs.myInput).value +this.input.focus() +this.input.value() ``` Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html). From 016c36bb9682efa6dc633db9e716e44fa06e2473 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Thu, 24 Aug 2017 06:44:14 +0800 Subject: [PATCH 03/44] Update --- react.md | 69 +++++++++++++++++++++++++++++++++----------------------- 1 file changed, 41 insertions(+), 28 deletions(-) diff --git a/react.md b/react.md index 463f1b8c1..f5e8443d2 100644 --- a/react.md +++ b/react.md @@ -42,6 +42,8 @@ function MyComponent ({ name }) { } ``` +Functional components have no state. Also, their `props` are passed as the first parameter to a function. + ### Nesting ```jsx @@ -93,48 +95,59 @@ These are methods available for `Component` instances. See [Component API](http: Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html). -### States & properties +### Properties ```html - -``` - -```jsx -// props - this.props.fullscreen //=> true - -// state - this.setState({ username: 'rstacruz' }); - this.replaceState({ ... }); - this.state.username //=> 'rstacruz' +
    diff --git a/_includes/2017/head.html b/_includes/2017/head.html index 0d58e1998..7655d6230 100644 --- a/_includes/2017/head.html +++ b/_includes/2017/head.html @@ -24,4 +24,3 @@ -
    diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html new file mode 100644 index 000000000..84a2fb4e9 --- /dev/null +++ b/_includes/2017/top-nav.html @@ -0,0 +1,9 @@ +
    + + Rico's cheatsheets + + +
    + {% include social-list.html class="social" page=include.page %} +
    +
    diff --git a/_layouts/2017/sheet.html b/_layouts/2017/sheet.html index d380dd050..3ded09b34 100644 --- a/_layouts/2017/sheet.html +++ b/_layouts/2017/sheet.html @@ -2,15 +2,22 @@ type: article --- {% include 2017/head.html %} -
    -

    {{ page.title }} cheatsheet

    - {% if page.ads %} -
    - -
    - {% endif %} -
    -
    - {{ content }} + +{% include 2017/top-nav.html page=page %} + +
    +
    +

    {{ page.title }} cheatsheet

    + {% if page.ads %} +
    + +
    + {% endif %} +
    + +
    + {{ content }} +
    + {% include 2017/foot.html %} diff --git a/_sass/2017/base/base.scss b/_sass/2017/base/base.scss index 2c7c8c752..86ac7403c 100644 --- a/_sass/2017/base/base.scss +++ b/_sass/2017/base/base.scss @@ -12,19 +12,8 @@ html, body { body { @include font-size(0); - padding: 8px; - margin: 0 auto; -} - -/* - * Layout - */ - -@media (min-width: 481px) { - body { - padding: 16px; - max-width: $column * 3 + 32px; - } + padding: 0; + margin: 0; } /* diff --git a/_sass/2017/components/body-area.scss b/_sass/2017/components/body-area.scss new file mode 100644 index 000000000..d17f6e604 --- /dev/null +++ b/_sass/2017/components/body-area.scss @@ -0,0 +1,9 @@ +.body-area { + max-width: $column * 3 + 32px; + margin: 0 auto; + padding: 8px; + + @media (min-width: 481px) { + padding: 16px; + } +} diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss new file mode 100644 index 000000000..6fe0a1cd4 --- /dev/null +++ b/_sass/2017/components/top-nav.scss @@ -0,0 +1,31 @@ +.top-nav { + & { + border-bottom: solid 1px $dark-line-color; + height: 48px; + line-height: 48px; + text-align: center; + } + + & > .brand { + @include font-size(-1); + display: block; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.05em; + text-decoration: none; + + &, + &:visited { + color: $text-color; + } + + &:hover { + color: $baseA; + } + } + + & > .actions > .social { + // TODO + display: none; + } +} diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 8034c8987..6c12e6ad6 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -75,8 +75,10 @@ $modularscale: ( @import './markdown/code'; @import './markdown/headings'; @import './markdown/table'; +@import './components/body-area'; @import './components/h2-section'; @import './components/h3-section'; @import './components/h3-section-list'; @import './components/headline-ad'; @import './components/main-heading'; +@import './components/top-nav'; From 4d7af5d276c4c7b09f54624b4fcbab76341f8174 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Fri, 25 Aug 2017 16:10:51 +0800 Subject: [PATCH 28/44] Update --- Readme.md | 4 ++++ _sass/2017/components/main-heading.scss | 2 ++ _sass/2017/markdown/code.scss | 4 ++++ _sass/2017/utils/heading-style.scss | 2 +- react.md | 13 +++++++++---- sh.md | 1 + 6 files changed, 21 insertions(+), 5 deletions(-) diff --git a/Readme.md b/Readme.md index e1d24cffa..291d5f1f3 100644 --- a/Readme.md +++ b/Readme.md @@ -18,6 +18,10 @@ Tables support these: {: .-shortcuts} +Pre's support these: + + {: .-setup} + Each sheet supports these metadata: ```yml diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss index 388199ca7..522ac0cb3 100644 --- a/_sass/2017/components/main-heading.scss +++ b/_sass/2017/components/main-heading.scss @@ -28,6 +28,7 @@ display: flex; } + // Desktop @media (min-width: 541px) { & { align-items: flex-end; // bottom alighn @@ -40,6 +41,7 @@ // Advertisement & > .ad { flex: 0 1 auto; + margin-bottom: 16px; } } diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss index dd1fdd596..746d221c2 100644 --- a/_sass/2017/markdown/code.scss +++ b/_sass/2017/markdown/code.scss @@ -49,6 +49,10 @@ } } +.MarkdownBody pre.-setup { + background: $gray-bg; +} + /* * Syntax kighlight */ diff --git a/_sass/2017/utils/heading-style.scss b/_sass/2017/utils/heading-style.scss index 0eb70826c..b557d1c79 100644 --- a/_sass/2017/utils/heading-style.scss +++ b/_sass/2017/utils/heading-style.scss @@ -4,7 +4,7 @@ margin-bottom: 16px; padding-bottom: 16px; margin-top: 64px; - border-bottom: solid 1px $line-color; + border-bottom: solid 1px $dark-line-color; @media (max-width: 768px) { margin: $gutter / 2; diff --git a/react.md b/react.md index 845021110..7ef41f633 100644 --- a/react.md +++ b/react.md @@ -18,6 +18,7 @@ Components import React from 'react' import ReactDOM from 'react-dom' ``` +{: .-setup} ```jsx class Hello extends React.Component { @@ -41,6 +42,7 @@ Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hack ```html
    } + + componentDidMount () { + this.input.focus() + } } ``` -{: data-line="4"} - -```jsx -this.input.focus() -this.input.value() -``` +{: data-line="4,9"} Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/react/docs/refs-and-the-dom.html) ### DOM Events +```jsx +class MyComponent extends React.Component { + render () { + this.onChange(event)} /> + } + + onChange (event) { + this.setState({ value: event.target.vlaue }) + } +} +``` +{: data-line="5,9"} + +Pass functions to attributes like `onChange`. See: [Events](https://facebook.github.io/react/docs/events.html) + +## Other features + +### Transfering props + ```html - + +``` +{: .-setup} + +```jsx +class VideoPlayer extends React.Component { + render () { + return + } +} ``` {: data-line="3"} +Propagates `src="..."` down to the sub-component. +See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html). + +### Top-level API + ```jsx -handleChange: function(event) { - this.setState({ value: event.target.value }); -} +React.createClass({ ... }) +React.isValidElement(c) ``` -Add attributes like `onChange`. See: [Events](https://facebook.github.io/react/docs/events.html) +```jsx +ReactDOM.render(, domnode, [callback]) +ReactDOM.unmountComponentAtNode(domnode) +``` + +```jsx +ReactDOMServer.renderToString() +ReactDOMServer.renderToStaticMarkup() +``` + +JSX patterns +------------ +{: .-two-column} + +### Style shorthand + +```jsx +var style = { height: 10 } +return
    +``` + +```jsx +return
    +``` + +See: [Inline styles](https://facebook.github.io/react/tips/inline-styles.html) + +### Inner HTML + +```jsx +function markdownify() { return "

    ...

    "; } +
    +``` + +See: [Dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html) + +### Lists + +```jsx +class TodoList extends React.Component { + render () { + const { items } = this.props + + return
      + {items.map(item => + )} +
    + } +} +``` +{: data-line="6,7"} + +Always supply a `key` property. + +### Conditionals + +```jsx +
    + {showPopup + ? + : null} +
    +``` Property validation ------------------- @@ -351,100 +444,8 @@ MyCo.propTypes = { } ``` -## Other features - -### Transfering props - -```html - -``` -{: .-setup} - -```jsx -class VideoPlayer extends React.Component { - render () { - return - } -} -``` -{: data-line="3"} - -Propagates `src="..."` down to the sub-component. -See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html). - -### Top-level API - -```jsx -React.createClass({ ... }) -React.isValidElement(c) -``` - -```jsx -ReactDOM.render(, domnode, [callback]) -ReactDOM.unmountComponentAtNode(domnode) -``` - -```jsx -ReactDOMServer.renderToString() -ReactDOMServer.renderToStaticMarkup() -``` - -JSX patterns ------------- -{: .-two-column} - -### Style shorthand - -```jsx -var style = { height: 10 } -return
    -``` - -```jsx -return
    -``` - -See: [Inline styles](https://facebook.github.io/react/tips/inline-styles.html) - -### Inner HTML - -```jsx -function markdownify() { return "

    ...

    "; } -
    -``` - -See: [Dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html) - -### Lists - -```jsx -class TodoList extends React.Component { - render () { - const { items } = this.props - - return
      - {items.map(item => - )} -
    - } -} -``` -{: data-line="6-7"} - -Always supply a `key` property. - -### Conditionals - -```jsx -
    - {showPopup - ? - : null} -
    -``` - Examples -------- +-------- {: .-left-reference} ### Basic example From d3ee57fc72b0a22ef843c9811986b27abc29e190 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 11:29:12 +0800 Subject: [PATCH 36/44] Add some buttons --- _includes/2017/top-nav.html | 19 +- _includes/social-list.html | 2 +- _sass/2017/components/top-nav.scss | 81 +- _sass/2017/style.scss | 5 +- _sass/vendor/iconfonts/ionicons@3.scss | 1048 +++++++++++++++++ .../{ => modularscale}/_modularscale.scss | 0 6 files changed, 1145 insertions(+), 10 deletions(-) create mode 100644 _sass/vendor/iconfonts/ionicons@3.scss rename _sass/vendor/{ => modularscale}/_modularscale.scss (100%) diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html index 84a2fb4e9..00f3353f2 100644 --- a/_includes/2017/top-nav.html +++ b/_includes/2017/top-nav.html @@ -1,9 +1,18 @@
    - - Rico's cheatsheets - +
    + + Rico's cheatsheets + -
    - {% include social-list.html class="social" page=include.page %} +
    + {% include social-list.html class="social page-actions" page=include.page %} + +
    diff --git a/_includes/social-list.html b/_includes/social-list.html index 87d45cb3e..d441f6167 100644 --- a/_includes/social-list.html +++ b/_includes/social-list.html @@ -2,5 +2,5 @@ diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss index 6ced8e7bc..faad14bd2 100644 --- a/_sass/2017/components/top-nav.scss +++ b/_sass/2017/components/top-nav.scss @@ -6,9 +6,32 @@ text-align: center; } + >.container { + @include gutter(padding-left); + @include gutter(padding-right); + max-width: 1200px; + margin: 0 auto; + } +} + +.top-nav > .container { + & { + display: flex; + align-items: center; + } + + & > .brand { + flex: 1 1 auto; + } + + & > .actions { + flex: 0 0 auto; + display: flex; + } + & > .brand { @include font-size(-1); - display: block; + display: inline-block; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; @@ -25,7 +48,59 @@ } & > .actions > .social { - // TODO - display: none; + } +} + +@mixin action-bar { + & { + height: 32px; + } + + &, + & > li { + margin: 0; + padding: 0; + list-style-type: none; + } + + & > li > a, + & > li > a:visited { + color: $base-mute; + text-decoration: none; + } + + & > li > a::before { + font-size: 16px; + height: 32px; + width: 32px; + line-height: 32px; + text-align: center; + } + + & > li > a > .text { + display: none; + } + + & > li > a > .text.-visible { + display: inline-block; + padding-left: 8px; + } +} + +.page-actions { + & { + @include action-bar; + } + + & > .facebook > a::before { + @include ion-icon('logo-facebook'); + } + + & > .twitter > a::before { + @include ion-icon('logo-twitter'); + } + + & > .github > a::before { + @include ion-icon('logo-github'); } } diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index de2be13c6..23e154367 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -1,8 +1,11 @@ +@import url('https://unpkg.com/hint.css@2.5.0/hint.min.css'); @import './variables'; -@import '../vendor/modularscale'; +@import '../vendor/modularscale/modularscale'; +@import '../vendor/iconfonts/ionicons@3'; @import './utils/font-size'; @import './utils/gutter'; @import './utils/heading-style'; +@include ion-font; @import './base/base'; @import './markdown/code'; @import './markdown/headings'; diff --git a/_sass/vendor/iconfonts/ionicons@3.scss b/_sass/vendor/iconfonts/ionicons@3.scss new file mode 100644 index 000000000..ed2c1cbd1 --- /dev/null +++ b/_sass/vendor/iconfonts/ionicons@3.scss @@ -0,0 +1,1048 @@ +// Ionicons v3.0.0 +// http://ionicons.com +// +// Sass integration via https://github.com/rstacruz/iconfonts. +// Usage: +// +// @include ion-font; +// .button:before { +// @include ion-icon("arrow"); +// @include ion-icon("arrow", 14px, #333); +// } +// +// Output: +// +// @font-face { +// font-family: "Ionicons"; ... +// } +// .button:before { +// font-family: "Ionicons"; +// content: '\f0123'; +// } +// +// Icon files: +// +// https://unpkg.com/ionicons@3.0.0/dist/fonts/ionicons.eot +// https://unpkg.com/ionicons@3.0.0/dist/fonts/ionicons.ttf +// https://unpkg.com/ionicons@3.0.0/dist/fonts/ionicons.woff +// https://unpkg.com/ionicons@3.0.0/dist/fonts/ionicons.svg + +$ion-path: "https://unpkg.com/ionicons@3.0.0/dist/fonts/" !default; +$ion-name: "Ionicons" !default; +$ion-site: "http://ionicons.com" !default; +$ion-basename: "ionicons" !default; +$ion-version: "3.0.0" !default; +$ion-svghash: "#Ionicons" !default; +$ion-nativesize: "32px" !default; + +// Embeds the @font-face. +@mixin ion-font { + @font-face { + font-family: $ion-name; + src: url($ion-path + $ion-basename + ".eot?v=" + $ion-version); + src: url($ion-path + $ion-basename + ".eot?#iefix&v=" + $ion-version) format("embedded-opentype"), + url($ion-path + $ion-basename + ".woff?v=" + $ion-version) format("woff"), + url($ion-path + $ion-basename + ".ttf?v=" + $ion-version) format("truetype"), + url($ion-path + $ion-basename + ".svg?v=" + $ion-version + $ion-svghash) format("svg"); + font-weight: normal; + font-style: normal; + } +} + +// Embeds the @font-face. Use this if you're using `sass-rails`. +@mixin ion-font-rails($prefix: "") { + @font-face { + font-family: $ion-name; + src: font-url($prefix + $ion-basename + ".eot"); + src: font-url($prefix + $ion-basename + ".eot#iefix") format("embedded-opentype"), + font-url($prefix + $ion-basename + ".woff") format("woff"), + font-url($prefix + $ion-basename + ".ttf") format("truetype"), + font-url($prefix + $ion-basename + ".svg" + $ion-svghash) format("svg"); + font-weight: normal; + font-style: normal; + } +} + +// Uses a given icon. +// +// .button:before +// +ion-icon(music) +// +ion-icon(music, 24px) /* 24px size */ +// +// You may specify a color. +// +// .button:before +// +ion-icon(music, $color: #333) +// +// You may also specify a `$top` value to compensate for any mis-alignment. +// This nudges the icon by that many pixels from the top. +// +// .button:before +// +ion-icon(music, $top: 2px) + +@mixin ion-icon($type, $size: auto, $color: auto, $top: auto, $left: auto, $shadow: none) { + @extend %ion-icon; + @extend %ion-icon-#{$type}; + + @if $size != auto { + font-size: $size; } + @if $top != auto { + position: relative; + top: $top; } + @if $left != auto { + position: relative; + left: $left; } + @if $color != auto { + color: $color; } + @if $shadow != none { + text-shadow: $shadow; } +} + +%ion-icon { + line-height: 1em; + font-family: $ion-name; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: none; + vertical-align: middle; + text-rendering: optimizeLegibility !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale; +} + +%ion-icon-ios-add { content: "\f102"; } +%ion-icon-ios-add-circle { content: "\f101"; } +%ion-icon-ios-add-circle-outline { content: "\f100"; } +%ion-icon-ios-add-outline { content: "\f102"; } +%ion-icon-ios-alarm { content: "\f3c8"; } +%ion-icon-ios-alarm-outline { content: "\f3c7"; } +%ion-icon-ios-albums { content: "\f3ca"; } +%ion-icon-ios-albums-outline { content: "\f3c9"; } +%ion-icon-ios-alert { content: "\f104"; } +%ion-icon-ios-alert-outline { content: "\f103"; } +%ion-icon-ios-american-football { content: "\f106"; } +%ion-icon-ios-american-football-outline { content: "\f105"; } +%ion-icon-ios-analytics { content: "\f3ce"; } +%ion-icon-ios-analytics-outline { content: "\f3cd"; } +%ion-icon-ios-aperture { content: "\f108"; } +%ion-icon-ios-aperture-outline { content: "\f107"; } +%ion-icon-ios-apps { content: "\f10a"; } +%ion-icon-ios-apps-outline { content: "\f109"; } +%ion-icon-ios-appstore { content: "\f10c"; } +%ion-icon-ios-appstore-outline { content: "\f10b"; } +%ion-icon-ios-archive { content: "\f10e"; } +%ion-icon-ios-archive-outline { content: "\f10d"; } +%ion-icon-ios-arrow-back { content: "\f3cf"; } +%ion-icon-ios-arrow-back-outline { content: "\f3cf"; } +%ion-icon-ios-arrow-down { content: "\f3d0"; } +%ion-icon-ios-arrow-down-outline { content: "\f3d0"; } +%ion-icon-ios-arrow-dropdown { content: "\f110"; } +%ion-icon-ios-arrow-dropdown-circle { content: "\f10f"; } +%ion-icon-ios-arrow-dropdown-circle-outline { content: "\f10f"; } +%ion-icon-ios-arrow-dropdown-outline { content: "\f110"; } +%ion-icon-ios-arrow-dropleft { content: "\f112"; } +%ion-icon-ios-arrow-dropleft-circle { content: "\f111"; } +%ion-icon-ios-arrow-dropleft-circle-outline { content: "\f111"; } +%ion-icon-ios-arrow-dropleft-outline { content: "\f112"; } +%ion-icon-ios-arrow-dropright { content: "\f114"; } +%ion-icon-ios-arrow-dropright-circle { content: "\f113"; } +%ion-icon-ios-arrow-dropright-circle-outline { content: "\f113"; } +%ion-icon-ios-arrow-dropright-outline { content: "\f114"; } +%ion-icon-ios-arrow-dropup { content: "\f116"; } +%ion-icon-ios-arrow-dropup-circle { content: "\f115"; } +%ion-icon-ios-arrow-dropup-circle-outline { content: "\f115"; } +%ion-icon-ios-arrow-dropup-outline { content: "\f116"; } +%ion-icon-ios-arrow-forward { content: "\f3d1"; } +%ion-icon-ios-arrow-forward-outline { content: "\f3d1"; } +%ion-icon-ios-arrow-round-back { content: "\f117"; } +%ion-icon-ios-arrow-round-back-outline { content: "\f117"; } +%ion-icon-ios-arrow-round-down { content: "\f118"; } +%ion-icon-ios-arrow-round-down-outline { content: "\f118"; } +%ion-icon-ios-arrow-round-forward { content: "\f119"; } +%ion-icon-ios-arrow-round-forward-outline { content: "\f119"; } +%ion-icon-ios-arrow-round-up { content: "\f11a"; } +%ion-icon-ios-arrow-round-up-outline { content: "\f11a"; } +%ion-icon-ios-arrow-up { content: "\f3d8"; } +%ion-icon-ios-arrow-up-outline { content: "\f3d8"; } +%ion-icon-ios-at { content: "\f3da"; } +%ion-icon-ios-at-outline { content: "\f3d9"; } +%ion-icon-ios-attach { content: "\f11b"; } +%ion-icon-ios-attach-outline { content: "\f11b"; } +%ion-icon-ios-backspace { content: "\f11d"; } +%ion-icon-ios-backspace-outline { content: "\f11c"; } +%ion-icon-ios-barcode { content: "\f3dc"; } +%ion-icon-ios-barcode-outline { content: "\f3db"; } +%ion-icon-ios-baseball { content: "\f3de"; } +%ion-icon-ios-baseball-outline { content: "\f3dd"; } +%ion-icon-ios-basket { content: "\f11f"; } +%ion-icon-ios-basket-outline { content: "\f11e"; } +%ion-icon-ios-basketball { content: "\f3e0"; } +%ion-icon-ios-basketball-outline { content: "\f3df"; } +%ion-icon-ios-battery-charging { content: "\f120"; } +%ion-icon-ios-battery-charging-outline { content: "\f120"; } +%ion-icon-ios-battery-dead { content: "\f121"; } +%ion-icon-ios-battery-dead-outline { content: "\f121"; } +%ion-icon-ios-battery-full { content: "\f122"; } +%ion-icon-ios-battery-full-outline { content: "\f122"; } +%ion-icon-ios-beaker { content: "\f124"; } +%ion-icon-ios-beaker-outline { content: "\f123"; } +%ion-icon-ios-beer { content: "\f126"; } +%ion-icon-ios-beer-outline { content: "\f125"; } +%ion-icon-ios-bicycle { content: "\f127"; } +%ion-icon-ios-bicycle-outline { content: "\f127"; } +%ion-icon-ios-bluetooth { content: "\f128"; } +%ion-icon-ios-bluetooth-outline { content: "\f128"; } +%ion-icon-ios-boat { content: "\f12a"; } +%ion-icon-ios-boat-outline { content: "\f129"; } +%ion-icon-ios-body { content: "\f3e4"; } +%ion-icon-ios-body-outline { content: "\f3e3"; } +%ion-icon-ios-bonfire { content: "\f12c"; } +%ion-icon-ios-bonfire-outline { content: "\f12b"; } +%ion-icon-ios-book { content: "\f3e8"; } +%ion-icon-ios-book-outline { content: "\f3e7"; } +%ion-icon-ios-bookmark { content: "\f12e"; } +%ion-icon-ios-bookmark-outline { content: "\f12d"; } +%ion-icon-ios-bookmarks { content: "\f3ea"; } +%ion-icon-ios-bookmarks-outline { content: "\f3e9"; } +%ion-icon-ios-bowtie { content: "\f130"; } +%ion-icon-ios-bowtie-outline { content: "\f12f"; } +%ion-icon-ios-briefcase { content: "\f3ee"; } +%ion-icon-ios-briefcase-outline { content: "\f3ed"; } +%ion-icon-ios-browsers { content: "\f3f0"; } +%ion-icon-ios-browsers-outline { content: "\f3ef"; } +%ion-icon-ios-brush { content: "\f132"; } +%ion-icon-ios-brush-outline { content: "\f131"; } +%ion-icon-ios-bug { content: "\f134"; } +%ion-icon-ios-bug-outline { content: "\f133"; } +%ion-icon-ios-build { content: "\f136"; } +%ion-icon-ios-build-outline { content: "\f135"; } +%ion-icon-ios-bulb { content: "\f138"; } +%ion-icon-ios-bulb-outline { content: "\f137"; } +%ion-icon-ios-bus { content: "\f13a"; } +%ion-icon-ios-bus-outline { content: "\f139"; } +%ion-icon-ios-cafe { content: "\f13c"; } +%ion-icon-ios-cafe-outline { content: "\f13b"; } +%ion-icon-ios-calculator { content: "\f3f2"; } +%ion-icon-ios-calculator-outline { content: "\f3f1"; } +%ion-icon-ios-calendar { content: "\f3f4"; } +%ion-icon-ios-calendar-outline { content: "\f3f3"; } +%ion-icon-ios-call { content: "\f13e"; } +%ion-icon-ios-call-outline { content: "\f13d"; } +%ion-icon-ios-camera { content: "\f3f6"; } +%ion-icon-ios-camera-outline { content: "\f3f5"; } +%ion-icon-ios-car { content: "\f140"; } +%ion-icon-ios-car-outline { content: "\f13f"; } +%ion-icon-ios-card { content: "\f142"; } +%ion-icon-ios-card-outline { content: "\f141"; } +%ion-icon-ios-cart { content: "\f3f8"; } +%ion-icon-ios-cart-outline { content: "\f3f7"; } +%ion-icon-ios-cash { content: "\f144"; } +%ion-icon-ios-cash-outline { content: "\f143"; } +%ion-icon-ios-chatboxes { content: "\f3fa"; } +%ion-icon-ios-chatboxes-outline { content: "\f3f9"; } +%ion-icon-ios-chatbubbles { content: "\f146"; } +%ion-icon-ios-chatbubbles-outline { content: "\f145"; } +%ion-icon-ios-checkbox { content: "\f148"; } +%ion-icon-ios-checkbox-outline { content: "\f147"; } +%ion-icon-ios-checkmark { content: "\f3ff"; } +%ion-icon-ios-checkmark-circle { content: "\f14a"; } +%ion-icon-ios-checkmark-circle-outline { content: "\f149"; } +%ion-icon-ios-checkmark-outline { content: "\f3ff"; } +%ion-icon-ios-clipboard { content: "\f14c"; } +%ion-icon-ios-clipboard-outline { content: "\f14b"; } +%ion-icon-ios-clock { content: "\f403"; } +%ion-icon-ios-clock-outline { content: "\f402"; } +%ion-icon-ios-close { content: "\f406"; } +%ion-icon-ios-close-circle { content: "\f14e"; } +%ion-icon-ios-close-circle-outline { content: "\f14d"; } +%ion-icon-ios-close-outline { content: "\f406"; } +%ion-icon-ios-closed-captioning { content: "\f150"; } +%ion-icon-ios-closed-captioning-outline { content: "\f14f"; } +%ion-icon-ios-cloud { content: "\f40c"; } +%ion-icon-ios-cloud-circle { content: "\f152"; } +%ion-icon-ios-cloud-circle-outline { content: "\f151"; } +%ion-icon-ios-cloud-done { content: "\f154"; } +%ion-icon-ios-cloud-done-outline { content: "\f153"; } +%ion-icon-ios-cloud-download { content: "\f408"; } +%ion-icon-ios-cloud-download-outline { content: "\f407"; } +%ion-icon-ios-cloud-outline { content: "\f409"; } +%ion-icon-ios-cloud-upload { content: "\f40b"; } +%ion-icon-ios-cloud-upload-outline { content: "\f40a"; } +%ion-icon-ios-cloudy { content: "\f410"; } +%ion-icon-ios-cloudy-night { content: "\f40e"; } +%ion-icon-ios-cloudy-night-outline { content: "\f40d"; } +%ion-icon-ios-cloudy-outline { content: "\f40f"; } +%ion-icon-ios-code { content: "\f157"; } +%ion-icon-ios-code-download { content: "\f155"; } +%ion-icon-ios-code-download-outline { content: "\f155"; } +%ion-icon-ios-code-outline { content: "\f157"; } +%ion-icon-ios-code-working { content: "\f156"; } +%ion-icon-ios-code-working-outline { content: "\f156"; } +%ion-icon-ios-cog { content: "\f412"; } +%ion-icon-ios-cog-outline { content: "\f411"; } +%ion-icon-ios-color-fill { content: "\f159"; } +%ion-icon-ios-color-fill-outline { content: "\f158"; } +%ion-icon-ios-color-filter { content: "\f414"; } +%ion-icon-ios-color-filter-outline { content: "\f413"; } +%ion-icon-ios-color-palette { content: "\f15b"; } +%ion-icon-ios-color-palette-outline { content: "\f15a"; } +%ion-icon-ios-color-wand { content: "\f416"; } +%ion-icon-ios-color-wand-outline { content: "\f415"; } +%ion-icon-ios-compass { content: "\f15d"; } +%ion-icon-ios-compass-outline { content: "\f15c"; } +%ion-icon-ios-construct { content: "\f15f"; } +%ion-icon-ios-construct-outline { content: "\f15e"; } +%ion-icon-ios-contact { content: "\f41a"; } +%ion-icon-ios-contact-outline { content: "\f419"; } +%ion-icon-ios-contacts { content: "\f161"; } +%ion-icon-ios-contacts-outline { content: "\f160"; } +%ion-icon-ios-contract { content: "\f162"; } +%ion-icon-ios-contract-outline { content: "\f162"; } +%ion-icon-ios-contrast { content: "\f163"; } +%ion-icon-ios-contrast-outline { content: "\f163"; } +%ion-icon-ios-copy { content: "\f41c"; } +%ion-icon-ios-copy-outline { content: "\f41b"; } +%ion-icon-ios-create { content: "\f165"; } +%ion-icon-ios-create-outline { content: "\f164"; } +%ion-icon-ios-crop { content: "\f41e"; } +%ion-icon-ios-crop-outline { content: "\f166"; } +%ion-icon-ios-cube { content: "\f168"; } +%ion-icon-ios-cube-outline { content: "\f167"; } +%ion-icon-ios-cut { content: "\f16a"; } +%ion-icon-ios-cut-outline { content: "\f169"; } +%ion-icon-ios-desktop { content: "\f16c"; } +%ion-icon-ios-desktop-outline { content: "\f16b"; } +%ion-icon-ios-disc { content: "\f16e"; } +%ion-icon-ios-disc-outline { content: "\f16d"; } +%ion-icon-ios-document { content: "\f170"; } +%ion-icon-ios-document-outline { content: "\f16f"; } +%ion-icon-ios-done-all { content: "\f171"; } +%ion-icon-ios-done-all-outline { content: "\f171"; } +%ion-icon-ios-download { content: "\f420"; } +%ion-icon-ios-download-outline { content: "\f41f"; } +%ion-icon-ios-easel { content: "\f173"; } +%ion-icon-ios-easel-outline { content: "\f172"; } +%ion-icon-ios-egg { content: "\f175"; } +%ion-icon-ios-egg-outline { content: "\f174"; } +%ion-icon-ios-exit { content: "\f177"; } +%ion-icon-ios-exit-outline { content: "\f176"; } +%ion-icon-ios-expand { content: "\f178"; } +%ion-icon-ios-expand-outline { content: "\f178"; } +%ion-icon-ios-eye { content: "\f425"; } +%ion-icon-ios-eye-off { content: "\f17a"; } +%ion-icon-ios-eye-off-outline { content: "\f179"; } +%ion-icon-ios-eye-outline { content: "\f424"; } +%ion-icon-ios-fastforward { content: "\f427"; } +%ion-icon-ios-fastforward-outline { content: "\f426"; } +%ion-icon-ios-female { content: "\f17b"; } +%ion-icon-ios-female-outline { content: "\f17b"; } +%ion-icon-ios-filing { content: "\f429"; } +%ion-icon-ios-filing-outline { content: "\f428"; } +%ion-icon-ios-film { content: "\f42b"; } +%ion-icon-ios-film-outline { content: "\f42a"; } +%ion-icon-ios-finger-print { content: "\f17c"; } +%ion-icon-ios-finger-print-outline { content: "\f17c"; } +%ion-icon-ios-flag { content: "\f42d"; } +%ion-icon-ios-flag-outline { content: "\f42c"; } +%ion-icon-ios-flame { content: "\f42f"; } +%ion-icon-ios-flame-outline { content: "\f42e"; } +%ion-icon-ios-flash { content: "\f17e"; } +%ion-icon-ios-flash-outline { content: "\f17d"; } +%ion-icon-ios-flask { content: "\f431"; } +%ion-icon-ios-flask-outline { content: "\f430"; } +%ion-icon-ios-flower { content: "\f433"; } +%ion-icon-ios-flower-outline { content: "\f432"; } +%ion-icon-ios-folder { content: "\f435"; } +%ion-icon-ios-folder-open { content: "\f180"; } +%ion-icon-ios-folder-open-outline { content: "\f17f"; } +%ion-icon-ios-folder-outline { content: "\f434"; } +%ion-icon-ios-football { content: "\f437"; } +%ion-icon-ios-football-outline { content: "\f436"; } +%ion-icon-ios-funnel { content: "\f182"; } +%ion-icon-ios-funnel-outline { content: "\f181"; } +%ion-icon-ios-game-controller-a { content: "\f439"; } +%ion-icon-ios-game-controller-a-outline { content: "\f438"; } +%ion-icon-ios-game-controller-b { content: "\f43b"; } +%ion-icon-ios-game-controller-b-outline { content: "\f43a"; } +%ion-icon-ios-git-branch { content: "\f183"; } +%ion-icon-ios-git-branch-outline { content: "\f183"; } +%ion-icon-ios-git-commit { content: "\f184"; } +%ion-icon-ios-git-commit-outline { content: "\f184"; } +%ion-icon-ios-git-compare { content: "\f185"; } +%ion-icon-ios-git-compare-outline { content: "\f185"; } +%ion-icon-ios-git-merge { content: "\f186"; } +%ion-icon-ios-git-merge-outline { content: "\f186"; } +%ion-icon-ios-git-network { content: "\f187"; } +%ion-icon-ios-git-network-outline { content: "\f187"; } +%ion-icon-ios-git-pull-request { content: "\f188"; } +%ion-icon-ios-git-pull-request-outline { content: "\f188"; } +%ion-icon-ios-glasses { content: "\f43f"; } +%ion-icon-ios-glasses-outline { content: "\f43e"; } +%ion-icon-ios-globe { content: "\f18a"; } +%ion-icon-ios-globe-outline { content: "\f189"; } +%ion-icon-ios-grid { content: "\f18c"; } +%ion-icon-ios-grid-outline { content: "\f18b"; } +%ion-icon-ios-hammer { content: "\f18e"; } +%ion-icon-ios-hammer-outline { content: "\f18d"; } +%ion-icon-ios-hand { content: "\f190"; } +%ion-icon-ios-hand-outline { content: "\f18f"; } +%ion-icon-ios-happy { content: "\f192"; } +%ion-icon-ios-happy-outline { content: "\f191"; } +%ion-icon-ios-headset { content: "\f194"; } +%ion-icon-ios-headset-outline { content: "\f193"; } +%ion-icon-ios-heart { content: "\f443"; } +%ion-icon-ios-heart-outline { content: "\f442"; } +%ion-icon-ios-help { content: "\f446"; } +%ion-icon-ios-help-buoy { content: "\f196"; } +%ion-icon-ios-help-buoy-outline { content: "\f195"; } +%ion-icon-ios-help-circle { content: "\f198"; } +%ion-icon-ios-help-circle-outline { content: "\f197"; } +%ion-icon-ios-help-outline { content: "\f446"; } +%ion-icon-ios-home { content: "\f448"; } +%ion-icon-ios-home-outline { content: "\f447"; } +%ion-icon-ios-ice-cream { content: "\f19a"; } +%ion-icon-ios-ice-cream-outline { content: "\f199"; } +%ion-icon-ios-image { content: "\f19c"; } +%ion-icon-ios-image-outline { content: "\f19b"; } +%ion-icon-ios-images { content: "\f19e"; } +%ion-icon-ios-images-outline { content: "\f19d"; } +%ion-icon-ios-infinite { content: "\f44a"; } +%ion-icon-ios-infinite-outline { content: "\f449"; } +%ion-icon-ios-information { content: "\f44d"; } +%ion-icon-ios-information-circle { content: "\f1a0"; } +%ion-icon-ios-information-circle-outline { content: "\f19f"; } +%ion-icon-ios-information-outline { content: "\f44d"; } +%ion-icon-ios-ionic { content: "\f1a1"; } +%ion-icon-ios-ionic-outline { content: "\f44e"; } +%ion-icon-ios-ionitron { content: "\f1a3"; } +%ion-icon-ios-ionitron-outline { content: "\f1a2"; } +%ion-icon-ios-jet { content: "\f1a5"; } +%ion-icon-ios-jet-outline { content: "\f1a4"; } +%ion-icon-ios-key { content: "\f1a7"; } +%ion-icon-ios-key-outline { content: "\f1a6"; } +%ion-icon-ios-keypad { content: "\f450"; } +%ion-icon-ios-keypad-outline { content: "\f44f"; } +%ion-icon-ios-laptop { content: "\f1a8"; } +%ion-icon-ios-laptop-outline { content: "\f1a8"; } +%ion-icon-ios-leaf { content: "\f1aa"; } +%ion-icon-ios-leaf-outline { content: "\f1a9"; } +%ion-icon-ios-link { content: "\f22a"; } +%ion-icon-ios-link-outline { content: "\f1ca"; } +%ion-icon-ios-list { content: "\f454"; } +%ion-icon-ios-list-box { content: "\f1ac"; } +%ion-icon-ios-list-box-outline { content: "\f1ab"; } +%ion-icon-ios-list-outline { content: "\f454"; } +%ion-icon-ios-locate { content: "\f1ae"; } +%ion-icon-ios-locate-outline { content: "\f1ad"; } +%ion-icon-ios-lock { content: "\f1b0"; } +%ion-icon-ios-lock-outline { content: "\f1af"; } +%ion-icon-ios-log-in { content: "\f1b1"; } +%ion-icon-ios-log-in-outline { content: "\f1b1"; } +%ion-icon-ios-log-out { content: "\f1b2"; } +%ion-icon-ios-log-out-outline { content: "\f1b2"; } +%ion-icon-ios-magnet { content: "\f1b4"; } +%ion-icon-ios-magnet-outline { content: "\f1b3"; } +%ion-icon-ios-mail { content: "\f1b8"; } +%ion-icon-ios-mail-open { content: "\f1b6"; } +%ion-icon-ios-mail-open-outline { content: "\f1b5"; } +%ion-icon-ios-mail-outline { content: "\f1b7"; } +%ion-icon-ios-male { content: "\f1b9"; } +%ion-icon-ios-male-outline { content: "\f1b9"; } +%ion-icon-ios-man { content: "\f1bb"; } +%ion-icon-ios-man-outline { content: "\f1ba"; } +%ion-icon-ios-map { content: "\f1bd"; } +%ion-icon-ios-map-outline { content: "\f1bc"; } +%ion-icon-ios-medal { content: "\f1bf"; } +%ion-icon-ios-medal-outline { content: "\f1be"; } +%ion-icon-ios-medical { content: "\f45c"; } +%ion-icon-ios-medical-outline { content: "\f45b"; } +%ion-icon-ios-medkit { content: "\f45e"; } +%ion-icon-ios-medkit-outline { content: "\f45d"; } +%ion-icon-ios-megaphone { content: "\f1c1"; } +%ion-icon-ios-megaphone-outline { content: "\f1c0"; } +%ion-icon-ios-menu { content: "\f1c3"; } +%ion-icon-ios-menu-outline { content: "\f1c2"; } +%ion-icon-ios-mic { content: "\f461"; } +%ion-icon-ios-mic-off { content: "\f45f"; } +%ion-icon-ios-mic-off-outline { content: "\f1c4"; } +%ion-icon-ios-mic-outline { content: "\f460"; } +%ion-icon-ios-microphone { content: "\f1c6"; } +%ion-icon-ios-microphone-outline { content: "\f1c5"; } +%ion-icon-ios-moon { content: "\f468"; } +%ion-icon-ios-moon-outline { content: "\f467"; } +%ion-icon-ios-more { content: "\f1c8"; } +%ion-icon-ios-more-outline { content: "\f1c7"; } +%ion-icon-ios-move { content: "\f1cb"; } +%ion-icon-ios-move-outline { content: "\f1cb"; } +%ion-icon-ios-musical-note { content: "\f46b"; } +%ion-icon-ios-musical-note-outline { content: "\f1cc"; } +%ion-icon-ios-musical-notes { content: "\f46c"; } +%ion-icon-ios-musical-notes-outline { content: "\f1cd"; } +%ion-icon-ios-navigate { content: "\f46e"; } +%ion-icon-ios-navigate-outline { content: "\f46d"; } +%ion-icon-ios-no-smoking { content: "\f1cf"; } +%ion-icon-ios-no-smoking-outline { content: "\f1ce"; } +%ion-icon-ios-notifications { content: "\f1d3"; } +%ion-icon-ios-notifications-off { content: "\f1d1"; } +%ion-icon-ios-notifications-off-outline { content: "\f1d0"; } +%ion-icon-ios-notifications-outline { content: "\f1d2"; } +%ion-icon-ios-nuclear { content: "\f1d5"; } +%ion-icon-ios-nuclear-outline { content: "\f1d4"; } +%ion-icon-ios-nutrition { content: "\f470"; } +%ion-icon-ios-nutrition-outline { content: "\f46f"; } +%ion-icon-ios-open { content: "\f1d7"; } +%ion-icon-ios-open-outline { content: "\f1d6"; } +%ion-icon-ios-options { content: "\f1d9"; } +%ion-icon-ios-options-outline { content: "\f1d8"; } +%ion-icon-ios-outlet { content: "\f1db"; } +%ion-icon-ios-outlet-outline { content: "\f1da"; } +%ion-icon-ios-paper { content: "\f472"; } +%ion-icon-ios-paper-outline { content: "\f471"; } +%ion-icon-ios-paper-plane { content: "\f1dd"; } +%ion-icon-ios-paper-plane-outline { content: "\f1dc"; } +%ion-icon-ios-partly-sunny { content: "\f1df"; } +%ion-icon-ios-partly-sunny-outline { content: "\f1de"; } +%ion-icon-ios-pause { content: "\f478"; } +%ion-icon-ios-pause-outline { content: "\f477"; } +%ion-icon-ios-paw { content: "\f47a"; } +%ion-icon-ios-paw-outline { content: "\f479"; } +%ion-icon-ios-people { content: "\f47c"; } +%ion-icon-ios-people-outline { content: "\f47b"; } +%ion-icon-ios-person { content: "\f47e"; } +%ion-icon-ios-person-add { content: "\f1e1"; } +%ion-icon-ios-person-add-outline { content: "\f1e0"; } +%ion-icon-ios-person-outline { content: "\f47d"; } +%ion-icon-ios-phone-landscape { content: "\f1e2"; } +%ion-icon-ios-phone-landscape-outline { content: "\f1e2"; } +%ion-icon-ios-phone-portrait { content: "\f1e3"; } +%ion-icon-ios-phone-portrait-outline { content: "\f1e3"; } +%ion-icon-ios-photos { content: "\f482"; } +%ion-icon-ios-photos-outline { content: "\f481"; } +%ion-icon-ios-pie { content: "\f484"; } +%ion-icon-ios-pie-outline { content: "\f483"; } +%ion-icon-ios-pin { content: "\f1e5"; } +%ion-icon-ios-pin-outline { content: "\f1e4"; } +%ion-icon-ios-pint { content: "\f486"; } +%ion-icon-ios-pint-outline { content: "\f485"; } +%ion-icon-ios-pizza { content: "\f1e7"; } +%ion-icon-ios-pizza-outline { content: "\f1e6"; } +%ion-icon-ios-plane { content: "\f1e9"; } +%ion-icon-ios-plane-outline { content: "\f1e8"; } +%ion-icon-ios-planet { content: "\f1eb"; } +%ion-icon-ios-planet-outline { content: "\f1ea"; } +%ion-icon-ios-play { content: "\f488"; } +%ion-icon-ios-play-outline { content: "\f487"; } +%ion-icon-ios-podium { content: "\f1ed"; } +%ion-icon-ios-podium-outline { content: "\f1ec"; } +%ion-icon-ios-power { content: "\f1ef"; } +%ion-icon-ios-power-outline { content: "\f1ee"; } +%ion-icon-ios-pricetag { content: "\f48d"; } +%ion-icon-ios-pricetag-outline { content: "\f48c"; } +%ion-icon-ios-pricetags { content: "\f48f"; } +%ion-icon-ios-pricetags-outline { content: "\f48e"; } +%ion-icon-ios-print { content: "\f1f1"; } +%ion-icon-ios-print-outline { content: "\f1f0"; } +%ion-icon-ios-pulse { content: "\f493"; } +%ion-icon-ios-pulse-outline { content: "\f1f2"; } +%ion-icon-ios-qr-scanner { content: "\f1f3"; } +%ion-icon-ios-qr-scanner-outline { content: "\f1f3"; } +%ion-icon-ios-quote { content: "\f1f5"; } +%ion-icon-ios-quote-outline { content: "\f1f4"; } +%ion-icon-ios-radio { content: "\f1f9"; } +%ion-icon-ios-radio-button-off { content: "\f1f6"; } +%ion-icon-ios-radio-button-off-outline { content: "\f1f6"; } +%ion-icon-ios-radio-button-on { content: "\f1f7"; } +%ion-icon-ios-radio-button-on-outline { content: "\f1f7"; } +%ion-icon-ios-radio-outline { content: "\f1f8"; } +%ion-icon-ios-rainy { content: "\f495"; } +%ion-icon-ios-rainy-outline { content: "\f494"; } +%ion-icon-ios-recording { content: "\f497"; } +%ion-icon-ios-recording-outline { content: "\f496"; } +%ion-icon-ios-redo { content: "\f499"; } +%ion-icon-ios-redo-outline { content: "\f498"; } +%ion-icon-ios-refresh { content: "\f49c"; } +%ion-icon-ios-refresh-circle { content: "\f226"; } +%ion-icon-ios-refresh-circle-outline { content: "\f224"; } +%ion-icon-ios-refresh-outline { content: "\f49c"; } +%ion-icon-ios-remove { content: "\f1fc"; } +%ion-icon-ios-remove-circle { content: "\f1fb"; } +%ion-icon-ios-remove-circle-outline { content: "\f1fa"; } +%ion-icon-ios-remove-outline { content: "\f1fc"; } +%ion-icon-ios-reorder { content: "\f1fd"; } +%ion-icon-ios-reorder-outline { content: "\f1fd"; } +%ion-icon-ios-repeat { content: "\f1fe"; } +%ion-icon-ios-repeat-outline { content: "\f1fe"; } +%ion-icon-ios-resize { content: "\f1ff"; } +%ion-icon-ios-resize-outline { content: "\f1ff"; } +%ion-icon-ios-restaurant { content: "\f201"; } +%ion-icon-ios-restaurant-outline { content: "\f200"; } +%ion-icon-ios-return-left { content: "\f202"; } +%ion-icon-ios-return-left-outline { content: "\f202"; } +%ion-icon-ios-return-right { content: "\f203"; } +%ion-icon-ios-return-right-outline { content: "\f203"; } +%ion-icon-ios-reverse-camera { content: "\f49f"; } +%ion-icon-ios-reverse-camera-outline { content: "\f49e"; } +%ion-icon-ios-rewind { content: "\f4a1"; } +%ion-icon-ios-rewind-outline { content: "\f4a0"; } +%ion-icon-ios-ribbon { content: "\f205"; } +%ion-icon-ios-ribbon-outline { content: "\f204"; } +%ion-icon-ios-rose { content: "\f4a3"; } +%ion-icon-ios-rose-outline { content: "\f4a2"; } +%ion-icon-ios-sad { content: "\f207"; } +%ion-icon-ios-sad-outline { content: "\f206"; } +%ion-icon-ios-school { content: "\f209"; } +%ion-icon-ios-school-outline { content: "\f208"; } +%ion-icon-ios-search { content: "\f4a5"; } +%ion-icon-ios-search-outline { content: "\f20a"; } +%ion-icon-ios-send { content: "\f20c"; } +%ion-icon-ios-send-outline { content: "\f20b"; } +%ion-icon-ios-settings { content: "\f4a7"; } +%ion-icon-ios-settings-outline { content: "\f20d"; } +%ion-icon-ios-share { content: "\f211"; } +%ion-icon-ios-share-alt { content: "\f20f"; } +%ion-icon-ios-share-alt-outline { content: "\f20e"; } +%ion-icon-ios-share-outline { content: "\f210"; } +%ion-icon-ios-shirt { content: "\f213"; } +%ion-icon-ios-shirt-outline { content: "\f212"; } +%ion-icon-ios-shuffle { content: "\f4a9"; } +%ion-icon-ios-shuffle-outline { content: "\f4a9"; } +%ion-icon-ios-skip-backward { content: "\f215"; } +%ion-icon-ios-skip-backward-outline { content: "\f214"; } +%ion-icon-ios-skip-forward { content: "\f217"; } +%ion-icon-ios-skip-forward-outline { content: "\f216"; } +%ion-icon-ios-snow { content: "\f218"; } +%ion-icon-ios-snow-outline { content: "\f22c"; } +%ion-icon-ios-speedometer { content: "\f4b0"; } +%ion-icon-ios-speedometer-outline { content: "\f4af"; } +%ion-icon-ios-square { content: "\f21a"; } +%ion-icon-ios-square-outline { content: "\f219"; } +%ion-icon-ios-star { content: "\f4b3"; } +%ion-icon-ios-star-half { content: "\f4b1"; } +%ion-icon-ios-star-half-outline { content: "\f4b1"; } +%ion-icon-ios-star-outline { content: "\f4b2"; } +%ion-icon-ios-stats { content: "\f21c"; } +%ion-icon-ios-stats-outline { content: "\f21b"; } +%ion-icon-ios-stopwatch { content: "\f4b5"; } +%ion-icon-ios-stopwatch-outline { content: "\f4b4"; } +%ion-icon-ios-subway { content: "\f21e"; } +%ion-icon-ios-subway-outline { content: "\f21d"; } +%ion-icon-ios-sunny { content: "\f4b7"; } +%ion-icon-ios-sunny-outline { content: "\f4b6"; } +%ion-icon-ios-swap { content: "\f21f"; } +%ion-icon-ios-swap-outline { content: "\f21f"; } +%ion-icon-ios-switch { content: "\f221"; } +%ion-icon-ios-switch-outline { content: "\f220"; } +%ion-icon-ios-sync { content: "\f222"; } +%ion-icon-ios-sync-outline { content: "\f222"; } +%ion-icon-ios-tablet-landscape { content: "\f223"; } +%ion-icon-ios-tablet-landscape-outline { content: "\f223"; } +%ion-icon-ios-tablet-portrait { content: "\f24e"; } +%ion-icon-ios-tablet-portrait-outline { content: "\f24e"; } +%ion-icon-ios-tennisball { content: "\f4bb"; } +%ion-icon-ios-tennisball-outline { content: "\f4ba"; } +%ion-icon-ios-text { content: "\f250"; } +%ion-icon-ios-text-outline { content: "\f24f"; } +%ion-icon-ios-thermometer { content: "\f252"; } +%ion-icon-ios-thermometer-outline { content: "\f251"; } +%ion-icon-ios-thumbs-down { content: "\f254"; } +%ion-icon-ios-thumbs-down-outline { content: "\f253"; } +%ion-icon-ios-thumbs-up { content: "\f256"; } +%ion-icon-ios-thumbs-up-outline { content: "\f255"; } +%ion-icon-ios-thunderstorm { content: "\f4bd"; } +%ion-icon-ios-thunderstorm-outline { content: "\f4bc"; } +%ion-icon-ios-time { content: "\f4bf"; } +%ion-icon-ios-time-outline { content: "\f4be"; } +%ion-icon-ios-timer { content: "\f4c1"; } +%ion-icon-ios-timer-outline { content: "\f4c0"; } +%ion-icon-ios-train { content: "\f258"; } +%ion-icon-ios-train-outline { content: "\f257"; } +%ion-icon-ios-transgender { content: "\f259"; } +%ion-icon-ios-transgender-outline { content: "\f259"; } +%ion-icon-ios-trash { content: "\f4c5"; } +%ion-icon-ios-trash-outline { content: "\f4c4"; } +%ion-icon-ios-trending-down { content: "\f25a"; } +%ion-icon-ios-trending-down-outline { content: "\f25a"; } +%ion-icon-ios-trending-up { content: "\f25b"; } +%ion-icon-ios-trending-up-outline { content: "\f25b"; } +%ion-icon-ios-trophy { content: "\f25d"; } +%ion-icon-ios-trophy-outline { content: "\f25c"; } +%ion-icon-ios-umbrella { content: "\f25f"; } +%ion-icon-ios-umbrella-outline { content: "\f25e"; } +%ion-icon-ios-undo { content: "\f4c7"; } +%ion-icon-ios-undo-outline { content: "\f4c6"; } +%ion-icon-ios-unlock { content: "\f261"; } +%ion-icon-ios-unlock-outline { content: "\f260"; } +%ion-icon-ios-videocam { content: "\f4cd"; } +%ion-icon-ios-videocam-outline { content: "\f4cc"; } +%ion-icon-ios-volume-down { content: "\f262"; } +%ion-icon-ios-volume-down-outline { content: "\f262"; } +%ion-icon-ios-volume-mute { content: "\f263"; } +%ion-icon-ios-volume-mute-outline { content: "\f263"; } +%ion-icon-ios-volume-off { content: "\f264"; } +%ion-icon-ios-volume-off-outline { content: "\f264"; } +%ion-icon-ios-volume-up { content: "\f265"; } +%ion-icon-ios-volume-up-outline { content: "\f265"; } +%ion-icon-ios-walk { content: "\f266"; } +%ion-icon-ios-walk-outline { content: "\f266"; } +%ion-icon-ios-warning { content: "\f268"; } +%ion-icon-ios-warning-outline { content: "\f267"; } +%ion-icon-ios-watch { content: "\f269"; } +%ion-icon-ios-watch-outline { content: "\f269"; } +%ion-icon-ios-water { content: "\f26b"; } +%ion-icon-ios-water-outline { content: "\f26a"; } +%ion-icon-ios-wifi { content: "\f26d"; } +%ion-icon-ios-wifi-outline { content: "\f26c"; } +%ion-icon-ios-wine { content: "\f26f"; } +%ion-icon-ios-wine-outline { content: "\f26e"; } +%ion-icon-ios-woman { content: "\f271"; } +%ion-icon-ios-woman-outline { content: "\f270"; } +%ion-icon-logo-android { content: "\f225"; } +%ion-icon-logo-angular { content: "\f227"; } +%ion-icon-logo-apple { content: "\f229"; } +%ion-icon-logo-bitcoin { content: "\f22b"; } +%ion-icon-logo-buffer { content: "\f22d"; } +%ion-icon-logo-chrome { content: "\f22f"; } +%ion-icon-logo-codepen { content: "\f230"; } +%ion-icon-logo-css3 { content: "\f231"; } +%ion-icon-logo-designernews { content: "\f232"; } +%ion-icon-logo-dribbble { content: "\f233"; } +%ion-icon-logo-dropbox { content: "\f234"; } +%ion-icon-logo-euro { content: "\f235"; } +%ion-icon-logo-facebook { content: "\f236"; } +%ion-icon-logo-foursquare { content: "\f237"; } +%ion-icon-logo-freebsd-devil { content: "\f238"; } +%ion-icon-logo-github { content: "\f239"; } +%ion-icon-logo-google { content: "\f23a"; } +%ion-icon-logo-googleplus { content: "\f23b"; } +%ion-icon-logo-hackernews { content: "\f23c"; } +%ion-icon-logo-html5 { content: "\f23d"; } +%ion-icon-logo-instagram { content: "\f23e"; } +%ion-icon-logo-javascript { content: "\f23f"; } +%ion-icon-logo-linkedin { content: "\f240"; } +%ion-icon-logo-markdown { content: "\f241"; } +%ion-icon-logo-nodejs { content: "\f242"; } +%ion-icon-logo-octocat { content: "\f243"; } +%ion-icon-logo-pinterest { content: "\f244"; } +%ion-icon-logo-playstation { content: "\f245"; } +%ion-icon-logo-python { content: "\f246"; } +%ion-icon-logo-reddit { content: "\f247"; } +%ion-icon-logo-rss { content: "\f248"; } +%ion-icon-logo-sass { content: "\f249"; } +%ion-icon-logo-skype { content: "\f24a"; } +%ion-icon-logo-snapchat { content: "\f24b"; } +%ion-icon-logo-steam { content: "\f24c"; } +%ion-icon-logo-tumblr { content: "\f24d"; } +%ion-icon-logo-tux { content: "\f2ae"; } +%ion-icon-logo-twitch { content: "\f2af"; } +%ion-icon-logo-twitter { content: "\f2b0"; } +%ion-icon-logo-usd { content: "\f2b1"; } +%ion-icon-logo-vimeo { content: "\f2c4"; } +%ion-icon-logo-whatsapp { content: "\f2c5"; } +%ion-icon-logo-windows { content: "\f32f"; } +%ion-icon-logo-wordpress { content: "\f330"; } +%ion-icon-logo-xbox { content: "\f34c"; } +%ion-icon-logo-yahoo { content: "\f34d"; } +%ion-icon-logo-yen { content: "\f34e"; } +%ion-icon-logo-youtube { content: "\f34f"; } +%ion-icon-md-add { content: "\f273"; } +%ion-icon-md-add-circle { content: "\f272"; } +%ion-icon-md-alarm { content: "\f274"; } +%ion-icon-md-albums { content: "\f275"; } +%ion-icon-md-alert { content: "\f276"; } +%ion-icon-md-american-football { content: "\f277"; } +%ion-icon-md-analytics { content: "\f278"; } +%ion-icon-md-aperture { content: "\f279"; } +%ion-icon-md-apps { content: "\f27a"; } +%ion-icon-md-appstore { content: "\f27b"; } +%ion-icon-md-archive { content: "\f27c"; } +%ion-icon-md-arrow-back { content: "\f27d"; } +%ion-icon-md-arrow-down { content: "\f27e"; } +%ion-icon-md-arrow-dropdown { content: "\f280"; } +%ion-icon-md-arrow-dropdown-circle { content: "\f27f"; } +%ion-icon-md-arrow-dropleft { content: "\f282"; } +%ion-icon-md-arrow-dropleft-circle { content: "\f281"; } +%ion-icon-md-arrow-dropright { content: "\f284"; } +%ion-icon-md-arrow-dropright-circle { content: "\f283"; } +%ion-icon-md-arrow-dropup { content: "\f286"; } +%ion-icon-md-arrow-dropup-circle { content: "\f285"; } +%ion-icon-md-arrow-forward { content: "\f287"; } +%ion-icon-md-arrow-round-back { content: "\f288"; } +%ion-icon-md-arrow-round-down { content: "\f289"; } +%ion-icon-md-arrow-round-forward { content: "\f28a"; } +%ion-icon-md-arrow-round-up { content: "\f28b"; } +%ion-icon-md-arrow-up { content: "\f28c"; } +%ion-icon-md-at { content: "\f28d"; } +%ion-icon-md-attach { content: "\f28e"; } +%ion-icon-md-backspace { content: "\f28f"; } +%ion-icon-md-barcode { content: "\f290"; } +%ion-icon-md-baseball { content: "\f291"; } +%ion-icon-md-basket { content: "\f292"; } +%ion-icon-md-basketball { content: "\f293"; } +%ion-icon-md-battery-charging { content: "\f294"; } +%ion-icon-md-battery-dead { content: "\f295"; } +%ion-icon-md-battery-full { content: "\f296"; } +%ion-icon-md-beaker { content: "\f297"; } +%ion-icon-md-beer { content: "\f298"; } +%ion-icon-md-bicycle { content: "\f299"; } +%ion-icon-md-bluetooth { content: "\f29a"; } +%ion-icon-md-boat { content: "\f29b"; } +%ion-icon-md-body { content: "\f29c"; } +%ion-icon-md-bonfire { content: "\f29d"; } +%ion-icon-md-book { content: "\f29e"; } +%ion-icon-md-bookmark { content: "\f29f"; } +%ion-icon-md-bookmarks { content: "\f2a0"; } +%ion-icon-md-bowtie { content: "\f2a1"; } +%ion-icon-md-briefcase { content: "\f2a2"; } +%ion-icon-md-browsers { content: "\f2a3"; } +%ion-icon-md-brush { content: "\f2a4"; } +%ion-icon-md-bug { content: "\f2a5"; } +%ion-icon-md-build { content: "\f2a6"; } +%ion-icon-md-bulb { content: "\f2a7"; } +%ion-icon-md-bus { content: "\f2a8"; } +%ion-icon-md-cafe { content: "\f2a9"; } +%ion-icon-md-calculator { content: "\f2aa"; } +%ion-icon-md-calendar { content: "\f2ab"; } +%ion-icon-md-call { content: "\f2ac"; } +%ion-icon-md-camera { content: "\f2ad"; } +%ion-icon-md-car { content: "\f2b2"; } +%ion-icon-md-card { content: "\f2b3"; } +%ion-icon-md-cart { content: "\f2b4"; } +%ion-icon-md-cash { content: "\f2b5"; } +%ion-icon-md-chatboxes { content: "\f2b6"; } +%ion-icon-md-chatbubbles { content: "\f2b7"; } +%ion-icon-md-checkbox { content: "\f2b9"; } +%ion-icon-md-checkbox-outline { content: "\f2b8"; } +%ion-icon-md-checkmark { content: "\f2bc"; } +%ion-icon-md-checkmark-circle { content: "\f2bb"; } +%ion-icon-md-checkmark-circle-outline { content: "\f2ba"; } +%ion-icon-md-clipboard { content: "\f2bd"; } +%ion-icon-md-clock { content: "\f2be"; } +%ion-icon-md-close { content: "\f2c0"; } +%ion-icon-md-close-circle { content: "\f2bf"; } +%ion-icon-md-closed-captioning { content: "\f2c1"; } +%ion-icon-md-cloud { content: "\f2c9"; } +%ion-icon-md-cloud-circle { content: "\f2c2"; } +%ion-icon-md-cloud-done { content: "\f2c3"; } +%ion-icon-md-cloud-download { content: "\f2c6"; } +%ion-icon-md-cloud-outline { content: "\f2c7"; } +%ion-icon-md-cloud-upload { content: "\f2c8"; } +%ion-icon-md-cloudy { content: "\f2cb"; } +%ion-icon-md-cloudy-night { content: "\f2ca"; } +%ion-icon-md-code { content: "\f2ce"; } +%ion-icon-md-code-download { content: "\f2cc"; } +%ion-icon-md-code-working { content: "\f2cd"; } +%ion-icon-md-cog { content: "\f2cf"; } +%ion-icon-md-color-fill { content: "\f2d0"; } +%ion-icon-md-color-filter { content: "\f2d1"; } +%ion-icon-md-color-palette { content: "\f2d2"; } +%ion-icon-md-color-wand { content: "\f2d3"; } +%ion-icon-md-compass { content: "\f2d4"; } +%ion-icon-md-construct { content: "\f2d5"; } +%ion-icon-md-contact { content: "\f2d6"; } +%ion-icon-md-contacts { content: "\f2d7"; } +%ion-icon-md-contract { content: "\f2d8"; } +%ion-icon-md-contrast { content: "\f2d9"; } +%ion-icon-md-copy { content: "\f2da"; } +%ion-icon-md-create { content: "\f2db"; } +%ion-icon-md-crop { content: "\f2dc"; } +%ion-icon-md-cube { content: "\f2dd"; } +%ion-icon-md-cut { content: "\f2de"; } +%ion-icon-md-desktop { content: "\f2df"; } +%ion-icon-md-disc { content: "\f2e0"; } +%ion-icon-md-document { content: "\f2e1"; } +%ion-icon-md-done-all { content: "\f2e2"; } +%ion-icon-md-download { content: "\f2e3"; } +%ion-icon-md-easel { content: "\f2e4"; } +%ion-icon-md-egg { content: "\f2e5"; } +%ion-icon-md-exit { content: "\f2e6"; } +%ion-icon-md-expand { content: "\f2e7"; } +%ion-icon-md-eye { content: "\f2e9"; } +%ion-icon-md-eye-off { content: "\f2e8"; } +%ion-icon-md-fastforward { content: "\f2ea"; } +%ion-icon-md-female { content: "\f2eb"; } +%ion-icon-md-filing { content: "\f2ec"; } +%ion-icon-md-film { content: "\f2ed"; } +%ion-icon-md-finger-print { content: "\f2ee"; } +%ion-icon-md-flag { content: "\f2ef"; } +%ion-icon-md-flame { content: "\f2f0"; } +%ion-icon-md-flash { content: "\f2f1"; } +%ion-icon-md-flask { content: "\f2f2"; } +%ion-icon-md-flower { content: "\f2f3"; } +%ion-icon-md-folder { content: "\f2f5"; } +%ion-icon-md-folder-open { content: "\f2f4"; } +%ion-icon-md-football { content: "\f2f6"; } +%ion-icon-md-funnel { content: "\f2f7"; } +%ion-icon-md-game-controller-a { content: "\f2f8"; } +%ion-icon-md-game-controller-b { content: "\f2f9"; } +%ion-icon-md-git-branch { content: "\f2fa"; } +%ion-icon-md-git-commit { content: "\f2fb"; } +%ion-icon-md-git-compare { content: "\f2fc"; } +%ion-icon-md-git-merge { content: "\f2fd"; } +%ion-icon-md-git-network { content: "\f2fe"; } +%ion-icon-md-git-pull-request { content: "\f2ff"; } +%ion-icon-md-glasses { content: "\f300"; } +%ion-icon-md-globe { content: "\f301"; } +%ion-icon-md-grid { content: "\f302"; } +%ion-icon-md-hammer { content: "\f303"; } +%ion-icon-md-hand { content: "\f304"; } +%ion-icon-md-happy { content: "\f305"; } +%ion-icon-md-headset { content: "\f306"; } +%ion-icon-md-heart { content: "\f308"; } +%ion-icon-md-heart-outline { content: "\f307"; } +%ion-icon-md-help { content: "\f30b"; } +%ion-icon-md-help-buoy { content: "\f309"; } +%ion-icon-md-help-circle { content: "\f30a"; } +%ion-icon-md-home { content: "\f30c"; } +%ion-icon-md-ice-cream { content: "\f30d"; } +%ion-icon-md-image { content: "\f30e"; } +%ion-icon-md-images { content: "\f30f"; } +%ion-icon-md-infinite { content: "\f310"; } +%ion-icon-md-information { content: "\f312"; } +%ion-icon-md-information-circle { content: "\f311"; } +%ion-icon-md-ionic { content: "\f313"; } +%ion-icon-md-ionitron { content: "\f314"; } +%ion-icon-md-jet { content: "\f315"; } +%ion-icon-md-key { content: "\f316"; } +%ion-icon-md-keypad { content: "\f317"; } +%ion-icon-md-laptop { content: "\f318"; } +%ion-icon-md-leaf { content: "\f319"; } +%ion-icon-md-link { content: "\f22e"; } +%ion-icon-md-list { content: "\f31b"; } +%ion-icon-md-list-box { content: "\f31a"; } +%ion-icon-md-locate { content: "\f31c"; } +%ion-icon-md-lock { content: "\f31d"; } +%ion-icon-md-log-in { content: "\f31e"; } +%ion-icon-md-log-out { content: "\f31f"; } +%ion-icon-md-magnet { content: "\f320"; } +%ion-icon-md-mail { content: "\f322"; } +%ion-icon-md-mail-open { content: "\f321"; } +%ion-icon-md-male { content: "\f323"; } +%ion-icon-md-man { content: "\f324"; } +%ion-icon-md-map { content: "\f325"; } +%ion-icon-md-medal { content: "\f326"; } +%ion-icon-md-medical { content: "\f327"; } +%ion-icon-md-medkit { content: "\f328"; } +%ion-icon-md-megaphone { content: "\f329"; } +%ion-icon-md-menu { content: "\f32a"; } +%ion-icon-md-mic { content: "\f32c"; } +%ion-icon-md-mic-off { content: "\f32b"; } +%ion-icon-md-microphone { content: "\f32d"; } +%ion-icon-md-moon { content: "\f32e"; } +%ion-icon-md-more { content: "\f1c9"; } +%ion-icon-md-move { content: "\f331"; } +%ion-icon-md-musical-note { content: "\f332"; } +%ion-icon-md-musical-notes { content: "\f333"; } +%ion-icon-md-navigate { content: "\f334"; } +%ion-icon-md-no-smoking { content: "\f335"; } +%ion-icon-md-notifications { content: "\f338"; } +%ion-icon-md-notifications-off { content: "\f336"; } +%ion-icon-md-notifications-outline { content: "\f337"; } +%ion-icon-md-nuclear { content: "\f339"; } +%ion-icon-md-nutrition { content: "\f33a"; } +%ion-icon-md-open { content: "\f33b"; } +%ion-icon-md-options { content: "\f33c"; } +%ion-icon-md-outlet { content: "\f33d"; } +%ion-icon-md-paper { content: "\f33f"; } +%ion-icon-md-paper-plane { content: "\f33e"; } +%ion-icon-md-partly-sunny { content: "\f340"; } +%ion-icon-md-pause { content: "\f341"; } +%ion-icon-md-paw { content: "\f342"; } +%ion-icon-md-people { content: "\f343"; } +%ion-icon-md-person { content: "\f345"; } +%ion-icon-md-person-add { content: "\f344"; } +%ion-icon-md-phone-landscape { content: "\f346"; } +%ion-icon-md-phone-portrait { content: "\f347"; } +%ion-icon-md-photos { content: "\f348"; } +%ion-icon-md-pie { content: "\f349"; } +%ion-icon-md-pin { content: "\f34a"; } +%ion-icon-md-pint { content: "\f34b"; } +%ion-icon-md-pizza { content: "\f354"; } +%ion-icon-md-plane { content: "\f355"; } +%ion-icon-md-planet { content: "\f356"; } +%ion-icon-md-play { content: "\f357"; } +%ion-icon-md-podium { content: "\f358"; } +%ion-icon-md-power { content: "\f359"; } +%ion-icon-md-pricetag { content: "\f35a"; } +%ion-icon-md-pricetags { content: "\f35b"; } +%ion-icon-md-print { content: "\f35c"; } +%ion-icon-md-pulse { content: "\f35d"; } +%ion-icon-md-qr-scanner { content: "\f35e"; } +%ion-icon-md-quote { content: "\f35f"; } +%ion-icon-md-radio { content: "\f362"; } +%ion-icon-md-radio-button-off { content: "\f360"; } +%ion-icon-md-radio-button-on { content: "\f361"; } +%ion-icon-md-rainy { content: "\f363"; } +%ion-icon-md-recording { content: "\f364"; } +%ion-icon-md-redo { content: "\f365"; } +%ion-icon-md-refresh { content: "\f366"; } +%ion-icon-md-refresh-circle { content: "\f228"; } +%ion-icon-md-remove { content: "\f368"; } +%ion-icon-md-remove-circle { content: "\f367"; } +%ion-icon-md-reorder { content: "\f369"; } +%ion-icon-md-repeat { content: "\f36a"; } +%ion-icon-md-resize { content: "\f36b"; } +%ion-icon-md-restaurant { content: "\f36c"; } +%ion-icon-md-return-left { content: "\f36d"; } +%ion-icon-md-return-right { content: "\f36e"; } +%ion-icon-md-reverse-camera { content: "\f36f"; } +%ion-icon-md-rewind { content: "\f370"; } +%ion-icon-md-ribbon { content: "\f371"; } +%ion-icon-md-rose { content: "\f372"; } +%ion-icon-md-sad { content: "\f373"; } +%ion-icon-md-school { content: "\f374"; } +%ion-icon-md-search { content: "\f375"; } +%ion-icon-md-send { content: "\f376"; } +%ion-icon-md-settings { content: "\f377"; } +%ion-icon-md-share { content: "\f379"; } +%ion-icon-md-share-alt { content: "\f378"; } +%ion-icon-md-shirt { content: "\f37a"; } +%ion-icon-md-shuffle { content: "\f37b"; } +%ion-icon-md-skip-backward { content: "\f37c"; } +%ion-icon-md-skip-forward { content: "\f37d"; } +%ion-icon-md-snow { content: "\f37e"; } +%ion-icon-md-speedometer { content: "\f37f"; } +%ion-icon-md-square { content: "\f381"; } +%ion-icon-md-square-outline { content: "\f380"; } +%ion-icon-md-star { content: "\f384"; } +%ion-icon-md-star-half { content: "\f382"; } +%ion-icon-md-star-outline { content: "\f383"; } +%ion-icon-md-stats { content: "\f385"; } +%ion-icon-md-stopwatch { content: "\f386"; } +%ion-icon-md-subway { content: "\f387"; } +%ion-icon-md-sunny { content: "\f388"; } +%ion-icon-md-swap { content: "\f389"; } +%ion-icon-md-switch { content: "\f38a"; } +%ion-icon-md-sync { content: "\f38b"; } +%ion-icon-md-tablet-landscape { content: "\f38c"; } +%ion-icon-md-tablet-portrait { content: "\f38d"; } +%ion-icon-md-tennisball { content: "\f38e"; } +%ion-icon-md-text { content: "\f38f"; } +%ion-icon-md-thermometer { content: "\f390"; } +%ion-icon-md-thumbs-down { content: "\f391"; } +%ion-icon-md-thumbs-up { content: "\f392"; } +%ion-icon-md-thunderstorm { content: "\f393"; } +%ion-icon-md-time { content: "\f394"; } +%ion-icon-md-timer { content: "\f395"; } +%ion-icon-md-train { content: "\f396"; } +%ion-icon-md-transgender { content: "\f397"; } +%ion-icon-md-trash { content: "\f398"; } +%ion-icon-md-trending-down { content: "\f399"; } +%ion-icon-md-trending-up { content: "\f39a"; } +%ion-icon-md-trophy { content: "\f39b"; } +%ion-icon-md-umbrella { content: "\f39c"; } +%ion-icon-md-undo { content: "\f39d"; } +%ion-icon-md-unlock { content: "\f39e"; } +%ion-icon-md-videocam { content: "\f39f"; } +%ion-icon-md-volume-down { content: "\f3a0"; } +%ion-icon-md-volume-mute { content: "\f3a1"; } +%ion-icon-md-volume-off { content: "\f3a2"; } +%ion-icon-md-volume-up { content: "\f3a3"; } +%ion-icon-md-walk { content: "\f3a4"; } +%ion-icon-md-warning { content: "\f3a5"; } +%ion-icon-md-watch { content: "\f3a6"; } +%ion-icon-md-water { content: "\f3a7"; } +%ion-icon-md-wifi { content: "\f3a8"; } +%ion-icon-md-wine { content: "\f3a9"; } +%ion-icon-md-woman { content: "\f3aa"; } + diff --git a/_sass/vendor/_modularscale.scss b/_sass/vendor/modularscale/_modularscale.scss similarity index 100% rename from _sass/vendor/_modularscale.scss rename to _sass/vendor/modularscale/_modularscale.scss From 6ffe7cf0214621e915aebe813807ef1ba2e40856 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 14:27:00 +0800 Subject: [PATCH 37/44] Update jekyll --- jekyll.md | 456 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 309 insertions(+), 147 deletions(-) diff --git a/jekyll.md b/jekyll.md index 82564e5e2..e9fafae72 100644 --- a/jekyll.md +++ b/jekyll.md @@ -1,12 +1,55 @@ --- title: Jekyll jekyll_escape: true +layout: 2017/sheet --- {% raw %} + ### Installation - $ gem install jekyll +```bash +# Install the gems +gem install jekyll bundler +``` + +```bash +# Create a new site at `./myblog` +jekyll new myblog +``` + +```bash +cd myblog +bundle exec jekyll serve +``` + +See: [Jekyll quickstart](http://jekyllrb.com/docs/quickstart/) + +### Installation (GitHub pages version) + +```bash +# Requires bundler +gem install bundler +``` + +```bash +# Build the Gemfile +echo "source 'https://rubygems.org'" > Gemfile +echo "gem 'github-pages', group: :jekyll_plugins" >> Gemfile +``` + +```bash +# Install gems +bundle +``` + +```bash +# Start server +bundle exec jekyll serve +``` + +This is the recommended setup, especially if you're using GitHub pages. +See: [github/pages-gem](https://github.com/github/pages-gem) ### Directories @@ -33,13 +76,18 @@ jekyll_escape: true └── _site/ └── ... -## [Front-matter](http://jekyllrb.com/docs/frontmatter/) +## Front-matter +{: .-three-column} + +### Basic frontmatter --- layout: post title: Hello --- +See: [Front-matter](http://jekyllrb.com/docs/frontmatter/) + ### Other frontmatter stuff permalink: '/hello' @@ -48,86 +96,29 @@ jekyll_escape: true categories: ['html', 'css'] tags: ['html', 'css'] -## [Configuration](http://jekyllrb.com/docs/configuration/) +### Configuration source: . destination: _site exclude: [dir, file, ...] include: ['.htaccess'] -## [Variables](http://jekyllrb.com/docs/variables/) - - {{ site }} - from config.yml - {{ page }} - from frontmatter, and page-specific info - {{ content }} - html content (use in layouts) - {{ paginator }} - ... - -### Site - - {{ site.time }} - current time - {{ site.pages }} - list of pages - {{ site.posts }} - list of posts - {{ site.related_posts }} - list - {{ site.categories.CATEGORY }} - list - {{ site.tags.TAG }} - list - - {{ site.static_files }} - -### Page - - {{ page.content }} - un-rendered content - {{ page.title }} - {{ page.excerpt }} - un-rendered excerpt - {{ page.url }} - {{ page.date }} - {{ page.id }} - unique id for RSS feeds - {{ page.categories }} - {{ page.tags }} - {{ page.path }} - {{ post.excerpt | remove: '

    ' | remove: '

    ' }} - {{ post.excerpt | strip_html }} - - - {{ page.next }} - {{ page.previous }} - -### [Paginator](http://jekyllrb.com/docs/pagination/) - - {{ paginator.page }} - page number - {{ paginator.total_posts }} - {{ paginator.total_pages }} - {{ paginator.per_page }} - - {% for post in paginator.posts %} ... {% endfor %} - - {% if paginator.previous_page %} - Previous - {% else %} - {% endif %} - - {{ paginator.next_page }} - page number - {{ paginator.next_page_path }} - ... - - {% if paginator.total_pages > 1 %} - {% endif %} - -Add this to `_config.yml`: - - paginate: 5 - paginate_path: "blog/:num" - -### Code - - {% highlight ruby linenos %} - def show - ... - end - {% endhighlight %} +See: [Configuration](http://jekyllrb.com/docs/configuration/) Markup ------ +### Page variables + +```html +{{ page.title }} +``` + +```html + +

    {{ page.description | truncate_words: 20 }} +``` + ### Loops {% for post in site.posts %} @@ -150,21 +141,133 @@ Markup ### Includes (partials) - {% include header.html %} +``` +{% include header.html %} +``` -## [Blogging](http://jekyllrb.com/docs/posts/) +```html + +{% include header.html page=page %} +``` + +### Comments + +```html +{% comment %} +{% endcomment %} +``` + +## Expression + +### Top-level variables + + {{ site }} - from config.yml + {{ page }} - from frontmatter, and page-specific info + {{ content }} - html content (use in layouts) + {{ paginator }} - ... + +See: [Variables](http://jekyllrb.com/docs/variables/) + +### Site + + {{ site.time }} - current time + {{ site.pages }} - list of pages + {{ site.posts }} - list of posts + {{ site.related_posts }} - list + {{ site.categories.CATEGORY }} - list + {{ site.tags.TAG }} - list + + {{ site.static_files }} + +### Page + +```html +{{ page.content }} - un-rendered content +{{ page.title }} +{{ page.excerpt }} - un-rendered excerpt +{{ page.url }} +{{ page.date }} +{{ page.id }} - unique id for RSS feeds +{{ page.categories }} +{{ page.tags }} +{{ page.path }} +{{ post.excerpt | remove: '

    ' | remove: '

    ' }} +{{ post.excerpt | strip_html }} +``` + +```html + +{{ page.next }} +{{ page.previous }} +``` + +## Paginator + +### Paginator setup + +Add this to `_config.yml`: +{: .-setup} + +```yml +paginate: 5 +paginate_path: "blog/:num" +``` + +See: [Paginator](http://jekyllrb.com/docs/pagination/) + + +### Numbers + +``` +{{ paginator.page }} - page number +{{ paginator.total_posts }} +{{ paginator.total_pages }} +{{ paginator.per_page }} +``` + +### Iterating through posts + +``` +{% for post in paginator.posts %} ... {% endfor %} +``` + +### Previous button + +``` +{% if paginator.total_pages > 1 %} + {% if paginator.previous_page %} + Previous + {% else %} + {% endif %} +{% endif %} +``` + +``` +{{ paginator.next_page }} - page number +{{ paginator.next_page_path }} +``` + +## Blogging + +### Paths _posts/YEAR-MONTH-DAY-title.md -### [Image paths](http://jekyllrb.com/docs/posts/#including-images-and-resources) - +See: [Blogging](http://jekyllrb.com/docs/posts/) + +### Image paths + ![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg) -### [Drafts](http://jekyllrb.com/docs/drafts/) +See: [Image paths](http://jekyllrb.com/docs/posts/#including-images-and-resources) + +### Drafts vi _drafts/a-draft-post.md jekyll build --drafts +See: [Drafts](http://jekyllrb.com/docs/drafts/) + ### [Excerpts](http://jekyllrb.com/docs/posts/#post-excerpts) {{ post.excerpt | remove: '

    ' | remove: '

    ' }} @@ -188,21 +291,33 @@ Markup permalink: none # /:categories/:title.html permalink: "/:title" -## [Data](http://jekyllrb.com/docs/datafiles/) +## More features - _data/members.yml +### Data - {% for member in site.data.members %} +``` +_data/members.yml +``` +{: .-setup} -## [Collections](http://jekyllrb.com/docs/collections/) +``` +{% for member in site.data.members %} + ... +{% endfor %} +``` -```yaml +See: [Data](http://jekyllrb.com/docs/datafiles/) + +### Collections + +```yml # _config.yml collections: - authors ``` +{: .-setup} -```yaml +```yml # _/authors/a-n-roquelaire.md --- name: A. N. Roquelaire @@ -214,79 +329,115 @@ real_name: Anne Rice {% for author in site.authors %} ``` -Helpers and Filters +See: [Collections](http://jekyllrb.com/docs/collections/) + +Helpers and filters ------------------- ### Dates - {{ site.time | date_to_xmlschema }} #=> 2008-11-07T13:07:54-08:00 - {{ site.time | date_to_rfc822 }} #=> Mon, 07 Nov 2008 13:07:54 -0800 - {{ site.time | date_to_string }} #=> 07 Nov 2008 - {{ site.time | date_to_long_string }} #=> 07 November 2008 - | date: "%Y %m %d" +``` +{{ site.time | date_to_xmlschema }} #=> 2008-11-07T13:07:54-08:00 +{{ site.time | date_to_rfc822 }} #=> Mon, 07 Nov 2008 13:07:54 -0800 +{{ site.time | date_to_string }} #=> 07 Nov 2008 +{{ site.time | date_to_long_string }} #=> 07 November 2008 +{{ site.time | date: "%Y %m %d" }} +``` ### Preprocessors - | textilize - | markdownify - | jsonify - | sassify - | scssify +``` +| textilize +| markdownify +| jsonify +| sassify +| scssify +``` -### Array +### Array filters - site.posts | where:"year","2014" - site.posts | group_by:"genre" #=> { name, items } - site.posts | sort +``` +site.posts | where:"year","2014" +site.posts | group_by:"genre" #=> { name, items } +site.posts | sort +``` - | first - | last - | join: "," - | array_to_sentence_string #=> CSS, JavaScript and HTML +``` +| first +| last +| join: "," +| array_to_sentence_string #=> CSS, JavaScript and HTML +``` - | map: "post" # works like 'pluck' - | size +``` +| map: "post" # works like 'pluck' +| size +``` -### [String filters](http://docs.shopify.com/themes/liquid-documentation/filters) +### String filters - | default: "xxx" +```rb +| default: "xxx" +``` - | upcase - | downcase +```rb +| upcase +| downcase +``` - | remove: "

    " - | replace: "super", "mega" - | remove_first: "

    " - | replace_first: "super", "mega" +```rb +| remove: "

    " +| replace: "super", "mega" +| remove_first: "

    " +| replace_first: "super", "mega" +``` - | truncate: 5 - | truncatewords: 20 +```rb +| truncate: 5 +| truncatewords: 20 +``` - | prepend: "Mr. " - | append: " Sr." +```rb +| prepend: "Mr. " +| append: " Sr." +``` - | camelize - | capitalize - | pluralize - | strip_html - | strip_newlines - | newline_to_br +```rb +| camelize +| capitalize +| pluralize +| strip_html +| strip_newlines +| newline_to_br +``` - | split: ',' +```rb +| split: ',' +``` - | escape - | escape_once +```rb +| escape +| escape_once +``` - | slice: -3, 3 +```rb +| slice: -3, 3 +``` -### String filters, Jekyll-only +See: [String filters](http://docs.shopify.com/themes/liquid-documentation/filters) - | number_of_words - | slugify +### String filters (Jekyll-only) - | xml_escape #=> CDATA - | cgi_escape #=> foo%2Cbar - | uri_escape #=> foo,%20bar +``` +| number_of_words +| slugify +``` + +```rb +| xml_escape #=> CDATA +| cgi_escape #=> foo%2Cbar +| uri_escape #=> foo,%20bar +``` ### Numbers @@ -295,33 +446,44 @@ Helpers and Filters | time: 4 | divided_by: 3 | modulo: 2 - -Comments --------- - {% comment %} - {% endcomment %} +### Code highlighter + +```html +{% highlight ruby linenos %} +def show + ... +end +{% endhighlight %} +``` Integration ----------- ### Bundler - # _plugins/bundler.rb - require "bunder/setup" - Bundler.require :default +In `_plugins/bundler.rb`: + +```rb +require "bunder/setup" +Bundler.require :default +``` ### Compass * [Compass](https://gist.github.com/parkr/2874934) * [Asset pipeline](https://github.com/matthodan/jekyll-asset-pipeline) -### References +Also see +-------- +{: .-one-column} + +* [Jekyll docs](http://jekyllrb.com/docs/home/) _jekyllrb.com_ +* [Jekyll: templates](http://jekyllrb.com/docs/templates/) _jekyllrb.com_ +* [Liquid: output](http://docs.shopify.com/themes/liquid-basics/output) _shopify.com_ +* [Liquid: logic](http://docs.shopify.com/themes/liquid-basics/logic) _shopify.com_ +* [Liquid: filters](http://docs.shopify.com/themes/liquid-documentation/filters) _shopify.com_ +* [Liquid for designers](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) _github.com/Shopify_ +{: .-also-see} - * http://jekyllrb.com/docs/home/ - * http://jekyllrb.com/docs/templates/ - * http://docs.shopify.com/themes/liquid-basics/output - * http://docs.shopify.com/themes/liquid-basics/logic - * https://github.com/Shopify/liquid/wiki/Liquid-for-Designers - * http://docs.shopify.com/themes/liquid-documentation/filters {% endraw %} From c04f664fc2a3fd2566fa4a37e704c6d1b063ca9d Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 14:27:06 +0800 Subject: [PATCH 38/44] Update --- _includes/2017/top-nav.html | 4 ++-- _sass/2017/components/top-nav.scss | 7 ++++--- react.md | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html index 00f3353f2..475657cbf 100644 --- a/_includes/2017/top-nav.html +++ b/_includes/2017/top-nav.html @@ -7,8 +7,8 @@

    {% include social-list.html class="social page-actions" page=include.page %}
      -
    • - +
    • + Edit
      • diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss index faad14bd2..a73c7cfaa 100644 --- a/_sass/2017/components/top-nav.scss +++ b/_sass/2017/components/top-nav.scss @@ -52,7 +52,9 @@ } @mixin action-bar { - & { + &, + & > li, + & > li > a { height: 32px; } @@ -82,8 +84,7 @@ } & > li > a > .text.-visible { - display: inline-block; - padding-left: 8px; + display: inline; } } diff --git a/react.md b/react.md index ae920d93e..1b92b9a53 100644 --- a/react.md +++ b/react.md @@ -485,7 +485,7 @@ Also see * This reference was made for React v15. * [React v0.14 cheatsheet](react@0.14.html) _Legacy version_ -* [React website](http://facebook.github.io/react) _(facebook.github.io)_ +* [React website](http://facebook.github.io/react) _facebook.github.io_ {:.-also-see} {%endraw%} From 30a20856d24d8cfbcacb7688aa4dd60ca63a1910 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 14:38:58 +0800 Subject: [PATCH 39/44] Update jekyll again --- jekyll.md | 47 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 37 insertions(+), 10 deletions(-) diff --git a/jekyll.md b/jekyll.md index e9fafae72..15f93852b 100644 --- a/jekyll.md +++ b/jekyll.md @@ -266,24 +266,49 @@ See: [Image paths](http://jekyllrb.com/docs/posts/#including-images-and-resource vi _drafts/a-draft-post.md jekyll build --drafts +Posts in `_drafts` only show up in development, but not production. See: [Drafts](http://jekyllrb.com/docs/drafts/) -### [Excerpts](http://jekyllrb.com/docs/posts/#post-excerpts) +### Defining excerpts - {{ post.excerpt | remove: '

      ' | remove: '

      ' }} - {{ post.excerpt | strip_html }} +``` +--- +title: My blog post +excerpt: This post is about cats +--- + +Hello, let's talk about cats. (···) +``` + +Put a key `excerpt` in the frontmatter. +See: [Excerpts](http://jekyllrb.com/docs/posts/#post-excerpts) + +### Displaying excerpts + +```html +{{ post.excerpt }} +``` + +```html +{{ post.excerpt | remove: '

      ' | remove: '

      ' }} +{{ post.excerpt | strip_html }} +``` ### Excerpt separator - --- - excerpt_separator: - --- +```html +--- +excerpt_separator: +--- - Excerpt - - Out-of-excerpt +Excerpt here + +More post body here +``` -### [Permalinks](http://jekyllrb.com/docs/permalinks/) +Alternatively, you can put excerpts inline in your post by defining `excerpt_separator`. + +### Permalinks # _config.yml permalink: date # /:categories/:year/:month/:day/:title.html @@ -291,6 +316,8 @@ See: [Drafts](http://jekyllrb.com/docs/drafts/) permalink: none # /:categories/:title.html permalink: "/:title" +See: [Permalinks](http://jekyllrb.com/docs/permalinks/) + ## More features ### Data From 89f456e3d7d7662a938747c7b8e81736c76dcc43 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 14:51:16 +0800 Subject: [PATCH 40/44] Fix buttons --- .gitignore | 1 + _includes/2017/top-nav.html | 4 +- _includes/social-list.html | 6 +- _sass/2017/components/page-actions.scss | 73 +++++++++++++++++++++++++ _sass/2017/style.scss | 1 + 5 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 _sass/2017/components/page-actions.scss diff --git a/.gitignore b/.gitignore index 350401e8e..386d56002 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ _output _site +.jekyll-metadata diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html index 475657cbf..533067720 100644 --- a/_includes/2017/top-nav.html +++ b/_includes/2017/top-nav.html @@ -7,8 +7,8 @@
      {% include social-list.html class="social page-actions" page=include.page %}
        -
      • - +
      • + Edit
        • diff --git a/_includes/social-list.html b/_includes/social-list.html index d441f6167..e0350d017 100644 --- a/_includes/social-list.html +++ b/_includes/social-list.html @@ -1,6 +1,6 @@ {% assign description = "The ultimate cheatsheet for " | append: include.page.title | append: "." %} diff --git a/_sass/2017/components/page-actions.scss b/_sass/2017/components/page-actions.scss new file mode 100644 index 000000000..99a9900a9 --- /dev/null +++ b/_sass/2017/components/page-actions.scss @@ -0,0 +1,73 @@ +@mixin action-bar { + & { + height: 32px; + } + + & > .link.link > a, + & > .link.link > a::before { + display: inline-block; + height: 32px; + line-height: 32px; + vertical-align: top; + } + + &, + & > li { + margin: 0; + padding: 0; + list-style-type: none; + } + + & > li > a, + & > li > a:visited { + color: $base-mute; + text-decoration: none; + } + + & > li > a:hover, + & > li > a:focus { + color: $base-b3; + + & > .text { + color: $base-b3; + } + } + + & > li > a::before { + font-size: 16px; + text-align: center; + } + + & > li > a > .text { + @include font-size(-1); + display: none; + } + + & > li > a > .text.-visible { + display: inline; + } +} + +.page-actions { + & { + @include action-bar; + } + + & > .facebook > a::before { + @include ion-icon('logo-facebook'); + } + + & > .twitter > a::before { + @include ion-icon('logo-twitter'); + } + + & > .github > a::before { + @include ion-icon('logo-github'); + } + + & > .link.-button > a { + box-shadow: inset 0 0 0 1px $dark-line-color; + border-radius: 2px; + padding: 0 8px; + } +} diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss index 23e154367..19b032808 100644 --- a/_sass/2017/style.scss +++ b/_sass/2017/style.scss @@ -16,4 +16,5 @@ @import './components/h3-section-list'; @import './components/headline-ad'; @import './components/main-heading'; +@import './components/page-actions'; @import './components/top-nav'; From e366c7d71d587d4fa52253d528e914bb2659b135 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 22:06:35 +0800 Subject: [PATCH 41/44] Update --- _sass/2017/components/body-area.scss | 8 +--- _sass/2017/components/page-actions.scss | 8 +++- _sass/2017/components/top-nav.scss | 57 +------------------------ _sass/2017/variables.scss | 2 + 4 files changed, 13 insertions(+), 62 deletions(-) diff --git a/_sass/2017/components/body-area.scss b/_sass/2017/components/body-area.scss index d17f6e604..4b8fdaed9 100644 --- a/_sass/2017/components/body-area.scss +++ b/_sass/2017/components/body-area.scss @@ -1,9 +1,5 @@ .body-area { - max-width: $column * 3 + 32px; + max-width: $area-width; margin: 0 auto; - padding: 8px; - - @media (min-width: 481px) { - padding: 16px; - } + @include gutter(padding); } diff --git a/_sass/2017/components/page-actions.scss b/_sass/2017/components/page-actions.scss index 99a9900a9..42cbb90f2 100644 --- a/_sass/2017/components/page-actions.scss +++ b/_sass/2017/components/page-actions.scss @@ -9,6 +9,11 @@ height: 32px; line-height: 32px; vertical-align: top; + width: auto; + } + + & > .link.link > a { + padding: 0 8px; } &, @@ -68,6 +73,7 @@ & > .link.-button > a { box-shadow: inset 0 0 0 1px $dark-line-color; border-radius: 2px; - padding: 0 8px; + padding: 0 16px; + margin: 0 8px; } } diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss index a73c7cfaa..1352a5bec 100644 --- a/_sass/2017/components/top-nav.scss +++ b/_sass/2017/components/top-nav.scss @@ -9,7 +9,7 @@ >.container { @include gutter(padding-left); @include gutter(padding-right); - max-width: 1200px; + max-width: $area-width; margin: 0 auto; } } @@ -51,57 +51,4 @@ } } -@mixin action-bar { - &, - & > li, - & > li > a { - height: 32px; - } - - &, - & > li { - margin: 0; - padding: 0; - list-style-type: none; - } - - & > li > a, - & > li > a:visited { - color: $base-mute; - text-decoration: none; - } - - & > li > a::before { - font-size: 16px; - height: 32px; - width: 32px; - line-height: 32px; - text-align: center; - } - - & > li > a > .text { - display: none; - } - - & > li > a > .text.-visible { - display: inline; - } -} - -.page-actions { - & { - @include action-bar; - } - - & > .facebook > a::before { - @include ion-icon('logo-facebook'); - } - - & > .twitter > a::before { - @include ion-icon('logo-twitter'); - } - - & > .github > a::before { - @include ion-icon('logo-github'); - } -} +// page-actions.scss diff --git a/_sass/2017/variables.scss b/_sass/2017/variables.scss index 1c05d8a28..03ec1ff1a 100644 --- a/_sass/2017/variables.scss +++ b/_sass/2017/variables.scss @@ -6,6 +6,8 @@ $gut-small: 8px; // max 480px width $gut: 16px; $column: 400px; +$area-width: $column * 3 + 32px; + /* * Fonts */ From c99467b22f500b696270c2aa68e9ead5d14147fe Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 23:27:41 +0800 Subject: [PATCH 42/44] Update rdoc --- Readme.md | 13 +++++++--- rdoc.md | 76 ++++++++++++++++++++++++++++++++++++------------------- 2 files changed, 59 insertions(+), 30 deletions(-) diff --git a/Readme.md b/Readme.md index 291d5f1f3..470019ed9 100644 --- a/Readme.md +++ b/Readme.md @@ -4,27 +4,32 @@ ## Notes -H2's support these: +`h2` supports these: {: .-two-column} {: .-three-column} {: .-left-reference} -H3's support these: +`h3` supports these: {: .-prime} -Tables support these: +`table` supports these: {: .-shortcuts} -Pre's support these: +`pre` supports these: {: .-setup} +`ul` supports these: + + {: .-also-see} + Each sheet supports these metadata: ```yml +--- title: React.js category: React layout: 2017/sheet # 'default' | '2017/sheet' diff --git a/rdoc.md b/rdoc.md index 6eded24a4..a69f3af65 100644 --- a/rdoc.md +++ b/rdoc.md @@ -1,6 +1,7 @@ --- title: Rdoc category: Markup +layout: 2017/sheet --- ### Basic RDoc format @@ -17,31 +18,45 @@ category: Markup # @see http://url.com # # @return [true] if so - # - # == Definition lists - # - # list:: hi. - # +foo+:: parameterized - # - # == Definition lists - # [foo] also - # [bar] like this ### Inline - *bold* - _emphasized_ - +code+ +``` +*bold* +_emphasized_ ++code+ +``` - http://www.link.com - See Models::User@Examples - {Google}[http://google.com] +``` +http://www.link.com +See Models::User@Examples +{Google}[http://google.com] +``` ### Skip - def input # :nodoc: +```rb +def input # :nodoc: +``` - module MyModule # :nodoc: all +```rb +module MyModule # :nodoc: all +``` + +### Definition lists + +``` +# == Definition lists +# +# list:: hi. +# +foo+:: parameterized +``` + +``` +# == Definition lists +# [foo] also +# [bar] like this +``` ### Return types @@ -65,17 +80,26 @@ category: Markup ### Sections - # :section: Expiry methods - # methods relating to expiring +```rb +# :section: Expiry methods +# methods relating to expiring - def expire! - def expired? - ... +def expire! +def expired? +... +``` ### Using tomdoc - # :markup: TomDoc - # at the beginning ofthe file +``` +# :markup: TomDoc +``` -http://rdoc.rubyforge.org/RDoc/Markup.html -http://www.rubydoc.info/gems/yard/file/docs/GettingStarted.md +Plase this at the beginning of the file. + +## Also see +{: .-one-column} + +* +* +{: .-also-see} From 64898b046ed01daa004d8273a16d5b5056e6b74f Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sun, 27 Aug 2017 23:55:33 +0800 Subject: [PATCH 43/44] Update ES6 --- es6.md | 334 +++++++++++++++++++++++++++++++++------------------------ 1 file changed, 195 insertions(+), 139 deletions(-) diff --git a/es6.md b/es6.md index 347b9b28a..b44edfa3e 100644 --- a/es6.md +++ b/es6.md @@ -1,16 +1,11 @@ --- title: ES2015 category: JavaScript -layout: default-ad +layout: 2017/sheet +ads: true --- -## Stable in io.js - -New features you can use on [io.js](http://iojs.org/). -{:.brief-intro.center.top-space-0} - -### [Promises](http://babeljs.io/docs/learn-es2015/#promises) -For asynchronous programming. +### Promises ```js new Promise(fn) @@ -25,42 +20,57 @@ Promise.reject(/*...*/) Promise.resolve(/*...*/) ``` -### [Block scoping](http://babeljs.io/docs/learn-es2015/#let-const) -`let` is the new `var`. +For asynchronous programming. +See: [Promises](http://babeljs.io/docs/learn-es2015/#promises) + +### Block scoping ```js -// Block scoping (let) function fn () { - let x = 0; + let x = 0 if (true) { - let x = 1; // only inside this `if` + let x = 1 // only inside this `if` } } ``` +{: data-line="2,4"} ```js // Constants -const a = 1; +const a = 1 ``` -### [Backtick strings](http://babeljs.io/docs/learn-es2015/#template-strings) -Templates and multiline strings. +`let` is the new `var`. +See: [Let and const](http://babeljs.io/docs/learn-es2015/#let-const) + +### Backtick strings ```js // Interpolation -var message = `Hello ${name}`; +var message = `Hello ${name}` ``` ```js -// Multiline +// Multiline strings var str = ` hello world -`; +` ``` -### Other improvements -New string [methods](http://babeljs.io/docs/learn-es2015/#math-number-string-object-apis), [binary and octal](http://babeljs.io/docs/learn-es2015/#binary-and-octal-literals) numbers. +Templates and multiline strings. +See: [Template strings](http://babeljs.io/docs/learn-es2015/#template-strings) + +### Binary and octal literals + +```js +let bin = 0b1010010 +let oct = 0755 +``` + +See: [Binary and octal literals](http://babeljs.io/docs/learn-es2015/#binary-and-octal-literals) + +### New methods ```js // New string methods @@ -69,134 +79,43 @@ New string [methods](http://babeljs.io/docs/learn-es2015/#math-number-string-obj "\u1E9B\u0323".normalize("NFC") ``` -```js -// Binary/octal literals -var bin = 0b1010010; -var oct = 0755; -``` +See: [New methods](http://babeljs.io/docs/learn-es2015/#math-number-string-object-apis) -### [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) -Adds support for getters, setters, methods, shorthand. - -```js -// Short object syntax -// aka: `exports = { hello:hello, bye:bye }` -module.exports = { hello, bye }; -``` - -```js -App = { - // shorthand for `handler: handler` - handler, - - // methods - start() { - this.go(); - }, - - // getter/setter - get closed() { - return this.status === 'closed'; - }, - - // custom prototypes - __proto__: protoObj, - - // computed property names - [ "prop_"+n ]: 42 -}; -``` - -### [Generators](http://babeljs.io/docs/learn-es2015/#generators) -It's complicated. - -```js -function* idMaker() { - var id = 0; - while (true) { yield id++; } -} - -var gen = idMaker(); -gen.next().value // 0 -gen.next().value // 1 -gen.next().value // 2 -``` - -### [Classes](http://babeljs.io/docs/learn-es2015/#classes) -Syntactic sugar for prototypes. +### Classes ```js class Circle extends Shape { // ctor - constructor(radius) { - this.radius = radius; + constructor (radius) { + this.radius = radius } // methods - getArea() { - return Math.PI * 2 * this.radius; + getArea () { + return Math.PI * 2 * this.radius } // calling super methods - expand(n) { - return super.expand(n) * Math.PI; + expand (n) { + return super.expand(n) * Math.PI } // static methods static createFromDiameter(diameter) { - return new Circle(diameter / 2); + return new Circle(diameter / 2) } } ``` -
        +Syntactic sugar for prototypes. +See: [Classes](http://babeljs.io/docs/learn-es2015/#classes) -## Stable in Babel - -Available via the [Babel] transpiler. -{:.brief-intro.center.top-space-0} - -### [Module imports](http://babeljs.io/docs/learn-es2015/#modules) -`import` is the new `require()`. - -```js -// aka: require('...') -import 'helpers'; - -// aka: Express = require('...') -import Express from 'express'; - -// aka: indent = require('...').indent -import { indent } from 'helpers'; - -// aka: indent = require('...').indentSpaces -import { indentSpaces as indent } from 'helpers'; -``` - -### [Module exports](http://babeljs.io/docs/learn-es2015/#modules) -`export` is the new `module.exports =`. - -```js -// aka: module.exports = ... -export default function () { - // ... -}; - -// aka: exports.mymethod = ... -export function mymethod () { -}; - -// aka: exports.pi = ... -export var pi = 3.14159; -``` - -### [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring) -Supports for matching arrays and objects. +### Destructuring ```js // Destructuring assignment -var [first, last] = ["Nikola", "Tesla"]; -let {title, author} = { title: "The Silkworm", author: "R. Galbraith" }; +var [first, last] = ['Nikola', 'Tesla'] +let {title, author} = { title: 'The Silkworm', author: 'R. Galbraith' } ``` ```js @@ -212,16 +131,21 @@ function greet({ name, greeting }) { // ... } -greet({ name: "Larry", greeting: "Ahoy" }); +greet({ name: "Larry", greeting: "Ahoy" }) ``` -### [Function arguments](http://babeljs.io/docs/learn-es2015/#default-rest-spread) -Default, rest, spread. (iojs: `--harmony-rest-parameters`) +Supports for matching arrays and objects. +See: [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring) + +Functions +--------- + +### Function arguments ```js // Default arguments -function greet(name = "Jerry") { - return `Hello ${name}`; +function greet (name = "Jerry") { + return `Hello ${name}` } ``` @@ -229,7 +153,7 @@ function greet(name = "Jerry") { // Rest arguments function fn(x, ...y) { // y is an Array - return x * y.length; + return x * y.length } ``` @@ -238,30 +162,161 @@ function fn(x, ...y) { fn(...[1,2,3]) // same as fn(1,2,3) ``` -### [Fat arrows](http://babeljs.io/docs/learn-es2015/#arrows) -Like functions but with `this` preserved. +Default, rest, spread. +See: [Function arguments](http://babeljs.io/docs/learn-es2015/#default-rest-spread) + +### Fat arrows ```js // Fat arrows setTimeout(() => { ... -}); +}) ``` ```js // With arguments readFile('text.txt', (err, data) => { ... -}); +}) ``` ```js // Short syntax (no `return` without `{}`) numbers.map(n => n * 2) +// Same as: numbers.map(function (n) { return n * 2 }) ``` -### [For..of iteration](http://babeljs.io/docs/learn-es2015/#iterators-for-of) -For iterating through generators and arrays. +Like functions but with `this` preserved. +See: [Fat arrows](http://babeljs.io/docs/learn-es2015/#arrows) + +Objects +------- + +### Shorthand syntax + +```js +module.exports = { hello, bye } +// Same as `module.exports = { hello: hello, bye: bye }` +``` + +See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) + +### Methods + +```js +const App = { + start () { + console.log('running') + } +} +// Same as `App = { start: function () {···} }` +``` +{: data-line="2"} + +See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) + +### Getters and setters + +```js +const App = { + get closed () { + return this.status === 'closed' + }, + set closed (value) { + this.status === value ? 'closed' : 'open' + } +} +``` +{: data-line="2,5"} + +See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) + +### Computed property names + +```js +let event = 'click' +let handlers = { + ['on' + event]: true +} +// Same as `handlers = { 'onclick': true }` +``` +{: data-line="3"} + +See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) + +Modules +------- + +### Imports + +```js +// aka: require('···') +import 'helpers' +``` + +```js +// aka: Express = require('···').default || require('···') +import Express from 'express' +``` + +```js +// aka: indent = require('···').indent +import { indent } from 'helpers' +``` + +```js +// aka: indent = require('···').indentSpaces +import { indentSpaces as indent } from 'helpers' +``` + +`import` is the new `require()`. +See: [Module imports](http://babeljs.io/docs/learn-es2015/#modules) + +### Exports + +```js +// aka: module.exports.default = ··· +export default function () { + // ··· +} +``` + +```js +// aka: module.exports.mymethod = ··· +export function mymethod () { +} + +// aka: module.exports.pi = ··· +export var pi = 3.14159 +``` + +`export` is the new `module.exports`. +See: [Module exports](http://babeljs.io/docs/learn-es2015/#modules) + +Generators +---------- + +### Generators + +```js +function* idMaker() { + var id = 0 + while (true) { yield id++ } +} +``` + +```js +var gen = idMaker() +gen.next().value // 0 +gen.next().value // 1 +gen.next().value // 2 +``` + +It's complicated. +See: [Generators](http://babeljs.io/docs/learn-es2015/#generators) + +### For..of iteration ```js for (let i of iterable) { @@ -269,4 +324,5 @@ for (let i of iterable) { } ``` -[Babel]: http://babeljs.io +For iterating through generators and arrays. +See: [For..of iteration](http://babeljs.io/docs/learn-es2015/#iterators-for-of) From 4160473ff72e8fe02cb8ad0153a388a2afee8384 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Mon, 28 Aug 2017 00:01:37 +0800 Subject: [PATCH 44/44] Update ES6 --- _sass/2017/markdown/code.scss | 5 +++-- es6.md | 42 +++++++++++++++++++---------------- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss index 0be562a49..8fae182d1 100644 --- a/_sass/2017/markdown/code.scss +++ b/_sass/2017/markdown/code.scss @@ -32,10 +32,11 @@ // Line highlight .line-highlight { + transform: translate3d(0, 1px, 0); background: linear-gradient( to right, - rgba($base-b, 0.05) 75%, - rgba($base-b, 0)); + rgba($base-c, 0.05) 25%, + rgba($base-c, 0)); } // Line highlight ranges diff --git a/es6.md b/es6.md index b44edfa3e..411395215 100644 --- a/es6.md +++ b/es6.md @@ -131,7 +131,7 @@ function greet({ name, greeting }) { // ... } -greet({ name: "Larry", greeting: "Ahoy" }) +greet({ name: 'Larry', greeting: 'Ahoy' }) ``` Supports for matching arrays and objects. @@ -159,7 +159,7 @@ function fn(x, ...y) { ```js // Spread -fn(...[1,2,3]) // same as fn(1,2,3) +fn(...[1, 2, 3]) // same as fn(1, 2, 3) ``` Default, rest, spread. @@ -197,7 +197,7 @@ Objects ```js module.exports = { hello, bye } -// Same as `module.exports = { hello: hello, bye: bye }` +// Same as: module.exports = { hello: hello, bye: bye } ``` See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) @@ -210,7 +210,7 @@ const App = { console.log('running') } } -// Same as `App = { start: function () {···} }` +// Same as: App = { start: function () {···} } ``` {: data-line="2"} @@ -239,7 +239,7 @@ let event = 'click' let handlers = { ['on' + event]: true } -// Same as `handlers = { 'onclick': true }` +// Same as: handlers = { 'onclick': true } ``` {: data-line="3"} @@ -251,23 +251,28 @@ Modules ### Imports ```js -// aka: require('···') import 'helpers' +// aka: require('···') ``` ```js -// aka: Express = require('···').default || require('···') import Express from 'express' +// aka: Express = require('···').default || require('···') ``` ```js -// aka: indent = require('···').indent import { indent } from 'helpers' +// aka: indent = require('···').indent +``` + +```js +import * as Helpers from 'helpers' +// aka: Helpers = require('···') ``` ```js -// aka: indent = require('···').indentSpaces import { indentSpaces as indent } from 'helpers' +// aka: indent = require('···').indentSpaces ``` `import` is the new `require()`. @@ -276,22 +281,21 @@ See: [Module imports](http://babeljs.io/docs/learn-es2015/#modules) ### Exports ```js +export default function () { ··· } // aka: module.exports.default = ··· -export default function () { - // ··· -} ``` ```js +export function mymethod () { ··· } // aka: module.exports.mymethod = ··· -export function mymethod () { -} - -// aka: module.exports.pi = ··· -export var pi = 3.14159 ``` -`export` is the new `module.exports`. +```js +export const pi = 3.14159 +// aka: module.exports.pi = ··· +``` + +`export` is the new `module.exports`. See: [Module exports](http://babeljs.io/docs/learn-es2015/#modules) Generators @@ -300,7 +304,7 @@ Generators ### Generators ```js -function* idMaker() { +function* idMaker () { var id = 0 while (true) { yield id++ } }