From 4820503a33423ae209ec5ab54065bf2c3669e6c6 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Sun, 5 Mar 2017 00:22:29 +0800
Subject: [PATCH] Add cssnext

---
 _misc/git-one-liners.md |   7 ++
 cssnext.md              | 144 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 151 insertions(+)
 create mode 100644 _misc/git-one-liners.md
 create mode 100644 cssnext.md

diff --git a/_misc/git-one-liners.md b/_misc/git-one-liners.md
new file mode 100644
index 00000000000..eacc74c450a
--- /dev/null
+++ b/_misc/git-one-liners.md
@@ -0,0 +1,7 @@
+---
+title: Git one-liners
+---
+
+When did someone work
+
+    git log --all --author='Rico' --pretty="%ai" | awk '{ print $1 }' | sort | uniq
diff --git a/cssnext.md b/cssnext.md
new file mode 100644
index 00000000000..1272d499a07
--- /dev/null
+++ b/cssnext.md
@@ -0,0 +1,144 @@
+---
+title: cssnext
+category: JavaScript libraries
+---
+
+## Nesting
+
+```css
+.class-name {
+  & .nesting { ... }      // direct nesting starts with &
+  @nest span & { ... }    // complex nesting
+  @media (min-width: 30em) { ... }
+}
+```
+
+## Variables
+
+```css
+:root {
+  --text-color: #30333a;
+}
+
+body {
+  background: var(--text-color);
+  background: color(var(--text-color) shade(30%));
+}
+```
+
+## Colors
+
+Also see [colorme.io](http://colorme.io/).
+
+```css
+a {
+  /* Adjustments */
+  color: color(red alpha(-10%));
+  color: color(red tint(-10%));    /* lighten */
+  color: color(red shade(-10%));   /* darken */
+
+  /* Absolute */
+  color: color(red alpha(50%));
+  color: color(red hue(225));
+  color: color(red saturation(100%));
+  color: color(red lightness(50%));
+
+  color: gray(33);       /* rgb(33, 33, 33) */
+  color: gray(33%);      /* rgb(84, 84, 84) */
+  color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
+  color: #0000ff80;      /* rgba(0, 0, 255, 0.5) */
+
+  color: hwb(90, 0%, 0%, 0.5);     /* like hsl() but easier for humans */
+  color: hsl(90deg 90% 70%%);      /* hsl(180, 90%, 70%) -- supports deg */
+  color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
+  color: rgb(30 60 90 / 30%);      /* rgba(30, 60, 90, 0.3) */
+}
+```
+
+## Mixins
+
+```css
+:root {
+  --centered: {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  };
+}
+
+.centered {
+  @apply --centered;
+}
+```
+
+## Custom media queries
+
+```css
+@custom-media --viewport-medium (width <= 50rem);
+@media (--viewport-medium) { ... }
+```
+
+## Media query ranges
+
+```css
+@media (width >= 500px) { ... }    /* (min-width: 500px) */
+```
+
+## Custom selectors
+
+```css
+@custom-selector :--button button, input[type='submit'], input[type='button'];
+@custom-selector :--enter :hover, :focus;
+
+:--button { ... }
+:--button:--enter { ... }
+```
+
+## Property fallbacks
+
+```css
+/* font-feature-settings fallback */
+h2 { font-variant-caps: small-caps; }
+table { font-variant-numeric: lining-nums; }
+
+div { filter: blur(4px); }            /* svg filter fallback */
+div { overflow-wrap: break-word; }    /* word-wrap fallback */
+```
+
+## Reset
+
+```css
+div {
+  all: initial;
+}
+
+/* Sets animation, background, margin, padding, and so on */
+```
+
+## Future classes
+
+```css
+:any-link { ... }         /* :link, :visited */
+p:matches(.a, .b) { ... } /* p.a, p.b */
+p:not(.a, .b) { ... }     /* p:not(.a), p:not(.b) */
+a::before { ... }         /* a:before -- for IE compatibility */
+[frame=hsides i] { ... }  /* [frame=hsides] -- but case insensitive */
+```
+
+## Autoprefixing
+
+```css
+div {
+  display: flex;
+}
+
+/*
+ * display: -webkit-box;
+ * display: -ms-flexbox;
+ * display: flex;
+ */
+```
+
+## References
+
+Based on cssnext 2.9.0. See: <http://cssnext.io/features/>