Update more sheets
This commit is contained in:
parent
26384b35ad
commit
e116ff32bf
|
@ -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
|
||||
---
|
||||
```
|
||||
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Cinema4d
|
||||
category: Apps
|
||||
---
|
||||
|
||||
E R T : Move/rotate/scale
|
||||
P : snapping
|
|
@ -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)
|
||||
```
|
|
@ -50,7 +50,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
.MarkdownBody pre.-setup {
|
||||
.MarkdownBody pre.-setup,
|
||||
.MarkdownBody p.-setup,
|
||||
.MarkdownBody ul.-setup {
|
||||
background: $gray-bg;
|
||||
}
|
||||
|
||||
|
|
227
css-flexbox.md
227
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)
|
||||
|
|
|
@ -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: <https://medium.com/design/system-shock-6b1dc6d6596f>
|
||||
## Reference
|
||||
{: .-one-column}
|
||||
|
||||
- <https://medium.com/design/system-shock-6b1dc6d6596f>
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: Flow
|
||||
redirect_to: /flow
|
||||
---
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue