diff --git a/_index.html b/_index.html new file mode 100644 index 00000000000..58eaa647bb2 --- /dev/null +++ b/_index.html @@ -0,0 +1,12 @@ +React Native | Build Native Apps Using React
React Native
React Native
Build native apps using React
Learn more about React Native

\ No newline at end of file diff --git a/css/react-native.css b/css/react-native.css new file mode 100644 index 00000000000..b7bb73adaae --- /dev/null +++ b/css/react-native.css @@ -0,0 +1,991 @@ +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 300; + color: #484848; + line-height: 1.28; +} + +body { + background-color: #F5FCFF; +} + +p { + margin: 0 0 10px; +} + +.subHeader { + font-size: 21px; + font-weight: 200; + line-height: 30px; + margin-bottom: 10px; +} + +em { + font-style: italic; +} + +h1, h2, h3, h4, h5, h6 { + margin: 10px 0; + font-family: inherit; + font-weight: bold; + line-height: 20px; + color: inherit; + text-rendering: optimizelegibility; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + font-weight: normal; + color: #7b7b7b; +} + +h1, h2, h3 { + line-height: 40px; +} + +h1 { + font-size: 39px; +} + +h2 { + font-size: 31px; +} + +h3 { + font-size: 23px; +} + +h4 { + font-size: 17px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 11px; +} + +h1 small { + font-size: 24px; +} + +h2 small { + font-size: 18px; +} + +h3 small { + font-size: 16px; +} + +h4 small { + font-size: 14px; +} + +ul, ol { + margin: 0 0 10px 25px; + padding: 0; +} + +ul ul, ul ol, ol ol, ol ul { + margin-bottom: 0; +} + +li { + line-height: 20px; +} + +a { + color: #05A5D1; + text-decoration: none; +} + +a:hover, a:focus { + color: #0485A9; + text-decoration: underline; +} + +a:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.center { + text-align: center; +} + +html * { + color-profile: sRGB; + rendering-intent: auto; +} + +.prism { + white-space: pre-wrap; + font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace; + font-size: 13px; + line-height: 20px; + border-left: 4px solid #05A5D1; + padding: 5px 10px; + margin-left: 20px; + background-color: rgba(5, 165, 209, 0.05); +} + +.prism + .prism { + margin-top: 10px; +} + +.token.keyword { + color: #1990B8; +} + +.token.string, .token.regex { + color: #2F9C0A; +} + +.token.boolean, .token.number { + color: #C92C2C; +} + +.token.comment { + color: #7D8B99; +} + +.side-by-side { + overflow: hidden; +} + +.side-by-side > div { + width: 460; + margin-left: 0; + float: left; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: none; + margin: 0; + padding: 0; +} + +.left { + float: left; +} + +.right { + float: right; +} + +.container { + padding-top: 50px; + min-width: 960px; +} + +.wrap { + width: 960px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; +} + +.skinnyWrap { + width: 690px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; +} + +hr { + height: 0; + border-top: 1px solid #ccc; + border-bottom: 1px solid #eee; +} + +ul, li { + margin-left: 20px; +} + +h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor { + margin-top: -50px; + position: absolute; +} + +h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link { + visibility: visible; +} + +.hash-link { + color: #aaa; + visibility: hidden; +} + +.nav-main { + *zoom: 1; + background: #3B3738; + color: #fafafa; + position: fixed; + top: 0; + height: 50px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + width: 100%; + z-index: 100; +} + +.nav-main:before, .nav-main:after { + content: " "; + display: table; +} + +.nav-main:after { + clear: both; +} + +.nav-main a { + color: #e9e9e9; + text-decoration: none; +} + +.nav-main .nav-site { + float: right; + margin: 0; +} + +.nav-main .nav-site li { + margin: 0; +} + +.nav-main .nav-site a { + padding: 0 8px; + text-transform: uppercase; + letter-spacing: 1px; + line-height: 50px; + display: inline-block; + height: 50px; + color: #aaa; +} + +.nav-main .nav-site a:hover { + color: #fafafa; +} + +.nav-main .nav-site a.active { + color: #fafafa; + border-bottom: 3px solid #05A5D1; + background: #333; +} + +.nav-main .nav-home { + font-size: 24px; + line-height: 50px; +} + +.nav-home img { + vertical-align: -7px; + margin-right: 7px; + width: 30px; + height: 30px; +} + +.nav-main ul { + display: inline; +} + +.nav-main li { + display: inline; +} + +.hero { + background: #05A5D1; + padding: 50px 0; + color: #FDF3E7; + font-weight: 300; +} + +.hero .text { + font-size: 64px; + text-align: center; +} + +.hero .minitext { + font-size: 16px; + text-align: center; + text-transform: uppercase; +} + +.hero strong { + font-weight: 400; +} + +.buttons-unit { + margin-top: 60px; + text-align: center; +} + +.buttons-unit a { + color: #FA6900; +} + +.buttons-unit .button { + font-size: 24px; + background: #05A5D1; + color: #fafafa; +} + +.buttons-unit .button:active { + background: #0485A9; +} + +.buttons-unit.downloads { + margin: 30px 0; +} + +.nav-docs { + color: #2d2d2d; + font-size: 14px; + float: left; + width: 210px; +} + +.nav-docs ul { + list-style: none; + margin: 0; +} + +.nav-docs ul ul { + margin-left: 20px; +} + +.nav-docs li { + margin: 0; +} + +.nav-docs h3 { + text-transform: uppercase; + font-size: 14px; +} + +.nav-docs a { + color: #666; + display: block; +} + +.nav-docs a:hover { + text-decoration: none; + color: #0485A9; +} + +.nav-docs a.active { + color: #0485A9; +} + +.nav-docs .nav-docs-section { + border-bottom: 1px solid #ccc; + border-top: 1px solid #eee; + padding: 12px 0; +} + +.nav-docs .nav-docs-section:first-child { + padding-top: 0; + border-top: 0; +} + +.nav-docs .nav-docs-section:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +.nav-blog li { + margin-bottom: 5px; +} + +.home-section { + margin: 50px 0; +} + +.home-section ol { + margin-left: 0; +} + +.home-divider { + border-top-color: #bbb; + margin: 0 auto; + width: 400px; +} + +.marketing-row { + *zoom: 1; + margin: 50px 0; +} + +.marketing-row:before, .marketing-row:after { + content: " "; + display: table; +} + +.marketing-row:after { + clear: both; +} + +.marketing-col { + float: left; + margin-left: 40px; + width: 280px; +} + +.marketing-col h3 { + color: #2d2d2d; + font-size: 24px; + font-weight: normal; + text-transform: uppercase; +} + +.marketing-col p { + font-size: 16px; +} + +.marketing-col:first-child { + margin-left: 0; +} + +#examples h3, .home-presentation h3 { + color: #2d2d2d; + font-size: 24px; + font-weight: normal; + margin-bottom: 5px; +} + +#examples p { + margin: 0 0 25px 0; + max-width: 600px; +} + +#examples .example { + margin-top: 60px; +} + +#examples #todoExample { + font-size: 14px; +} + +#examples #todoExample ul { + list-style-type: square; + margin: 0 0 10px 0; +} + +#examples #todoExample input { + border: 1px solid #ccc; + font: 14px proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; + padding: 3px; + width: 150px; +} + +#examples #todoExample button { + font: 14px proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-left: 5px; + padding: 4px 10px; +} + +#examples #markdownExample textarea { + border: 1px solid #ccc; + font: 14px proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-bottom: 10px; + padding: 5px; +} + +.home-bottom-section { + margin-bottom: 100px; +} + +.docs-nextprev { + *zoom: 1; +} + +.docs-nextprev:before, .docs-nextprev:after { + content: " "; + display: table; +} + +.docs-nextprev:after { + clear: both; +} + +.docs-prev { + float: left; +} + +.docs-next { + float: right; +} + +footer { + font-size: 13px; + font-weight: 600; + padding-top: 36px; + padding-bottom: 18px; + overflow: auto; +} + +section.black content { + padding-bottom: 18px; +} + +.blogContent { + *zoom: 1; + padding-top: 20px; +} + +.blogContent:before, .blogContent:after { + content: " "; + display: table; +} + +.blogContent:after { + clear: both; +} + +.blogContent blockquote { + padding: 5px 15px; + margin: 20px 0; + background-color: #f8f5ec; + border-left: 5px solid #f7ebc6; +} + +.documentationContent { + *zoom: 1; + padding-top: 20px; +} + +.documentationContent:before, .documentationContent:after { + content: " "; + display: table; +} + +.documentationContent:after { + clear: both; +} + +.documentationContent .subHeader { + font-size: 24px; +} + +.documentationContent h2 { + margin-top: 30px; +} + +.documentationContent blockquote { + padding: 15px 30px 15px 15px; + margin: 20px 0; + background-color: rgba(204, 122, 111, 0.1); + border-left: 5px solid rgba(191, 87, 73, 0.2); +} + +.documentationContent blockquote h4 { + margin-top: 0; +} + +.documentationContent blockquote p { + margin-bottom: 0; +} + +.documentationContent blockquote p:first-child { + font-weight: bold; + font-size: 17.5px; + line-height: 20px; + margin-top: 0; + text-rendering: optimizelegibility; +} + +.docs-prevnext { + padding-top: 40px; + padding-bottom: 40px; +} + +.button { + background: -webkit-linear-gradient( #9a9a9a, #646464); + background: linear-gradient( #9a9a9a, #646464); + border-radius: 4px; + padding: 8px 16px; + font-size: 18px; + font-weight: 400; + margin: 0 12px; + display: inline-block; + color: #fafafa; + text-decoration: none; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + text-decoration: none; +} + +.button:hover { + text-decoration: none; +} + +.button:active { + box-shadow: none; +} + +.hero .button { + box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3); +} + +.button.blue { + background: -webkit-linear-gradient( #77a3d2, #4783c2); + background: linear-gradient( #77a3d2, #4783c2); +} + +.row { + padding-bottom: 4px; +} + +.row .span4 { + width: 33.33%; + display: table-cell; +} + +.row .span8 { + width: 66.66%; + display: table-cell; +} + +.row .span6 { + width: 50%; + display: table-cell; +} + +p { + margin: 10px 0; +} + +.highlight { + padding: 10px; + margin-bottom: 20px; +} + +figure { + text-align: center; +} + +.inner-content { + float: right; + width: 650px; +} + +.nosidebar .inner-content { + float: none; + margin: 0 auto; +} + +.post-list-item+.post-list-item { + margin-top: 60px; +} + +small code, li code, p code { + color: #555; + background-color: rgba(0, 0, 0, 0.04); + padding: 1px 3px; +} + +.playground { + *zoom: 1; +} + +.playground:before, .playground:after { + content: " "; + display: table; +} + +.playground:after { + clear: both; +} + +.playground-tab { + border-bottom: none !important; + border-radius: 3px 3px 0 0; + padding: 6px 8px; + font-size: 12px; + font-weight: bold; + color: #c2c0bc; + background-color: #f1ede4; + display: inline-block; + cursor: pointer; +} + +.playgroundCode, .playground-tab, .playgroundPreview { + border: 1px solid rgba(16, 16, 16, 0.1); +} + +.playground-tab-active { + color: #222; +} + +.playgroundCode { + border-radius: 0 3px 3px 3px; + float: left; + overflow: hidden; + width: 600px; +} + +.playgroundPreview { + background-color: white; + border-radius: 3px; + float: right; + padding: 15px 20px; + width: 280px; +} + +.playgroundError { + color: #c5695c; + font-size: 15px; +} + +.MarkdownEditor textarea { + width: 100%; + height: 100px; +} + +.hll { + background-color: #f7ebc6; + border-left: 5px solid #f7d87c; + display: block; + margin-left: -14px; + margin-right: -14px; + padding-left: 9px; +} + +.highlight .javascript .err { + background-color: transparent; + color: inherit; +} + +.highlight { + position: relative; + margin-bottom: 14px; + padding: 30px 14px 14px; + border: none; + border-radius: 0; + overflow: auto; +} + +.highlight pre { + padding: 0; + margin-top: 0; + margin-bottom: 0; + background-color: transparent; + border: 0; +} + +.highlight pre code { + background: none; + font-size: inherit; + padding: 0; +} + +.highlight pre .lineno { + display: inline-block; + width: 22px; + padding-right: 5px; + margin-right: 10px; + color: #bebec5; + text-align: right; +} + +.highlight:after { + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + color: #c2c0bc; + background-color: #f1ede4; + content: "Code"; +} + +.downloadCenter { + text-align: center; + margin-top: 20px; + margin-bottom: 25px; +} + +.downloadSection:hover { + text-decoration: none !important; +} + +@media screen and (max-width: 960px) { + .nav-main { + position: static; + } + + .container { + padding-top: 0; + } +} + +.post { + margin-bottom: 30px; +} + +.pagination { + margin-bottom: 30px; + width: 100%; + overflow: hidden; +} + +.pagination .next { + float: right; +} + +div[data-twttr-id] iframe { + margin: 10px auto !important; +} + +.three-column { + *zoom: 1; +} + +.three-column:before, .three-column:after { + content: " "; + display: table; +} + +.three-column:after { + clear: both; +} + +.three-column>ul { + float: left; + margin-left: 30px; + width: 190px; +} + +.three-column > ul:first-child { + margin-left: 20px; +} + +.home-why { + margin-top: 25px; +} + +.home-why h3 { + text-align: center; +} + +.home-why .blurb { + margin-bottom: 20px; + text-align: center; +} + +.home-why .list { + margin: 0 auto; + max-width: 460px; +} + +.home-getting-started { + width: 500px; + margin: 20px auto 40px auto; +} + +.home-getting-started h3 { + text-align: center; +} + + +.props { + background-color: hsl(198, 100%, 96%); +} + +.prop:nth-child(2n) { + background-color: hsl(198, 100%, 94%); +} + +.propTitle { + font-weight: bold; +} + +.prop { + padding: 5px 10px; +} + +.propType { + font-weight: normal; + font-size: 15px; +} + + +#content { + display: none; +} + +@media only screen and (max-device-width : 1024px) { + #content { + display: inline; + } + + .container { + min-width: 0; + overflow: auto; + } + .wrap { + width: auto; + } + .home-getting-started { + width: auto; + } + .inner-content { + width: auto; + float: none; + } + .marketing-col { + margin-left: 0; + float: none; + margin-bottom: 30px; + text-align: center; + } + .home-section, .marketing-row { + margin: 0; + } + .nav-main .nav-site a { + padding: 0 4px; + } + .nav-main .wrap { + padding: 0 2px 0 4px; + } + .home-divider { + display: none; + } + .hero { + padding: 10px 0 30px 0; + } + .prism { + padding: 4px 8px; + margin-left: -12px; + font-size: 11px; + } + .nav-docs .nav-docs-section { + border: none; + padding: 0; + } + .nav-docs h3 { + margin: 0; + } + .nav-docs { + float: none; + width: auto; + margin-top: -20px; + margin-bottom: 20px; + } + h1 { + font-size: 30px; + line-height: 30px; + } + ol { + margin: 0; + } +} + diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 00000000000..5c125de5d89 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000000..398e5df3f88 Binary files /dev/null and b/img/logo.png differ diff --git a/img/opengraph.png b/img/opengraph.png new file mode 100644 index 00000000000..43fa5c2bff8 Binary files /dev/null and b/img/opengraph.png differ diff --git a/img/react-native.png b/img/react-native.png new file mode 100644 index 00000000000..a339b1f25a2 Binary files /dev/null and b/img/react-native.png differ diff --git a/support.html b/support.html new file mode 100644 index 00000000000..f986d185567 --- /dev/null +++ b/support.html @@ -0,0 +1,12 @@ +React Native | Build Native Apps Using React
React Native

Need help?

React Native is worked on full-time by Facebook's product infrastructure user interface engineering teams. They're often around and available for questions.

Stack Overflow #

Many members of the community use Stack Overflow to ask questions. Read through the existing questions tagged with reactnative or ask your own!

IRC #

Many developers and users idle on Freenode.net's IRC network in #reactnative on freenode.

Twitter #

#reactnative hash tag on Twitter is used to keep up with the latest React Native news.

\ No newline at end of file