From 1ba13f6578496fc6b9de64a019e86c0e420b78e8 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sun, 14 Jun 2015 20:58:52 -0700 Subject: [PATCH] Add more styles --- README.md | 6 +++--- docs/styling-strategy.md | 11 +++++------ index.html | 1 + lib/css/border.css | 1 + lib/css/color.css | 6 +++--- lib/css/flexbox.css | 4 ++++ lib/css/margin.css | 23 ++++++++++++++++------- 7 files changed, 33 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 8e0cd18f..561d7159 100644 --- a/README.md +++ b/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 diff --git a/docs/styling-strategy.md b/docs/styling-strategy.md index 66f03c92..2949bd75 100644 --- a/docs/styling-strategy.md +++ b/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/), diff --git a/index.html b/index.html index ad1229f5..89320e8a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ +
diff --git a/lib/css/border.css b/lib/css/border.css index ca903e3e..22fb60ae 100644 --- a/lib/css/border.css +++ b/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; } diff --git a/lib/css/color.css b/lib/css/color.css index f80f2da3..fe430ed4 100644 --- a/lib/css/color.css +++ b/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; } diff --git a/lib/css/flexbox.css b/lib/css/flexbox.css index a48cd2dc..171d199c 100644 --- a/lib/css/flexbox.css +++ b/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; } diff --git a/lib/css/margin.css b/lib/css/margin.css index 0cef1386..ea331e22 100644 --- a/lib/css/margin.css +++ b/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; }