Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design Concept: Brand Design & Styling #51

Open
arcticicestudio opened this issue Dec 1, 2018 · 0 comments
Open

Design Concept: Brand Design & Styling #51

arcticicestudio opened this issue Dec 1, 2018 · 0 comments
Assignees
@arcticicestudio
Labels
context-documentation context-ui scope-ux status-tracking type-epic

Comments

@arcticicestudio
Copy link
Contributor

arcticicestudio commented Dec 1, 2018 •
edited

This epic documents the design concept for the brand design & styling of Nord Docs.

🚧 This is a living document which means it is work in progress, not completed yet and will be extended!

UI Branding

The UI branding will be based and build on Nord's style ideas that tries to achieve a simple, uncluttered and clear design. It follows the approach of minimal and flat designed elements with an elegant and non-disturbing charisma.
All elements will adhere to a global site theme for a fluid transition between elements and a uniform appearance.

The main global theme will represent Nord's “bright_snow_flurry” aura that represents a light style with bright elements while “dark night frost” represents the darker aesthetic impression of Nord that is initially used for syntax and UI port projects.

Many fantastic design inspiration sources like Dribbble, Uplabs and awesome resources like Refactoring UI are part of Nord Docs the design and development process.

All implementation details and requirements are documented and tracked in the corresponding issues:

  • -

Styling

All styles will be implemented with the fantastic and one of the most popular CSS-in-JS libraries styled-components. It alows to use the power of JavaScript within CSS which was previously only possible via CSS pre-processors like Sass or LessCSS. It comes with builtin support to provide themes, the polished utility library to simplify the CSS styling and many more features.
Listing all of the great features is out-of-scope of this document. The well-written and really extensive documentation contains all information to get started and guides users through features and setups with tutorials.

All implementation details and requirements are documented and tracked in the corresponding issues:
@arcticicestudio arcticicestudio self-assigned this Dec 1, 2018
@arcticicestudio arcticicestudio mentioned this issue Dec 1, 2018
Closed
9 tasks
arcticicestudio added a commit that referenced this issue Dec 2, 2018
@arcticicestudio
Implement global and normalization CSS styles
66db7eb 
This commit implements global and normalization CSS styles using
"styled-components" `css` API. They extend "modern-normalize" and
define, next to the browser normalization, styles for the available
global themes.

In order to use fonts in "Nord Docs" style & themes (implemented in
GH-54) the basic properties and values have been added and integrated
into these base styles.

To inject global styles, styled-components v4 `createglobalstyle` (1)
API has been used to create a `<GlobalStyle>` component that injects
theme styles and "styled-modern-normalize" (2) globally.

References:
  (1) https://www.styled-components.com/docs/api#createglobalstyle
  (2): https://github.com/arcticicestudio/styled-modern-normalize

Associated epics: GH-51, GH-2
GH-53
arcticicestudio added a commit that referenced this issue Dec 2, 2018
@arcticicestudio
Implement ThemeProvider into Root core container
eeb4e96 
To provide the global theme (1), the `ThemeProvider` (2) component has
been implemented into the `Root` core container component (3). The
global theme, placed in `src/styles/themes` is passed to the provider to
make the theme globally available.

References:
  (1) https://www.styled-components.com/docs/advanced#theming
  (2) https://www.styled-components.com/docs/api#themeprovider
  (3) #36

Associated epics: GH-51
GH-53
This was referenced Dec 3, 2018
Merged
Closed
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Implement session storage/cache utility functions
8565156 
To persist the current active theme mode when changing the route (which
unmounts the `Root` component and therefore resets the state), the value
will be written to the browser's session storage (1). The storage type
has been preferred over the local storage (2) since this would persist
the active theme mode even when the user closes the tab, but the desired
behavior is to optimize the site for the "bright snow flurry" aura theme
mode.

To simplify the read- and write handling as well as prevent possible
errors due to wrong storage keys, two utility functions have been
implemented:

- `readSessionCache(key : string)` - Reads the value of the given key
  from the session storage (if available).
- `writeSessionCache(key : string, value : any)` - Writes the given
  key-value pair to the session storage (if available).

References:
  (1) https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
  (2) https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Associated epic: GH-51
GH-57
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Implement the theme context provider & consumer components
9707de3 
Both the context consumer and provider components have been implemented
in the `Root` core container component . The consumer is exported which
can then be imported in any component to consume the provided values.

References:
  (1) #36

Associated epic: GH-51
GH-57
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Rewrite the Root core container as class-based component
bb6c044 
The `Root` component has been changed from a SFC to a class component to
store the currently active state and handle the theme mode toggle logic
through a function. It also migrated the currently used simple
"styled-component" theme (1) (provided through the `<ThemeProvider`
component) to the styled-theming theme (2) that provides the initially
implemented theme (GH-53).

References:
  (1) https://www.styled-components.com/docs/advanced#theming
  (2) https://github.com/styled-components/styled-theming

Associated epic: GH-51
GH-57
This was referenced Dec 4, 2018
Merged
Closed
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Implement "background" and "font" CSS module styles
dc5f56b 
They will be initially used in the global theme styles implemented
in GH-53.

Associated epic: GH-51
GH-59
arcticicestudio added a commit that referenced this issue Dec 4, 2018
@arcticicestudio
Integrate basic font and background colors in global CSS theme styles
68a39cc 
This includes a `transition` for both attributes to ensure a smooth
theme mode transition.

Associated epic: GH-51
GH-59
This was referenced Dec 4, 2018
Merged
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@arcticicestudio arcticicestudio

Labels
context-documentation context-ui scope-ux status-tracking type-epic
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@arcticicestudio