Design Concept: Components #63
Assignees
Comments
This was referenced Dec 6, 2018
arcticicestudio
added a commit
that referenced
this issue
Dec 6, 2018
arcticicestudio
added a commit
that referenced
this issue
Dec 6, 2018
This is the default layout of Nord Docs that consists of the `Root` core container (1) as root element and the core components representing the header (2), the main page container (3) and the footer. References: (1) #36 (2) #64 (3) #65 Associated epic: GH-63 Depends on GH-65 Relates to: GH-36, GH-64 GH-66
This was referenced Dec 6, 2018
arcticicestudio
added a commit
that referenced
this issue
Dec 8, 2018
- react-pose (1) - subscribe-ui-event (2) References: (1) https://www.npmjs.com/package/react-pose (2) https://www.npmjs.com/package/subscribe-ui-event Associated epic: GH-63 GH-64
svengreb
pushed a commit
that referenced
this issue
Dec 12, 2018
The drop down of the navigation link slide menu will start right below the header and take up the available height and width to cover the full screen. The added package's purpose provides methods to remove all scroll listeners from the underlying content (body) as soon as the animation starts. This prevents users from scrolling the content below the menu when the menu itself overflows the Y-axis and shows a scroll bar. Associated epics: GH-63, GH-2 GH-64
arcticicestudio
added a commit
that referenced
this issue
Dec 13, 2018
This commit implements the various local styled atom components the `Header` organism component consists of. This includes the main HTML `header` element with flexbox layout that contains two containers. The first left-sided container is the branding logo and caption while the second one provides the navigation link list and global theme mode switch button. The navigation link list will be replaced with a slide menu when reaching the CSS breakpoint. This menu will slide down starting right below the `header` and provides the navigation links for shrinked width views. The global theme mode switch consists of the `MoonIcon` and `SunIcon` components which are animated to "rise up and go down" when toggled. All components will adhere to maximum content width based on the `Content` core container component. Associated epic: GH-63 GH-64
arcticicestudio
added a commit
that referenced
this issue
Dec 13, 2018
> Layout The header uses a CSS flexbox layout consisting of two container components with the maximum of flexible space between both. The containers contain the branding component and the navigation like documented in the sections below. > Navigation To allows users to simply navigate around the site, the component provides the quickly accessible navigation. It is placed in the right-sided container. As of now the following link items are included: - "Ports" - links to `/ports`, the landing page for all Nord port projects. - "Docs" - links to `/docs`, the landing page for Nord's documentation. - "Blog" - links to `/blog`, the landing page for Nord's blog. - "Community" - links to `/community`, the landing page of the Nord community channels. > Branding To represent Nord's branding, the left-sided container consists of the Nord logo and a caption/label. It links to Nord Docs landing page to allow quick access to the root (`/`) page. > Theme Mode Switcher The user action component mentioned in the introduction paragraph above allows to toggle between the available global theme modes. Both modes are represented through icons where a sun is used for "bright snow flurry" and a moon for "dark night frost" mode. They are implemented using the awesome "React Pose" (1) project to animate the "rising up" and "going down" sequences. The icons fly out and in" within the bounds f the component that takes the form of a button. Like documented in the Iconography design concept (2), the awesome "Eva Icons" (3) project will is used where the "moon" and "sun" icons represent the both available theme modes. > Responsive Design For reduced width views (responsive design) the header adjusts several styles and composed components. >> Slide Menu The main navigation link list will be hidden and replaced by the user action element (button) that toggles an animated slide down menu containing the navigation links. The drop down will start right below the header and takes up the available height and width to cover the full screen. As soon as the animation starts all scroll events will be removed from the underlying content (body) using the "body-scroll-lock" (4) project. This prevents users from scrolling the content below the menu when the menu itself overflows the Y-axis and shows a scroll bar. >> Behavior To allow quick access while also being inconspicuous, the component is "sticky" at the top of the site, but will collapse as soon as the user scrolls down. It'll only switch into expanded mode when at top of the site. In expanded mode, the height of the header is larger and the caption/label of the logo is visible. As soon as switching into collapsed mode the height decreases and the caption fades out with a smooth transition animation. To achieve the resizing animation based on the scroll position the "subscribe-ui-event" (5) project is used to listen to scroll events. It provides throttling by default, only calls `document.body.scrollTop` and `window.innerWidth` once and uses `requestAnimationFrame` for the best performance. References: (1) https://popmotion.io/pose (2) #74 (3) https://akveo.github.io/eva-icons (4) https://www.npmjs.com/package/body-scroll-lock (5) https://www.npmjs.com/package/subscribe-ui-event Associated epic: GH-63 GH-64
This was referenced Dec 13, 2018
Closed
arcticicestudio
added a commit
that referenced
this issue
Dec 17, 2018
This commit implements a base HTML component that represents a `<section>` (1) with multiple base style variants. References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section Associated epic: GH-63 GH-78
arcticicestudio
added a commit
that referenced
this issue
Dec 18, 2018
This commit implements the main 404 (1) page component to handle requested but non-existing routes and resources. Iz aligns with Nord Docs brand and can use a humorous illustration and tagline that conveys the purpose of the screen, without appearing actionable. See the great Gatsby documentation about 404 pages (2) for more details. > Structure The component consists of three parts: an vector illustration, the headline and the corresponding subline. > Vector Illustration The illustration is the main element of the page component. It presents the exception/error case with a friendly visualization. > Text Content The headline and subline inform the user about the purpose of the illustration and the reason why it is currently shown and can include helpful instructions on how to continue. References: (1) https://en.wikipedia.org/wiki/HTTP_404 (2) https://www.gatsbyjs.org/docs/add-404-page Associated epics: GH-63 GH-84
This was referenced Dec 24, 2018
Closed
arcticicestudio
added a commit
that referenced
this issue
Dec 28, 2018
It represents the HTML `<footer>` element and is an essential part of Nord Docs providing a sitemap, the Arctic Ice Studio organization branding logo and caption, networking & social media links as well as the copyright paragraph including version information. > Layout The footer uses a CSS flexbox (1) and grid (2) layout consisting of two container components with the maximum of flexible space between both. The left-side container contains the branding and link components while the right-side container contains the sitemap like documented in the sections below. >> Sitemap To allow users to simply navigate around the site, next to the main header, the component provides the quickly accessible sitemap. This container uses the flexbox layout where each base route of the site is added as one category represented as a column. Each of these consists of an heading, the name of the route, and the corresponding sub-routes. As of now the following base routes are included: - "Nord" — links to `/` and includes all sections of the main landing page. - "Ports" — links to `/ports` and includes all sections of the Nord port projects. - "Docs" — links to `/docs` and includes all sections of Nord's documentation. - "Blog" — links to `/blog` and includes all sections of Nord's blog. - "Community" — links to `/community` and includes all sections of the Nord community channels. >> Organization Branding To represent Arctic Ice Studio's organization branding, the left-sided container contains the logo with the caption that links to the organization website. It's placed in one line with the category heading of the sitemap like documented in the section above. >>> Social Media & Networking Links The left-side container also contains the social media & networking links where each link is represented through the icon of the corresponding site/service. They are placed in one line with a flexible layout to adust based on the available width. >> Version Information The last elements of the left-side container is a paragraph providing version information about the site like the currently running version number (with "commits ahead" metadata when required) and the build & deployment date. It also has additional Git metadata added as `data-` attributes and `<time>` HTML element. > Responsive Design For reduced width views (responsive design) the footer adjusts several styles and composed components. For really small view ports the grid layout switches to a flexbox layout. References: (1) https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox (2) https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids Associated epic: GH-63 GH-106
arcticicestudio
added a commit
that referenced
this issue
Jan 8, 2019
It provides multiple variations: - `primary` — uses the primary color `nord8` for background/border/text colorization - `secondary` — uses the secondary color `nord9` for background/border/text colorization - `simple` — uses the _Snow Storm_ and _Polar Night_ palettes for background/border/text colorization - `subtle` — only colorizes the background on hover using the "Snow Storm" and "Polar Night" palettes for background/border/text colorization Next to variations there are additional props to toggle more styles: - `dashed` — uses the `dashed` property for the CSS `border-style` (1) attribute - `ghost` — only uses a border instead of a background color - `outlined` — uses uses a border in addition to a background color - `quiet` — keeps the initial text colorization on hover References: (1) https://developer.mozilla.org/en-US/docs/Web/CSS/border-style Associated epic: GH-63 GH-110
arcticicestudio
added a commit
that referenced
this issue
Jan 8, 2019
It consists of the previously implemented styles and variants and represents a `<button>` (1). Next to this is can also wrap the base HTML element atom `A` (2) to handle internal and external links. References: (1) https://developer.mozilla.org/de/docs/Web/HTML/Element/button (2) #70 Associated epic: GH-63 GH-110
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
>> Hero The first section is the "hero" of the landing page that renders a short project description and the animated SVG component "Arctic Landscape" (1). The animation is triggered through the "React Waypoint" (1) project. >> Color Palettes The 2nd and 3rd sections are about Nord's color palettes and they provide information about the modularity and contrast. All palettes are visualized through the new `ColorPaletteCard` component that consists of the actual color as small, rounded boxes and the associated color code as label using the hexadecimal format. >> "Nordify" The 4th section presents Nord's port projects which can be used to "nordify" the favorite apps and platforms of the users. It consists of the text content as well as a new illustration that might also be animated later on using a 3D parallax effect that renders based on the current mouse position in the section. >> Color Swatches The 5th section is about Nord's "native" color swatches. It consists of the same elements like the 4th section, but renders a new non-animated illustration showing a application UI with Nord loaded as color palette. >> Syntax Highlighting The 6th section is all about Nord's features to highlight code. Next to the text content and summary it also renders a new and animated illustration. >> Community The 7th and also last section presents details about Nord's communities. It renders the animated Arctic Ocean Fractal (3) component and a short summary about how to join and being part of the Nord community. >> Responsive Design All implemented sections follow the responsive design concept (4) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) https://github.com/arcticicestudio/arctic-landscape (2) https://github.com/brigade/react-waypoint (3) https://www.npmjs.com/package/arctic-ocean-fractal (4) #52 Associated epics: GH-52, GH-63 GH-112
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This commit implements all main organism components for the community page sections. >> Hero The first section is the "Hero" of the community page that renders a description about the page's purpose and an animated SVG component. >> Chats The 2nd section is about Nord's community chats where each platform is represented as card rendered in a two-column grid layout. Each card contains the platforms official logo, colorized with colors of the respective brand guidelines, a short summary about the platform/service and a link component that forwards to the community within the platform. Next to the official main channel each platform also provides sub-channels for all port projects. The following community chats of Nord are represented: - Arctic Ice Studio's official community on "Spectrum" (1) - Nord's official Keybase team chat (2) - Nord's official Slack (3) workspace - Nord's official Discord (4) space >> Content The 3th and also last section presents platforms where the community can create content and ask questions for and about Nord. Next to the official documentation these are knowledge bases also powered by community. Like the chat platforms in the previous section each platform/service is represented as card including the same information, rendered by the same components, and also structured in a two-column grid layout. Next to this, each card includes the latest three items (questions, posts etc.) of the platform's community rendered as link component with the item's title and metadata like tags, the name of the author and the relative creation date/time. The following community platforms of Nord are represented: - Latest questions from Stack Overflow (5) tagged with `nord` or `nordtheme` - Nord's official "/r/nordtheme" (6) subreddit All data is fetched from the official REST APIs from the respective platform using the axios (7) client. The processing of any date/time data is handled with date-fns (8), a modern and more lightweight ES6+ library with tree-shaking support that'll be used project-wide for Nord Docs to handle any other date/time data like e.g. blog posts metadata. >> Responsive Design All sections follow the responsive design concept (9) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) https://spectrum.chat/arcticicestudio (2) https://keybase.io/team/nord.chat (3) https://arcticicestudio.slack.com (4) https://discordapp.com (5) https://stackoverflow.com/questions/tagged/nord+or+nordtheme (6) https://www.reddit.com/r/nordtheme (7) https://github.com/axios/axios (8) https://github.com/date-fns/date-fns (9) #52 Associated epic: GH-63 GH-115
arcticicestudio
added a commit
that referenced
this issue
Feb 2, 2019
This commit implements all docs page section component including required changes to other components. >> Hero The first section is the "hero" of the docs page that renders a description about the page's purpose. >> Contents Cards The 2nd section is about Nord's documentation contents where each category is represented as card rendered in a two-column grid layout. Each card contains a topic icon, colorized with a accent color from Nord's palettes and a short summary about the topic's links. Currently this includes the "Getting Started" and "References" category. >> Responsive Design All sections following the "responsive design concept" (1) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) #52 Associated epic: GH-63 GH-117
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This epic documents the design concept for the React function and class components of Nord Docs. The architecture and project structure is documented in the “Component & Project Structure” design concept.
Core Components
All implementation details and requirements are documented and tracked in the corresponding issues:
Page Components
All implementation details and requirements are documented and tracked in the corresponding issues:
-The text was updated successfully, but these errors were encountered: