From 5c43f9ec65deb0a717b3ea618957528cbd6a1be4 Mon Sep 17 00:00:00 2001 From: Joe Critchley Date: Fri, 30 Jun 2017 17:57:08 +0100 Subject: [PATCH] Added css and templates for new docs --- docs/.ruby-version | 1 + www/src/css/_article.scss | 139 ++++++++++++++ www/src/css/_article_nav.scss | 37 ++++ www/src/css/_aux_list.scss | 18 ++ www/src/css/_below_nav.scss | 11 ++ www/src/css/_codemirror_theme.scss | 94 ++++++++++ www/src/css/_cta_group.scss | 21 +++ www/src/css/_cta_link.scss | 16 ++ www/src/css/_fonts.scss | 247 +++++++++++++++++++++++++ www/src/css/_footer.scss | 92 ++++++++++ www/src/css/_header.scss | 164 +++++++++++++++++ www/src/css/_hero.scss | 57 ++++++ www/src/css/_home_example.scss | 110 +++++++++++ www/src/css/_home_tabs.scss | 84 +++++++++ www/src/css/_logo.scss | 26 +++ www/src/css/_nav.scss | 57 ++++++ www/src/css/_note.scss | 13 ++ www/src/css/_prefooter_nav.scss | 7 + www/src/css/_primary_btn.scss | 23 +++ www/src/css/_site.scss | 11 ++ www/src/css/_traverse_nav.scss | 31 ++++ www/src/css/_underline.scss | 13 ++ www/src/css/_vert_nav.scss | 77 ++++++++ www/src/css/_wrapper.scss | 14 ++ www/src/css/main.scss | 70 +++++++ www/src/css/setup/_breakpoint.scss | 126 +++++++++++++ www/src/css/setup/_grid_helpers.scss | 118 ++++++++++++ www/src/css/setup/_mixins.scss | 1 + www/src/css/setup/_reset.scss | 37 ++++ www/src/css/setup/_variables.scss | 16 ++ www/src/templates/article.html | 263 ++++++++++++++++++++++++++ www/src/templates/index.html | 264 +++++++++++++++++++++++++++ 32 files changed, 2258 insertions(+) create mode 100644 docs/.ruby-version create mode 100644 www/src/css/_article.scss create mode 100644 www/src/css/_article_nav.scss create mode 100644 www/src/css/_aux_list.scss create mode 100644 www/src/css/_below_nav.scss create mode 100644 www/src/css/_codemirror_theme.scss create mode 100644 www/src/css/_cta_group.scss create mode 100644 www/src/css/_cta_link.scss create mode 100644 www/src/css/_fonts.scss create mode 100644 www/src/css/_footer.scss create mode 100644 www/src/css/_header.scss create mode 100644 www/src/css/_hero.scss create mode 100644 www/src/css/_home_example.scss create mode 100644 www/src/css/_home_tabs.scss create mode 100644 www/src/css/_logo.scss create mode 100644 www/src/css/_nav.scss create mode 100644 www/src/css/_note.scss create mode 100644 www/src/css/_prefooter_nav.scss create mode 100644 www/src/css/_primary_btn.scss create mode 100644 www/src/css/_site.scss create mode 100644 www/src/css/_traverse_nav.scss create mode 100644 www/src/css/_underline.scss create mode 100644 www/src/css/_vert_nav.scss create mode 100644 www/src/css/_wrapper.scss create mode 100644 www/src/css/main.scss create mode 100644 www/src/css/setup/_breakpoint.scss create mode 100644 www/src/css/setup/_grid_helpers.scss create mode 100644 www/src/css/setup/_mixins.scss create mode 100644 www/src/css/setup/_reset.scss create mode 100644 www/src/css/setup/_variables.scss create mode 100644 www/src/templates/article.html create mode 100644 www/src/templates/index.html diff --git a/docs/.ruby-version b/docs/.ruby-version new file mode 100644 index 0000000000000..276cbf9e2858c --- /dev/null +++ b/docs/.ruby-version @@ -0,0 +1 @@ +2.3.0 diff --git a/www/src/css/_article.scss b/www/src/css/_article.scss new file mode 100644 index 0000000000000..27c9be9ae59f7 --- /dev/null +++ b/www/src/css/_article.scss @@ -0,0 +1,139 @@ +.article { + display: flex; + margin-left: -40px; +} + +.article__main { + width: calc((4.5/ 6 * 100%) + (0.5 / 6 * 100%)); + padding-left: 40px; +} + +.article__inner { + // TODO -- calc the logic of this this magic number... + padding-right: calc(8.93% + 40px); +} + +.article__header { + display: flex; + justify-content: space-between; + align-items: baseline; +} + +.article__title { + @include f-article_title; + color: $c-dark; + letter-spacing: -0.02em; + padding-top: 80px; +} + +.article__edit_link { + @include f-body; + color: $c-subtle; + border-color: $c-divider; + transition: all 0.2s ease; + transition-propery: color, border-color; + + &::after { + top: -5px; + } + + &:hover { + color: $c-text; + border-color: $c-text; + } +} + +.article__sub { + @include f-article_sub; + color: $c-subtle; + padding-top: 45px; +} + +.article__body { + padding-top: 65px; + padding-bottom: 120px; + // padding-right: 40px; + + p { + @include f-panel; + max-width: 590px; + + &:not(:first-child) { + padding-top: 30px; + } + } + + h2 { + @include f-h2; + padding-top: 45px; + } +} + +.article__editor { + padding-top: 40px; + margin-left: -35px; + + .alt-design & { + margin-right: -35px; + } + + + p { + padding-top: 35px; + } +} + +.article__note { + max-width: 650px; + padding-top: 40px; + margin-left: -25px; +} + +.article__traverse_nav { + padding-right: 40px; + margin-left: -999em; + padding-left: 999em; + background: $c-dark; + color: #fff; + border-color: rgba(#fff, 0.3); + padding-top: 50px; + padding-bottom: 50px; + + + .alt-design & { + margin-right: -999em; + padding-right: 999em; + position: relative; + z-index: 1; + } +} + +.article__nav { + // Deduct the margin-left value from width + width: calc((1.5 / 6 * 100%)); + // width: calc((2 / 6 * 100%) - ((0.5 / 6 * 100%) + 20px)); + // margin-left: calc((0.5 / 6 * 100%) + 20px); + padding-left: calc((0.5 / 6 * 100%) - 20px); + background-color: $c-darker; + color: #fff; + display: flex; + align-items: stretch; + + .alt-design & { + color: inherit; + background-color: transparent; + } +} + +.article__nav_mid { + background-color: inherit; + color: inherit; + margin-right: -999em; + padding-right: 999em; + display: flex; + align-items: stretch; +} + +.article__nav_inner { + padding-top: 120px; + min-height: 100vh; +} diff --git a/www/src/css/_article_nav.scss b/www/src/css/_article_nav.scss new file mode 100644 index 0000000000000..0fb9c8f805d74 --- /dev/null +++ b/www/src/css/_article_nav.scss @@ -0,0 +1,37 @@ +.article_nav { + position: fixed; +} + +.article_nav__category_title { + @include f-note; + + & + & { + padding-top: 30px; + } +} + +.article_nav__category_title:not(.is-current) { + a { + color: rgba(#fff, 0.5); + transition: color 0.2s ease; + &:hover { + color: #fff; + } + + .alt-design & { + color: rgba(#1a1a1a, 0.6); + + &:hover { + color: #1a1a1a; + } + } + } +} + +.article_nav__list { + padding-top: 20px; + + + .article_nav__category_title { + padding-top: 35px; + } +} diff --git a/www/src/css/_aux_list.scss b/www/src/css/_aux_list.scss new file mode 100644 index 0000000000000..7160ebf6f0a95 --- /dev/null +++ b/www/src/css/_aux_list.scss @@ -0,0 +1,18 @@ +.aux_list { + display: flex; + margin-left: -20px; +} + +.aux_list__item { + padding-left: 20px; +} + +.aux_list__link { + @include f-aux; + padding: 5px 10px; +} + +.aux_list__btn { + border-radius: 15px; + background: rgba(#fff, 0.1); +} diff --git a/www/src/css/_below_nav.scss b/www/src/css/_below_nav.scss new file mode 100644 index 0000000000000..cc992eaf166f1 --- /dev/null +++ b/www/src/css/_below_nav.scss @@ -0,0 +1,11 @@ +.below_nav { + padding-top: 40px; + + @include breakpoint("medium-to-xlarge") { + padding-top: 50px; + } + + @include breakpoint("xxlarge") { + padding-top: 60px; + } +} diff --git a/www/src/css/_codemirror_theme.scss b/www/src/css/_codemirror_theme.scss new file mode 100644 index 0000000000000..b62d3199f31f7 --- /dev/null +++ b/www/src/css/_codemirror_theme.scss @@ -0,0 +1,94 @@ +.CodeMirror { height: auto !important; padding: 0 0 0 10px; } + +.cm-s-react.CodeMirror { background: #ffffff; color: #777777; } +.cm-s-react div.CodeMirror-selected { background: #e0e0e0; } +.cm-s-react .CodeMirror-line::selection, .cm-s-react .CodeMirror-line > span::selection, .cm-s-react .CodeMirror-line > span > span::selection { background: #e0e0e0; } +.cm-s-react .CodeMirror-line::-moz-selection, .cm-s-react .CodeMirror-line > span::-moz-selection, .cm-s-react .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; } +.cm-s-react .CodeMirror-gutters { background: transparent; border-right: 0px; } +.cm-s-react .CodeMirror-guttermarker { color: #777777; } +.cm-s-react .CodeMirror-guttermarker-subtle { color: #767676; } +.cm-s-react .CodeMirror-linenumber { color: #767676; margin-left: -10px; } +.cm-s-react .CodeMirror-cursor { border-left: 1px solid #505050; } + +.cm-s-react span.cm-comment { color: #8f5536; } +.cm-s-react span.cm-atom { color: #aa759f; } +.cm-s-react span.cm-number { color: #aa759f; } + +.cm-s-react span.cm-attribute { } +.cm-s-react span.cm-property { color: #007db8; } +.cm-s-react span.cm-keyword { color: #777777; } +.cm-s-react span.cm-string { color: #777777; } + +.cm-s-react span.cm-variable { color: #d14355; } +.cm-s-react span.cm-variable-2 { color: #6a9fb5; } +.cm-s-react span.cm-def { color: #d14356; } +.cm-s-react span.cm-bracket { color: #518400; } +.cm-s-react span.cm-tag { color: #518400; } +.cm-s-react span.cm-link { color: #aa759f; } +.cm-s-react span.cm-error { background: #777777; color: #505050; } + +.cm-s-react .CodeMirror-activeline-background { background: #DDDCDC; } +.cm-s-react .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } + + +.article .CodeMirror { height: auto !important; padding: 10px 10px 10px 0; font-size: 18px; line-height: 25px; } + +// .article { + + .cm-s-react.CodeMirror { background: #fff; color: inherit; } + [data-readonly] .CodeMirror-linenumber { visibility: hidden; } + + .alt-design { + .article .CodeMirror { padding-top: 25px; padding-bottom: 25px; } + + .CodeMirror::before { + @include f-note; + content: 'Code'; + display: block; + background: $c-darker; + color: #fff; + padding: 8px 25px 7px; + margin-left: -15px; + position: relative; + margin-right: -30px; + } + + .article .CodeMirror::before { + top: -25px; + } + + + + .cm-s-react.CodeMirror { background: $c-dark; border-radius: 10px; color: #fff; -webkit-font-smoothing: antialiased; } + + .CodeMirror-linenumber { color: #999; } + .cm-s-react div.CodeMirror-selected { background: $c-darker; } + .cm-s-react .CodeMirror-line::selection, .cm-s-react .CodeMirror-line > span::selection, .cm-s-react .CodeMirror-line > span > span::selection { background: $c-darker; } + .cm-s-react .CodeMirror-line::-moz-selection, .cm-s-react .CodeMirror-line > span::-moz-selection, .cm-s-react .CodeMirror-line > span > span::-moz-selection { background: $c-darker; } + .cm-s-react .CodeMirror-cursor { border-left: 4px solid $c-brand; } + [data-readonly] > .CodeMirror .CodeMirror-cursor { display: none; } + + // .cm-s-react span.cm-comment { color: #8f5536; } + // .cm-s-react span.cm-atom { color: purple; } + // .cm-s-react span.cm-number { color: #aa759f; } + + .cm-s-react span.cm-attribute { } + .cm-s-react span.cm-property { color: lighten($c-brand, 20); } + .cm-s-react span.cm-keyword { color: #999; } + .cm-s-react span.cm-string { color: #999; } + + .cm-s-react span.cm-variable { color: darken($c-brand, 20); } + .cm-s-react span.cm-variable-2 { color: #6a9fb5; } + .cm-s-react span.cm-def { color: $c-brand; } + .cm-s-react span.cm-bracket { color: #518400; } + .cm-s-react span.cm-tag { color: #99c27c; } + .cm-s-react span.cm-link { color: #aa759f; } + .cm-s-react span.cm-error { background: #777777; color: #505050; } + + } +// } + + +.home { + +} diff --git a/www/src/css/_cta_group.scss b/www/src/css/_cta_group.scss new file mode 100644 index 0000000000000..2419b36c738ca --- /dev/null +++ b/www/src/css/_cta_group.scss @@ -0,0 +1,21 @@ +.cta_group { + display: flex; + margin-left: -20px; + + @include breakpoint("xlarge+") { + margin-left: -40px; + } +} + +.cta_group__item { + width: 50%; + padding-left: 20px; + + @include breakpoint("xlarge+") { + padding-left: 40px; + } + + &:first-child { + text-align: right; + } +} diff --git a/www/src/css/_cta_link.scss b/www/src/css/_cta_link.scss new file mode 100644 index 0000000000000..e8e38ecc9fe50 --- /dev/null +++ b/www/src/css/_cta_link.scss @@ -0,0 +1,16 @@ +.cta_link { + @include f-btn; + display: inline-block !important; + color: $c-brand; + padding-top: 10px; + transition: color 0.2s ease-out; + + img { + margin-left: 4px; + vertical-align: -1px; + } + + &:hover { + color: #fff; + } +} diff --git a/www/src/css/_fonts.scss b/www/src/css/_fonts.scss new file mode 100644 index 0000000000000..7929523501d87 --- /dev/null +++ b/www/src/css/_fonts.scss @@ -0,0 +1,247 @@ +$sans-serif: "proxima-nova", sans-serif; +$sans-serif--loaded: "proxima-nova", sans-serif; + +@mixin font($font-size, $line-height, $weight: 400, $style: normal) { + display: block; + font-family: $sans-serif; + font-size: $font-size; + line-height: $line-height; + font-weight: $weight; + font-style: $style; + + // TODO -- do something here, to cache fonts / use cookie? + .js-font-loaded & { + font-family: $sans-serif--loaded; + } +} + +@mixin baseline($top) { + $t: $top; + $b: 0 - $t; + + &::before, + &::after { + content: ""; + display: block; + } + + &::before { + margin-top: $t; + } + + &::after { + margin-top: $b; + } + + &.underlined { + &::after { + border-top-width: 1px; + border-top-style: solid; + border-color: inherit; + margin-bottom: -1px; + position: relative; + } + } +} + +@mixin f-h1 { + letter-spacing: -0.02em; + + @include breakpoint("xsmall") { + @include font(30px, 30px, 700); + @include baseline(1px); + } + + @include breakpoint("small-to-large") { + @include font(45px, 45px, 700); + @include baseline(-1px); + } + + @include breakpoint("xlarge+") { + @include font(60px, 60px, 700); + @include baseline(1px); + } +} + +.f-h1 { + @include f-h1; +} + +@mixin f-h2 { + @include breakpoint("large-") { + @include font(20px, 25px, 700); + @include baseline(2px); + } + @include breakpoint("xlarge+") { + @include font(25px, 30px, 700); + @include baseline(2px); + } +} + +.f-h2 { + @include f-h2; +} + +@mixin f-sub { + letter-spacing: -0.02em; + + @include breakpoint("xsmall") { + @include font(16px, 20px); + } + + @include breakpoint("small-to-large") { + @include font(24px, 30px, 100); + @include baseline(-2px); + } + + @include breakpoint("xlarge+") { + @include font(30px, 35px, 100); + @include baseline(-2px); + } +} + +.f-sub { + @include f-sub; +} + +@mixin f-body { + @include breakpoint("small-") { + @include font(16px, 25px); + @include baseline(-2px); + } + + @include breakpoint("medium+") { + @include font(16px, 30px); + @include baseline(0px); + } +} + +.f-body { + @include f-body; +} + +@mixin f-logo { + @include breakpoint("large-") { + @include font(16px, 25px, 700); + @include baseline(-2px); + } + + @include breakpoint("xlarge+") { + @include font(20px, 20px, 700); + @include baseline(-1px); + } +} + +.f-logo { + @include f-logo; +} + +@mixin f-btn { + letter-spacing: 0.02em; + + @include breakpoint("large-") { + @include font(16px, 25px); + @include baseline(-2px); + } + + @include breakpoint("xlarge+") { + @include font(20px, 25px, 300); + @include baseline(2px); + } +} + +.f-btn { + @include f-btn; +} + +@mixin f-aux { + @include font(14px, 20px); + @include baseline(1px); +} + +.f-aux { + @include f-aux; +} + +@mixin f-nav { + @include breakpoint("large-") { + @include font(16px, 20px, 300); + } + + @include breakpoint("xlarge+") { + @include font(18px, 20px); + @include baseline(-1px); + } +} + +.f-nav { + @include f-nav; +} + +@mixin f-tab { + @include breakpoint("large-") { + @include font(18px, 20px); + @include baseline(-1px); + } + + @include breakpoint("xlarge+") { + @include font(24px, 25px, 300); + } +} + +.f-tab { + @include f-tab; +} + +@mixin f-panel { + @include breakpoint("large-") { + @include f-body; + } + + @include breakpoint("xlarge+") { + @include font(18px, 35px); + @include baseline(2px); + } +} + +.f-panel { + @include f-panel; +} + +@mixin f-note { + @include font(14px, 15px, 700); + @include baseline(-2px); + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.f-note { + @include f-note; +} + +@mixin f-article_title { + @include font(60px, 65px, 700); + @include baseline(-1px); +} + +.f-article_title { + @include f-article_title; +} + +@mixin f-article_sub { + @include font(24px, 40px, 300); + @include baseline(-2px); +} + +.f-article_sub { + @include f-article_sub; +} + +@mixin f-small { + @include font(14px, 15px); + @include baseline(-2px); +} + +.f-small { + @include f-small; +} diff --git a/www/src/css/_footer.scss b/www/src/css/_footer.scss new file mode 100644 index 0000000000000..d818a0b48501e --- /dev/null +++ b/www/src/css/_footer.scss @@ -0,0 +1,92 @@ +.footer { + background-color: $c-darker; + color: #fff; + -webkit-font-smoothing: antialiased; + padding-top: 50px; + padding-bottom: 50px; + + @include breakpoint("xlarge+") { + padding-top: 80px; + } +} + +.footer__inner { + margin-left: -20px; + margin-top: -40px; + display: flex; + flex-wrap: wrap; + + @include breakpoint("xlarge+") { + margin-left: -40px; + } +} + +.footer__category, +.footer__logo { + padding-left: 20px; + padding-top: 40px; + + @include breakpoint("xlarge+") { + padding-left: 40px; + } +} + +.footer__category { + width: calc(1 / 2 * 100%); + + @include breakpoint("medium-to-large") { + width: calc(1 / 4 * 100%); + } + + @include breakpoint("xlarge+") { + width: calc(1 / 6 * 100%); + } +} + +.footer__category_title { + @include f-note; + color: rgba(#fff, 0.5); +} + +.footer__list { + @include f-body; + padding-top: 15px; +} + +.footer__item { + & + & { + padding-top: 5px; + } +} + +.footer__link { + font-weight: 300; +} + +.footer__link:hover { + color: $c-brand; +} + +.footer__logo { + + img { + max-width: 160px; + height: auto; + } + + @include breakpoint("large-") { + text-align: center; + width: 100%; + } + + @include breakpoint("xlarge+") { + order: -1; + width: calc(2 / 6 * 100%); + } +} + +.footer__copyright { + @include f-body; + color: rgba(#fff, 0.5); + padding-top: 15px; +} diff --git a/www/src/css/_header.scss b/www/src/css/_header.scss new file mode 100644 index 0000000000000..f4f4b6f497fad --- /dev/null +++ b/www/src/css/_header.scss @@ -0,0 +1,164 @@ +.header { + background-color: rgba($c-darker, 0.95); + color: #fff; + -webkit-font-smoothing: antialiased; + overflow: hidden; + position: fixed; + z-index: 1; + width: 100%; + top: 0; + left: 0; + + @include breakpoint("small-") { + padding-top: 10px; + padding-bottom: 5px; + } + + @include breakpoint("medium-to-large") { + padding-top: 15px; + padding-bottom: 10px; + } +} + +.header__inner { + margin-left: -20px; + display: flex; + + @include breakpoint("xlarge+") { + margin-left: -40px; + } +} + +.header__logo, +.header__nav, +.header__search { + padding-left: 20px; + + @include breakpoint("xlarge+") { + padding-left: 40px; + } +} + +.header__logo { + width: calc(1 / 6 * 100%); + + @include breakpoint("xlarge+") { + padding-top: 15px; + } +} + +.header__nav { + width: calc(4 / 6 * 100%); + + @include breakpoint("small-to-large") { + width: calc(3 / 6 * 100%); + } + + @include breakpoint("xlarge+") { + width: calc(2 / 6 * 100%);; + } +} + +.header__nav_mid { + position: relative; + align-self: stretch; + margin-left: -20px; + margin-right: -20px; + + @include breakpoint("small-") { + -webkit-mask-image: linear-gradient(to right, rgba(#000, 0), rgba(#000, 1) 20px, rgba(#000, 1) 90%, rgba(#000, 0)); + } +} + +.header__nav_inner { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + display: flex; + + @include breakpoint("small-to-large") { + // height: 50px; + } + + @include breakpoint("xlarge+") { + // height: 60px; + } + + .nav { + padding-right: 20px; + padding-left: 20px; + } +} + +.header__search { + width: calc(1 / 6 * 100%); + display: flex; + // align-items: center; + + @include breakpoint("small-") { + justify-content: flex-end; + } + + @include breakpoint("small-to-medium") { + width: calc(2 / 6 * 100%); + } + + @include breakpoint("xlarge+") { + width: calc(2 / 6 * 100%); + padding-top: 20px + } + + img { + position: relative; + top: 1px; + } +} + +.header__search_input { + @include breakpoint("xsmall") { + display: none; + } + @include breakpoint("small+") { + flex-grow: 1; + padding-left: 10px; + } +} + +.header__search_input_inner { + @include breakpoint("small+") { + -webkit-appearance: none; + background: transparent; + border: 0; + color: #fff; + width: 100%; + } + + @include breakpoint("large-") { + @include f-aux; + top: 1px; + position: relative; + } + + @include breakpoint("xlarge+") { + @include f-nav; + top: -1px; + position: relative; + } +} + +.header__aux { + @include breakpoint("medium-") { + display: none; + } + + @include breakpoint("large+") { + width: calc(1 / 6 * 100%); + } + + @include breakpoint("large") { + margin-top: -5px; + } + + @include breakpoint("xlarge+") { + padding-top: 15px; + } +} diff --git a/www/src/css/_hero.scss b/www/src/css/_hero.scss new file mode 100644 index 0000000000000..74c3874c15bf1 --- /dev/null +++ b/www/src/css/_hero.scss @@ -0,0 +1,57 @@ +.hero { + background-color: $c-dark; + color: #fff; + -webkit-font-smoothing: antialiased; +} + +.hero__inner { + padding-top: 45px; + padding-bottom: 20px; + + @include breakpoint("small+") { + padding-top: 60px; + padding-bottom: 70px; + } + + @include breakpoint("xlarge+") { + padding-top: 95px; + padding-bottom: 85px; + max-width: 1500px; // Positioning of background logo + margin-left: auto; + margin-right: auto; + background-image: url('/large-logo.svg'); + background-repeat: no-repeat; + background-position: 100% 100px; + background-size: 50% auto; + } +} + +.hero__title { + @include f-h1; + color: #61dafb; + text-align: center; +} + +.hero__subtitle { + @include f-sub; + padding-top: 15px; + text-align: center; + + @include breakpoint("xsmall") { + max-width: 12em; + margin-left: auto; + margin-right: auto; + } + + @include breakpoint("xlarge+") { + padding-top: 20px; + } +} + +.hero__cta_group { + padding-top: 40px; + + @include breakpoint("xlarge+") { + padding-top: 65px; + } +} diff --git a/www/src/css/_home_example.scss b/www/src/css/_home_example.scss new file mode 100644 index 0000000000000..18e866e9371ee --- /dev/null +++ b/www/src/css/_home_example.scss @@ -0,0 +1,110 @@ +.home_example { + padding-top: 40px; + + @include breakpoint("medium+") { + padding-top: 40px; + } + + @include breakpoint("xlarge+") { + display: flex; + margin-left: -40px; + padding-top: 80px; + } +} + +.home_example__title { + @include f-h2; + color: $c-dark; +} + +.home_example__text { + @include breakpoint("xlarge+") { + width: calc(1 / 3 * 100%); + padding-left: 40px; + padding-top: 5px; + } +} + +.home_example__body { + padding-top: 15px; + padding-right: 40px; + @include f-body; + + @include breakpoint("xlarge+") { + padding-top: 25px; + } +} + +.home_example__main { + @include breakpoint("small-") { + padding-top: 20px; + } + + @include breakpoint("medium+") { + display: flex; + } + + @include breakpoint("medium-to-large") { + padding-top: 40px; + } + + @include breakpoint("xlarge+") { + width: calc(2 / 3 * 100%); + padding-left: 40px; + } +} + +.home_example__editor { + @include breakpoint("medium-to-large") { + width: calc(1 / 2 * 100%); + } + + @include breakpoint("xlarge+") { + flex: 1.61; + } + + .alt-design & .cm-s-react.CodeMirror { + border-radius: 10px 0 0 10px; + } +} + +.home_example__result { + @include f-body; + padding-left: 40px; + padding-top: 20px; + + border: 1px solid #f1f1f1; + border-radius: 0 10px 10px 0; + + &::before { + @include f-note; + content: 'Result'; + display: block; + background: #f1f1f1; + margin-top: -10px; + padding-top: 7px; + padding-bottom: 7px; + margin-bottom: 20px; + margin-left: -40px; + padding-left: 40px; + } + + @include breakpoint("medium+") { + padding-top: 10px; + } + + @include breakpoint("medium-to-large") { + width: calc(1 / 2 * 100%); + } + + @include breakpoint("xlarge+") { + flex: 1; + } +} + +.editor { + // background: #fff; + // box-shadow: 0px 5px 20px 5px rgba(#000, 0.05); + font-size: 14px; + line-height: 20px; +} diff --git a/www/src/css/_home_tabs.scss b/www/src/css/_home_tabs.scss new file mode 100644 index 0000000000000..1c17737a10fae --- /dev/null +++ b/www/src/css/_home_tabs.scss @@ -0,0 +1,84 @@ +.home_tabs { + padding-top: 35px; + padding-bottom: 35px; + border-bottom: 1px solid $c-divider; + + @include breakpoint("medium+") { + text-align: center; + padding-top: 50px; + } + + @include breakpoint("xlarge+") { + padding-top: 70px; + padding-bottom: 70px; + } +} + +.home_tabs__list { + display: flex; + margin-left: -20px; + padding-bottom: 15px; + + @include breakpoint("small-") { + margin-right: -20px; + overflow-x: auto; + white-space: nowrap; + } + + @include breakpoint("medium+") { + justify-content: center; + margin-left: -40px; + } +} + +.home_tabs__item { + padding-left: 20px; + + @include breakpoint("small-") { + &:last-child { + padding-right: 20px; + } + } + + @include breakpoint("medium+") { + padding-left: 40px; + } +} + +.home_tabs__link { + @include f-tab; + color: rgba($c-text, 0.46); + transition: color 0.2s ease-out; + position: relative; + + &.is-current, + &:hover { + color: $c-text; + } + + &.is-current::after { + content: ''; + position: absolute; + width: 100%; + bottom: -8px; + left: 0; + height: 3px; + background: $c-brand; + } +} + +.home_tabs__panel { + @include f-panel; + color: $c-subtle; + padding-top: 10px; + + @include breakpoint("medium+") { + width: calc(4 / 6 * 100%); + margin-left: auto; + margin-right: auto; + } + + @include breakpoint("xlarge+") { + padding-top: 15px; + } +} diff --git a/www/src/css/_logo.scss b/www/src/css/_logo.scss new file mode 100644 index 0000000000000..7e288ffac5f1c --- /dev/null +++ b/www/src/css/_logo.scss @@ -0,0 +1,26 @@ +.logo { + display: flex; + color: $c-brand; + + img { + position: relative; + + @include breakpoint("xlarge+") { + height: 30px; + top: -1px; + } + } +} + +.logo__title { + @include f-logo; + margin-left: 10px; + + @include breakpoint("small-") { + visibility: hidden; + } + + @include breakpoint("xlarge+") { + padding-top: 5px; + } +} diff --git a/www/src/css/_nav.scss b/www/src/css/_nav.scss new file mode 100644 index 0000000000000..4c83f6f99986f --- /dev/null +++ b/www/src/css/_nav.scss @@ -0,0 +1,57 @@ +.nav { + display: flex; + margin-left: -20px; + + @include breakpoint("xlarge+") { + margin-left: -30px; + } +} + +.nav__item { + padding-left: 20px; + + @include breakpoint("xlarge+") { + padding-left: 20px; + } +} + +.nav__link { + @include f-nav; + color: #fff; + transition: color 0.2s ease-out; + + @include breakpoint("xlarge+") { + display: block; + padding-left: 10px; + padding-right: 10px; + padding-top: 20px; + padding-bottom: 20px; + + &:hover { + color: $c-brand; + } + } + + &.is-current { + color: $c-brand; + + @include breakpoint("xlarge+") { + margin-left: -10px; + margin-right: -10px; + padding-left: 20px; + padding-right: 20px; + position: relative; + + &::after { + content: ""; + position: absolute; + bottom: -1px; + height: 4px; + background: $c-brand; + left: 0; + right: 0; + z-index: 1; + } + } + } +} diff --git a/www/src/css/_note.scss b/www/src/css/_note.scss new file mode 100644 index 0000000000000..93945659f1f3a --- /dev/null +++ b/www/src/css/_note.scss @@ -0,0 +1,13 @@ +.note { + background-color: rgba($c-note, 0.3); + padding: 20px; + border-left: 10px solid $c-note; + + p { + @include f-body; + + &:not(:first-child) { + padding-top: 10px; + } + } +} diff --git a/www/src/css/_prefooter_nav.scss b/www/src/css/_prefooter_nav.scss new file mode 100644 index 0000000000000..8abbe3557d5cf --- /dev/null +++ b/www/src/css/_prefooter_nav.scss @@ -0,0 +1,7 @@ +.prefooter_nav { + background: $c-dark; + color: #fff; + padding-top: 45px; + padding-bottom: 45px; + -webkit-font-smoothing: antialiased; +} diff --git a/www/src/css/_primary_btn.scss b/www/src/css/_primary_btn.scss new file mode 100644 index 0000000000000..75ce1868fd23d --- /dev/null +++ b/www/src/css/_primary_btn.scss @@ -0,0 +1,23 @@ +.primary_btn { + background-color: $c-brand; + color: #000; + display: inline-block; + vertical-align: top; + font-weight: 100; + padding: 10px 25px 5px; + white-space: nowrap; + transition: background-color 0.2s ease-out; + + @include breakpoint("xlarge+") { + padding-top: 10px; + padding-bottom: 15px; + } + + &:hover { + background-color: #fff; + } +} + +.primary_btn__inner { + @include f-btn; +} diff --git a/www/src/css/_site.scss b/www/src/css/_site.scss new file mode 100644 index 0000000000000..1a6d58b023da1 --- /dev/null +++ b/www/src/css/_site.scss @@ -0,0 +1,11 @@ +.site { + display: flex; + min-height: 100vh; + flex-direction: column; +} + +.site__main { + flex: 1; + position: relative; + z-index: 0; +} diff --git a/www/src/css/_traverse_nav.scss b/www/src/css/_traverse_nav.scss new file mode 100644 index 0000000000000..56735681ae653 --- /dev/null +++ b/www/src/css/_traverse_nav.scss @@ -0,0 +1,31 @@ +.traverse_nav { + display: flex; + justify-content: space-between; +} + +.traverse_nav__item { + width: 50%; + display: flex; + + &:last-child { + text-align: right; + justify-content: flex-end; + } + + a { + transition: border-color 0.2s ease; + &:hover { + border-color: #fff; + } + } +} + +.traverse_nav__label { + @include f-small; + color: $c-brand; +} + +.traverse_nav__title { + @include f-sub; + padding-top: 10px; +} diff --git a/www/src/css/_underline.scss b/www/src/css/_underline.scss new file mode 100644 index 0000000000000..ec379c2833c6c --- /dev/null +++ b/www/src/css/_underline.scss @@ -0,0 +1,13 @@ +.underline { + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + left: 0; + right: 0; + } +} diff --git a/www/src/css/_vert_nav.scss b/www/src/css/_vert_nav.scss new file mode 100644 index 0000000000000..6ac5c7f5e4df6 --- /dev/null +++ b/www/src/css/_vert_nav.scss @@ -0,0 +1,77 @@ +.vert_nav { + margin-top: -5px; +} + +.vert_nav__item { + font-weight: 300; + transition: color 0.2s ease; + + &.is-current { + position: relative; + + &::before { + content: ""; + position: absolute; + width: 4px; + height: 20px; + background-color: $c-brand; + left: -20px; + top: 10px; + } + } + + &:hover { + color: $c-brand; + + .alt-design & { + color: #1a1a1a; + } + } +} + +.vert_nav__link { + padding-top: 5px; + display: block; +} + +.vert_nav__text { + @include f-body; + display: inline-block !important; + vertical-align: top; + + .alt-design & { + @extend .underlined; + border-color: transparent; + transition: border-color 0.2s ease; + + &::after { + top: -5px; + } + } + + .vert_nav__link:hover & { + color: #1a1a1a; + + .alt-design & { + color: #1a1a1a; + border-color: #ccc; + } + } + + .vert_nav__item.is-current & { + color: $c-brand; + font-weight: 700; + + .alt-design & { + color: #1a1a1a; + } + } + + .vert_nav__item.is-current .vert_nav__link:hover & { + cursor: default; + + &::after { + border-color: transparent; + } + } +} diff --git a/www/src/css/_wrapper.scss b/www/src/css/_wrapper.scss new file mode 100644 index 0000000000000..5851794c8f4aa --- /dev/null +++ b/www/src/css/_wrapper.scss @@ -0,0 +1,14 @@ +.wrapper { + padding-left: 20px; + padding-right: 20px; + margin-left: auto; + margin-right: auto; + + @include breakpoint("medium+") { + width: 90%; + } + + @include breakpoint("xxlarge") { + max-width: 1260px; + } +} diff --git a/www/src/css/main.scss b/www/src/css/main.scss new file mode 100644 index 0000000000000..87930d7f82592 --- /dev/null +++ b/www/src/css/main.scss @@ -0,0 +1,70 @@ +@import "setup/variables"; +@import "setup/mixins"; +@import "setup/breakpoint"; +@import "setup/reset"; +@import "setup/grid_helpers"; + +// Font modules are included as mixins +// ... we keep them separate to isolate the baseline's magic numbers +@import "fonts"; + +// BEM blocks *should* be source-order agnostic +// so let's go alphabetical +@import "article_nav"; +@import "article"; +@import "aux_list"; +@import "below_nav"; +@import "cta_group"; +@import "cta_link"; +@import "footer"; +@import "header"; +@import "hero"; +@import "home_example"; +@import "home_tabs"; +@import "logo"; +@import "nav"; +@import "note"; +@import "prefooter_nav"; +@import "primary_btn"; +@import "site"; +@import "traverse_nav"; +@import "underline"; +@import "vert_nav"; +@import "wrapper"; + +@import "codemirror_theme"; + +html { + min-width: 320px; +} + +body { + font-size: 16px; + line-height: 25px; + font-family: 'proxima-nova', sans-serif; +} + +code { + font-family: 'Monaco', monospace; + font-size: 80%; + opacity: 0.7; +} + +pre, +.CodeMirror pre { + font-family: 'Monaco', monospace !important; + font-size: 90% !important; +} + +// This could be useful to avoid collapsing margins when stacking different fonts +.block { + display: flex; + flex-direction: column; +} + +// TODO -- standardize bottom padding across layouts? +.home { + padding-bottom: 120px; + position: relative; + z-index: 0; +} diff --git a/www/src/css/setup/_breakpoint.scss b/www/src/css/setup/_breakpoint.scss new file mode 100644 index 0000000000000..e301ff84fd831 --- /dev/null +++ b/www/src/css/setup/_breakpoint.scss @@ -0,0 +1,126 @@ +/* + @function get-breakpoint-directions + + Sorts through breakpoints SASS map, + generates a full SASS map containing all the breakpoint + variations we'll require + + Parameters: + none +*/ +@function get-breakpoint-directions() { + $_bps: (); + + @each $k, $bp in $breakpoints { + $_bps: map-merge($_bps, ($k: $bp)); + $start: map-get($bp, start); + $end: map-get($bp, end); + + // Add ranges + @each $k2, $bp2 in $breakpoints { + $start2: map-get($bp2, start); + $end2: map-get($bp2, end); + + @if $bp != $bp2 { + @if $end != nil { + @if $start2 == nil or $start2 < $end { + $range-key: unquote($k2 + "-to-" + $k); + $_bps: map-merge($_bps, ($range-key: (start: $start2, end: $end))); + } + } + + @if $start != nil { + @if $end2 == nil or $end2 > $start { + $range-key: unquote($k + "-to-" + $k2); + $_bps: map-merge($_bps, ($range-key: (start: $start, end: $end2))); + } + } + } + } + + @if $end != nil and $start != nil { + $down-key: unquote($k + "-"); + $_bps: map-merge($_bps, ($down-key: (start: nil, end: $end))); + } + + @if $start != nil and $end != nil { + $up-key: unquote($k) + "+"; + $_bps: map-merge($_bps, ($up-key: (start: $start, end: nil))); + } + } + + @return $_bps; +} +$breakpoints-with-directions: get-breakpoint-directions(); + +/* + @mixin breakpoint + + Inserts a media query + + Parameters: + $name - name of breakpoint, choose from: + + xsmall, small, medium, large, xlarge, xxlarge - *just* that breakpoint + small-, medium-, large-, xlarge-, xxlarge- - that breakpoint *and* below + xsmall+, small+, medium+, large+, xlarge+ - that breakpoint *and* up + + NB: the we're mobile up, so the minus values should be avoided.. +*/ +@mixin breakpoint($name, $test: nil) { + $points: map-get($breakpoints-with-directions, $name); + + @if $points { + $media: get-media($points); + $start: map-get($media, "start"); + $end: map-get($media, "end"); + $str: "screen and ("; + + @if ($start != nil) { + $str: $str + "min-width: " + ($start * 1px); + } + + @if ($start != nil and $end != nil) { + $str: $str + ") and ("; + } + + @if ($end != nil) { + $str: $str + "max-width: " + ($end * 1px); + } + $str: $str + ")"; + + @media #{$str} { + @content; + } + } + + @else { + @warn "Unknown breakpoint `#{$name}` in $breakpoints."; + } +} + +/* + @function get-media + + Returns start and stop points of a given media query + + Parameters: + $bp - the breakpoint you want the stop and stop points of +*/ + +@function get-media($bp) { + $start: nil; + $end: nil; + $bp-start: map-get($bp, "start"); + $bp-end: map-get($bp, "end"); + + @if ($bp-start != nil and ($start == nil or $bp-start < $start)) { + $start: $bp-start; + } + + @if ($bp-end != nil and ($end == nil or $bp-end > $end)) { + $end: $bp-end; + } + + @return ( start: $start, end: $end ); +} diff --git a/www/src/css/setup/_grid_helpers.scss b/www/src/css/setup/_grid_helpers.scss new file mode 100644 index 0000000000000..f29ca058556dc --- /dev/null +++ b/www/src/css/setup/_grid_helpers.scss @@ -0,0 +1,118 @@ +.design-grid-toggle { + position: fixed; + z-index: 9999; + left: 0; + bottom: 0; + padding: 1px 8px; + background: #000; + color: #fff; + font-size: 11px; + cursor: pointer; + + .hide-debug & { + display: none; + } +} + +.design-grid-toggle--baseline { + left: 80px; +} + +.design-grid-toggle--columns { + left: auto; + right: 0; + + &::before, + &::after { + display: block; + position: absolute; + right: 8px; + bottom: 100%; + color: green; + font-weight: bold; + text-align: right; + text-transform: uppercase; + white-space: nowrap; + } + + &::before { + margin-bottom: -2px; + + @each $name, $point in $breakpoints { + @include breakpoint("#{$name}") { + content: "#{$name}"; + } + } + } + + &::after { + content: attr(data-env); + margin-bottom: 12px; + } +} + +.design-grid--baseline { + display: block; + position: absolute; + z-index: 9998; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 5px, #7fffff 5px, #7fffff 10px); + opacity: 0.25; + pointer-events: none; + + &.js-hide { + display: none; + } +} + +.design-grid--columns { + display: block; + position: fixed; + z-index: 9998; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + margin: 0 auto; + background-color: transparent; + opacity: 0.25; + pointer-events: none; + + &.js-hide { + display: none; + } + + * { + height: 100vh; + } + + .grid { + margin-left: -20px; + display: flex; + + @include breakpoint("xlarge+") { + margin-left: -40px; + } + } + + .grid > * { + position: relative; + width: calc(1 / 6 * 100%); + padding-left: 20px; + + @include breakpoint("xlarge+") { + padding-left: 40px; + } + + > div { + background-color: #7fffff; + } + } +} diff --git a/www/src/css/setup/_mixins.scss b/www/src/css/setup/_mixins.scss new file mode 100644 index 0000000000000..85e8cbfea8343 --- /dev/null +++ b/www/src/css/setup/_mixins.scss @@ -0,0 +1 @@ +// Any generic mixins can go here. diff --git a/www/src/css/setup/_reset.scss b/www/src/css/setup/_reset.scss new file mode 100644 index 0000000000000..3fc439c3ff526 --- /dev/null +++ b/www/src/css/setup/_reset.scss @@ -0,0 +1,37 @@ +html { + box-sizing: border-box; +} + +body { + overflow-x: hidden; + position: relative; // for .design-grid-baseline +} + +* { + margin: 0; + padding: 0; +} + +*, *::before, *::after { + box-sizing: inherit; + border-color: inherit; +} + +a { + color: inherit; + text-decoration: none; +} + +ul, ol { + list-style: none; +} + +// TODO -- include what input, and work on keyboard navigation +html:not([data-whatinput="keyboard"]) * { + outline: 0; +} + +img { + display: inline-block; + vertical-align: top; +} diff --git a/www/src/css/setup/_variables.scss b/www/src/css/setup/_variables.scss new file mode 100644 index 0000000000000..2fef6bae8d6a6 --- /dev/null +++ b/www/src/css/setup/_variables.scss @@ -0,0 +1,16 @@ +$c-dark: #282c34; // dark blue +$c-darker: #20232a; // really dark blue +$c-brand: #61dafb; // electric blue +$c-text: #1a1a1a; // very dark grey / black substitute +$c-subtle: #777; // light grey for text +$c-divider: #ececec; // very light grey +$c-note: #ffe564; // yellow + +$breakpoints: ( + xsmall: (start: nil, end: 599), + small: (start: 600, end: 739), + medium: (start: 740, end: 979), + large: (start: 980, end: 1279), + xlarge: (start: 1280, end: 1339), + xxlarge: (start: 1340, end: nil) +); diff --git a/www/src/templates/article.html b/www/src/templates/article.html new file mode 100644 index 0000000000000..b89c587253b5f --- /dev/null +++ b/www/src/templates/article.html @@ -0,0 +1,263 @@ + + + + + + + ⚛ React Docs UI + + + + + + +
+ +
+
+
+ + +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ +
+ +
+ +
+ +
+

Hello World

+ Edit this page on GitHub +
+ +

+ The easiest way to get started with React is to use this Hello World example code on CodePen. You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use va local development environment, check out the Installation page. +

+ +
+

The smallest React example looks like this:

+
+
+ 
+ReactDOM.render(
+  <h1>Hello, world!</h1>,
+  document.getElementById('root')
+);
+
+
+

It renders a header saying "Hello World" on the page.

+

The next few sections will gradually introduce you to using React. We will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.

+
+
+

+ Caveat
+ Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. +

+

+ For example, class becomes className in JSX, and tabindex becomes tabIndex. +

+
+
+

A Note on JavaScript

+

React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don't feel very confident, we recommend refreshing your JavaScript knowledge so you can follow along more easily.

+

We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with arrow functions, classes, template literals, let, and const statements. You can use Babel REPL to check what ES6 code compiles to.

+
+ +
+ +
+ +
+ + + + +
+ +
+ +
+ + + +
+ + Toggle baseline grid + + Toggle columns grid + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + diff --git a/www/src/templates/index.html b/www/src/templates/index.html new file mode 100644 index 0000000000000..2cf3f3cce3565 --- /dev/null +++ b/www/src/templates/index.html @@ -0,0 +1,264 @@ + + + + + + + ⚛ React Docs UI + + + + + + +
+ +
+
+
+ + +
+ +
+ +
+
+
+ +
+
+
+
+ +
+ +
+
+
+

React

+

A JavaScript library for building user interfaces

+
+
+ + Get Started + +
+
+ + Take the tutorial + Search + +
+
+
+
+
+ +
+ +
+ +
+

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

+
+
+ +
+ +
+ +
+
+

A simple component

+
+

React components implement a render() method that takes input data and returns what to display. This input data is accessed through this.props.

+
+
+
+
+
+ 
+class HelloMessage extends React.Component {
+  render() {
+    return (
+      <div>
+      	Hello, {this.props.name}
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <HelloMessage name="John" />, mountNode
+);
+
+
+
+
Hello, John
+
+
+
+ +
+
+
+
+ +
+ +
+ + + + Toggle baseline grid + + Toggle columns grid + +
+
+
+
+
+
+
+
+
+
+ + +
+ + + + + + + + + + + + +