From 8dbfdc2598e28bebffe108800da63808f2a715e9 Mon Sep 17 00:00:00 2001
From: mg901 <mgreen097@gmail.com>
Date: Fri, 8 Feb 2019 14:46:15 +0300
Subject: [PATCH] feat: add an API description to the readme

---
 README.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/README.md b/README.md
index 7a3eafe8..ef8d8138 100644
--- a/README.md
+++ b/README.md
@@ -122,6 +122,52 @@ const Component = styled.div`
 </ThemeProvider>;
 ```
 
+## API
+
+  <strong>All incoming values are converted to em.</strong>
+
+
+  For example, let's take default values of breakpoints.
+
+### up
+
+  ```js
+  // (tablets, 768px and up)
+  up('tablet') => '@media (min-width: 768px) { ... }'
+  ```
+
+### down
+
+  We occasionally use media queries that go in the other direction (the given screen size or smaller):
+  
+```js
+  // (tablets, from 768px to 991.98px)
+  down('tablet') => '@media (max-width: 991.98px) { ... }'
+  ```
+
+
+<br/>
+
+  >Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [min- and max- prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
+
+<br/>
+
+
+Similarly, media queries may span multiple breakpoint widths:
+
+### between
+
+  ```js
+  // (from tablet to desktop )
+  between('tablet', 'desktop') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'
+  ```
+
+### only
+
+  ```js
+  only('tablet') => '@media (min-width: 768px) and (max-width: 991.98px) { ... }'
+  ```
+
 ## License
 
 MIT License