From 1e0f9716ef958c566941e1ad467ee2233ac51409 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Mon, 9 Jun 2014 15:12:20 +0800 Subject: [PATCH] Various updates. --- _includes/head.html | 2 +- chunky_png.md | 10 +++---- css-flexbox.md | 70 +++++++++++++++++++++++++++++++++------------ harveyjs.md | 9 +++--- 4 files changed, 63 insertions(+), 28 deletions(-) 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 +