diff --git a/_includes/head.html b/_includes/head.html
index 6459dbc70..a641ff664 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -2,7 +2,7 @@
-
+ {{ page.title }} cheatsheet
diff --git a/chunky_png.md b/chunky_png.md
index 47169b13d..94e8733f2 100644
--- a/chunky_png.md
+++ b/chunky_png.md
@@ -3,27 +3,27 @@ title: Chunky PNG
layout: default
---
-Loading
+### Loading
image = ChunkyPNG::Image.from_file('filename.png')
image = ChunkyPNG::Image.from_blob(File.read('file.png'))
image = ChunkyPNG::Image.from_io(io)
-Saving
+### Saving
image.save('filename.png')
File.open('newfile.png', 'wb') { |io| image.write(io) }
binary_string = image.to_blob
-Drawing
+### Drawing
image[0, 0] = ChunkyPNG::Color.rgba(255, 0,0, 128)
image.line(1, 1, 10, 1, ChunkyPNG::Color.from_hex('#aa007f'))
-Canvas
+### Canvas
crop(x, y, w, h)
-Transforms
+### Transforms
new_image = image.flip_horizontally.rotate_right
diff --git a/css-flexbox.md b/css-flexbox.md
index 02445390d..9e6a3c603 100644
--- a/css-flexbox.md
+++ b/css-flexbox.md
@@ -3,19 +3,23 @@ title: CSS flexbox
layout: default
---
-Basic
-
.container {
display: flex;
}
- .container > div {
- flex: 0 0 40px;
- flex: 0 1 auto;
- /* grow shrink basis */
+ .container.vertical {
+ flex-direction: column;
}
-Full
+ .container > div {
+ flex: /* grow, shrink, basis */;
+ flex: 0 0 40px; /* fixed width */
+ flex: 0 1 auto; /* dynamic width */
+
+ order: 1;
+ }
+
+### Full reference
.container {
display: flex;
@@ -23,16 +27,16 @@ Full
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 */
- align-items: flex-start; /* vertical alignment - default */
- align-items: flex-end;
- align-items: center;
+ align-items: flex-start; /* vertically-align to top */
+ align-items: flex-end; /* vertically-align to bottom */
+ align-items: center; /* vertically-align to center */
+ align-items: stretch; /* same height on all (default) */
justify-content: flex-start; /* horizontal alignment - default */
justify-content: flex-end;
@@ -45,6 +49,8 @@ Full
flex-grow: 0;
}
+## Tricks
+
### Vertical center
.container {
@@ -59,16 +65,18 @@ Full
### Reordering
- .container > .top {
- order: 1;
- }
-
- .container > .bottom {
- order: 2;
- }
+ .container > .top {
+ order: 1;
+ }
+
+ .container > .bottom {
+ order: 2;
+ }
### Mobile layout
+A fixed-heighttop bar and a dynamic-height content area.
+
.container {
display: flex;
flex-direction: column;
@@ -83,3 +91,29 @@ Full
flex: 1 0 auto;
}
+### Table-like
+
+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
+
+Vertically-center all items.
+
+ .container {
+ align-items: center;
+ }
+
+### References
+
+ * [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/harveyjs.md b/harveyjs.md
index b3ef32503..b4fa12d3b 100644
--- a/harveyjs.md
+++ b/harveyjs.md
@@ -3,10 +3,6 @@ title: Harvey.js
layout: default
---
-### Harvey
-
- http://harvesthq.github.io/harvey/harvey.js
-
### Usage
Harvey.attach('(min-width: 600px)', {
@@ -17,3 +13,8 @@ layout: default
off: function () {
}
})
+
+### References
+
+ * http://harvesthq.github.io/harvey/harvey.js
+