diff --git a/Readme.md b/Readme.md index 9a46b6def..ee45564b0 100644 --- a/Readme.md +++ b/Readme.md @@ -37,8 +37,11 @@ Each sheet supports these metadata: title: React.js category: React layout: 2017/sheet # 'default' | '2017/sheet' -ads: false # Add this to disable ads + +# Optional: updated: 201708 # To show in the updated list (update _config.yml) +ads: false # Add this to disable ads +weight: -5 # lower number = higher in related posts list --- ``` diff --git a/_drafts/deprecated/cinema4d.md b/_drafts/deprecated/cinema4d.md new file mode 100644 index 000000000..a1bf5ced7 --- /dev/null +++ b/_drafts/deprecated/cinema4d.md @@ -0,0 +1,7 @@ +--- +title: Cinema4d +category: Apps +--- + + E R T : Move/rotate/scale + P : snapping diff --git a/_drafts/deprecated/eslint.md b/_drafts/deprecated/eslint.md new file mode 100644 index 000000000..7578fc37b --- /dev/null +++ b/_drafts/deprecated/eslint.md @@ -0,0 +1,18 @@ +--- +title: eslint +category: JavaScript libraries +--- + +```js +// "comma-dangle": "always" ("always-multiline", "never") +var foo = { + bar: "baz", + qux: "quux", +}; +var arr = [1,2,]; +``` + +``` +// "yoda": "always" ("never") +if ("red" === color) +``` diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss index 8fae182d1..3e4862338 100644 --- a/_sass/2017/markdown/code.scss +++ b/_sass/2017/markdown/code.scss @@ -50,7 +50,9 @@ } } -.MarkdownBody pre.-setup { +.MarkdownBody pre.-setup, +.MarkdownBody p.-setup, +.MarkdownBody ul.-setup { background: $gray-bg; } diff --git a/css-flexbox.md b/css-flexbox.md index f0c7b2a6a..aacacb7cc 100644 --- a/css-flexbox.md +++ b/css-flexbox.md @@ -1,135 +1,194 @@ --- title: CSS flexbox category: CSS +layout: 2017/sheet +updated: 201708.29 +weight: -3 --- - .container { - display: flex; - } +### Simple example - .container.vertical { - flex-direction: column; - } +```css +.container { + display: flex; +} +``` - .container > div { - flex: /* grow, shrink, basis */; - flex: 0 0 40px; /* fixed width */ - flex: 0 1 auto; /* dynamic width */ +```css +.container > div { + flex: 1 1 auto; +} +``` - order: 1; - } +### Container -### Full reference +```css +.container { +``` +{: .-setup} - .container { - display: flex; - display: inline-flex; +```css + display: flex; + display: inline-flex; +``` - flex-direction: row; /* ltr - default */ - flex-direction: row-reverse; /* rtl */ - flex-direction: column; /* top-bottom */ - flex-direction: column-reverse; /* bottom-top */ +```css + flex-direction: row; /* ltr - default */ + flex-direction: row-reverse; /* rtl */ + flex-direction: column; /* top-bottom */ + flex-direction: column-reverse; /* bottom-top */ +``` - flex-wrap: nowrap; /* one-line */ - flex-wrap: wrap; /* multi-line */ +```css + flex-wrap: nowrap; /* one-line */ + flex-wrap: wrap; /* multi-line */ +``` - align-items: flex-start; /* vertical-align to top */ - align-items: flex-end; /* vertical-align to bottom */ - align-items: center; /* vertical-align to center */ - align-items: stretch; /* same height on all (default) */ +```css + align-items: flex-start; /* vertical-align to top */ + align-items: flex-end; /* vertical-align to bottom */ + align-items: center; /* vertical-align to center */ + align-items: stretch; /* same height on all (default) */ +``` - justify-content: flex-start; /* horizontal alignment - default */ - justify-content: flex-end; - justify-content: center; - } +```css + justify-content: flex-start; /* horizontal alignment - default */ + justify-content: flex-end; + justify-content: center; +``` - .container > div { - flex: 1 0 0; - order: 1; - flex-grow: 0; +```css +} +``` +{: .-setup} + +### Child + +```css +.container > div { +``` +{: .-setup} + +```css + /* This: */ + flex: 1 0 auto; + + /* Is equivalent to this: */ + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; +``` + +```css + order: 1; +``` + +```css + align-self: flex-start; /* left */ + margin-left: auto; /* right */ +``` + +```css +} +``` +{: .-setup} - align-self: flex-start; /* left */ - margin-left: auto; /* right */ - } ## Tricks ### Vertical center - .container { - display: flex; - } +```css +.container { + display: flex; +} - .container > div { - width: 100px; - height: 100px; - margin: auto; - } +.container > div { + width: 100px; + height: 100px; + margin: auto; +} +``` ### Vertical center (2) - .container { - display: flex; - align-items: center; /* vertical */ - justify-content: center; /* horizontal */ - } +```css +.container { + display: flex; + align-items: center; /* vertical */ + justify-content: center; /* horizontal */ +} +``` ### Reordering - .container > .top { - order: 1; - } +```css +.container > .top { + order: 1; +} - .container > .bottom { - order: 2; - } +.container > .bottom { + order: 2; +} +``` ### Mobile layout -A fixed-heighttop bar and a dynamic-height content area. - .container { - display: flex; - flex-direction: column; - } +```css +.container { + display: flex; + flex-direction: column; +} - .container > .top { - flex: 0 0 100px; - } +.container > .top { + flex: 0 0 100px; +} - .container > .content { - height: 100px; - flex: 1 0 auto; - } +.container > .content { + height: 100px; + flex: 1 0 auto; +} +``` + +A fixed-height top bar and a dynamic-height content area. ### Table-like +```css +.container { + display: flex; +} + +/* the 'px' values here are just suggested percentages */ +.container > .checkbox { flex: 1 0 20px; } +.container > .subject { flex: 1 0 400px; } +.container > .date { flex: 1 0 120px; } +``` + This creates columns that have different widths, but size accordingly according to the circumstances. - .container { - display: flex; - } - - /* the 'px' values here are just suggested percentages */ - .container > .checkbox { flex: 1 0 20px; } - .container > .subject { flex: 1 0 400px; } - .container > .date { flex: 1 0 120px; } - ### Vertical + +```css +.container { + align-items: center; +} +``` + Vertically-center all items. - .container { - align-items: center; - } - ### Left and right - .menu > .left { align-self: flex-start; } - .menu > .right { align-self: flex-end; } +```css +.menu > .left { align-self: flex-start; } +.menu > .right { align-self: flex-end; } +``` -### References +## References +{: .-one-column} * [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) * [Ultimate flexbox cheatsheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html) diff --git a/css-system-font-stack.md b/css-system-font-stack.md index cb26b3dd5..4b76b6d0d 100644 --- a/css-system-font-stack.md +++ b/css-system-font-stack.md @@ -1,8 +1,11 @@ --- -title: "CSS: System font stack" +title: "CSS system font stack" category: CSS +layout: 2017/sheet --- +### System fonts + ```css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", @@ -10,6 +13,10 @@ font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Helvetica Neue", sans-serif; ``` +This uses whatever system font is available. See: [System shock - Designing Medium](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544) _(medium.com)_ + +### Explanation + | Font | OS | | ---- | -- | | `-apple-system` | OS X (10.11+), iOS (9+) | @@ -23,4 +30,7 @@ font-family: -apple-system, BlinkMacSystemFont, | `Droid Sans` | Android (until 3.2) | | `Helvetica Neue` | OS X (10.9) | -Reference: +## Reference +{: .-one-column} + +- diff --git a/flowtype.md b/flowtype.md new file mode 100644 index 000000000..adb1aaa58 --- /dev/null +++ b/flowtype.md @@ -0,0 +1,4 @@ +--- +title: Flow +redirect_to: /flow +--- diff --git a/gh-pages.md b/gh-pages.md index 56741fb56..6254f02d6 100644 --- a/gh-pages.md +++ b/gh-pages.md @@ -4,9 +4,9 @@ category: Jekyll layout: 2017/sheet --- -## Setting up a domain +## Custom domains -### Update your repo +### Custom domains ```sh $ echo "foobar.com" > CNAME @@ -15,6 +15,8 @@ $ git commit && git push Create a `CNAME` file with your domain on it. +See: [Setting up a custom domain](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/) _(github.com)_ + ### Set up your domain Subdomain (like www): @@ -30,7 +32,8 @@ Apex domains: Apex domains (alternative): {: .-setup} - A => 192.30.252.153, 192.30.252.154 + A => 192.30.252.153 + A => 192.30.252.154 ## References {: .-one-column} diff --git a/sh.md b/sh.md new file mode 100644 index 000000000..474e9e40c --- /dev/null +++ b/sh.md @@ -0,0 +1,5 @@ +--- +title: Shell scripting +category: CLI +redirect_to: /bash +---