Add more styles

README.md

@@ -14,9 +14,9 @@ It includes the following components:
 And uses a [styling strategy](docs/styling-strategy.md) that maps inline styles
 to single-purpose CSS rules.
 
-This proof of concept uses a ~3KB (gzipped) precomputed CSS bundle; a complete
-implementation is likely to produce a slightly larger CSS file and fewer inline
-styles.
+This proof of concept uses a CSS bundle (~3.7KB gzipped) of 300+ precomputed
+declarations. A more sophisticated implementation is likely to produce a
+slightly larger CSS file and fewer inline styles.
 
 ## Components
 

docs/styling-strategy.md

@@ -57,7 +57,7 @@ files. Each new component adds new rules to the stylesheet.
 React Web SDK includes a proof-of-concept for the strategy of automatically
 mapping unique declarations to declarations, via a unique selector for each
 declaration. This strategy results in smaller CSS files because an application
-has fewer unique declarations than total declarations.  Creating a new
+has fewer unique declarations than total declarations. Creating a new
 component with no new unique declarations results in no change to the CSS file.
 
 For example:
@@ -90,11 +90,10 @@ And is backed by:
 ._pqrst { justify-content: center }
 ```
 
-The current implementation uses a precomputed CSS library – 200+
-single-declaration rules, with obfuscated selectors. This handles a signficant
-portion of possible declarations. But a build-time implementation would produce
-more accurate CSS files and fall through to inline styles significantly less
-often.
+The current implementation uses a precomputed CSS library of single-declaration
+rules, with obfuscated selectors. This handles a signficant portion of possible
+declarations. But a build-time implementation would produce more accurate CSS
+files and fall through to inline styles significantly less often.
 
 
 (CSS libraries like [Atomic CSS](http://acss.io/),

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="dist/react-web-sdk.css">
 <div id="react-root"></div>
 <script src="dist/example.js"></script>

lib/css/border.css

@@ -1,5 +1,6 @@
 .borderColor-currentcolor { border-color: currentcolor; }
 .borderColor-transparent { border-color: transparent; }
+.borderColor-white { border-color: white; }
 
 .borderStyle-dotted { border-style: dotted; }
 .borderStyle-dashed { border-style: dashed; }

lib/css/color.css

@@ -1,4 +1,4 @@
-.color-\#fff { color: #fff; }
-.color-\#000 { color: #000; }
-.color-transparent { color: transparent; }
+.color-black { color: black; }
 .color-inherit { color: inherit; }
+.color-transparent { color: transparent; }
+.color-white { color: white; }

lib/css/flexbox.css

@@ -37,6 +37,8 @@
 .flexGrow-7 { flex-grow: 7; }
 .flexGrow-8 { flex-grow: 8; }
 .flexGrow-9 { flex-grow: 9; }
+.flexGrow-10 { flex-grow: 10; }
+.flexGrow-11 { flex-grow: 11; }
 
 .flexShrink-0 { flex-shrink: 0; }
 .flexShrink-1 { flex-shrink: 1; }
@@ -48,6 +50,8 @@
 .flexShrink-7 { flex-shrink: 7; }
 .flexShrink-8 { flex-shrink: 8; }
 .flexShrink-9 { flex-shrink: 9; }
+.flexShrink-10 { flex-shrink: 10; }
+.flexShrink-11 { flex-shrink: 11; }
 
 .flexWrap-nowrap { flex-wrap: nowrap; }
 .flexWrap-wrap { flex-wrap: wrap; }

lib/css/margin.css

@@ -1,13 +1,22 @@
 .margin-0 { margin: 0; }
 .margin-auto { margin: auto; }
-.marginTop-0 { margin-top: 0; }
+
+.marginBottom-auto { margin-bottom: auto; }
+.marginLeft-auto { margin-left: auto; }
+.marginRight-auto { margin-right: auto; }
 .marginTop-auto { margin-top: auto; }
 
-.marginRight-0 { margin-right: 0; }
-.marginRight-auto { margin-right: auto; }
-
 .marginBottom-0 { margin-bottom: 0; }
-.marginBottom-auto { margin-bottom: auto; }
-
 .marginLeft-0 { margin-left: 0; }
-.marginLeft-auto { margin-left: auto; }
+.marginRight-0 { margin-right: 0; }
+.marginTop-0 { margin-top: 0; }
+
+.marginBottom-1em { margin-bottom: 1em; }
+.marginLeft-1em { margin-left: 1em; }
+.marginRight-1em { margin-right: 1em; }
+.marginTop-1em { margin-top: 1em; }
+
+.marginBottom-1rem { margin-bottom: 1rem; }
+.marginLeft-1rem { margin-left: 1rem; }
+.marginRight-1rem { margin-right: 1rem; }
+.marginTop-1rem { margin-top: 1rem; }