Design Concept: Iconography #74
Assignees
Comments
13 tasks
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
arcticicestudio
added a commit
that referenced
this issue
Dec 25, 2018
This includes the official logo of Arctic Ice Studio, more UI icons as well as several social media & community sites and services: - Discord (1) - GitHub (2) - Keybase (3) - Reddit (4) - Slack (5) - Spectrum (6) - Twitter (7) References: (1) https://discordapp.com (2) https://github.com (3) https://keybase.io (4) https://reddit.com (5) https://slack.com (6) https://spectrum.chat (7) https://twitter.com https://akveo.github.io/eva-icons https://simpleicons.org Associated epic: GH-74 GH-106
arcticicestudio
added a commit
that referenced
this issue
Dec 26, 2018
This includes the official logo of Arctic Ice Studio, more UI icons as well as several social media & community sites and services: - Discord (1) - GitHub (2) - Keybase (3) - Reddit (4) - Slack (5) - Spectrum (6) - Twitter (7) References: (1) https://discordapp.com (2) https://github.com (3) https://keybase.io (4) https://reddit.com (5) https://slack.com (6) https://spectrum.chat (7) https://twitter.com https://akveo.github.io/eva-icons https://simpleicons.org Associated epic: GH-74 GH-106
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This epic documents the icon design concept of Nord Docs. It defines the process steps to decide about all iconography aspects like the base sizes and usage within components/themes.
All implementation details and requirements are documented and tracked in the corresponding issues:
-Icon Stack
To achieve a uniform design across Nord and its brand the main icon stack will be the awesome Eva Icons project. They match the overall branding and especially the chosen typefaces documented in the “Typography” design concept They are designed with a rounded appearance and a minimal and elegant feeling while being expressive about their meaning.
Other icon projects that might be used, when there are icons missing for specific use cases, will be “Feather Icons” and Ionicons. Both are also similar to Eva Icons are match the Nord brand style.
All of these icons that are open source like Nord itself. There might also be some icons coming from the long awaited “Refactoring UI” book that has been released yesterday which is used as reference and inspiration for Nord Docs in several other design concepts.
The text was updated successfully, but these errors were encountered: