Typefaces #54
Labels
Milestone
Comments
arcticicestudio
added a commit
that referenced
this issue
Dec 2, 2018
Installed the - main stylistic and visualization sans-serif font Rubik (1) through the typeface-rubik (2) package. - sans-serif font Inter UI (3) for documentations, technical and factual content through the `i`nter-ui (4) package. - main monospace font Source Code Pro (5) for all code elements through the typeface-source-code-pro (6) package. References: (1) https://fonts.google.com/specimen/Rubik (2) https://www.npmjs.com/package/typeface-rubik (3) https://rsms.me/inter (4) https://www.npmjs.com/package/inter-ui (5) https://fonts.google.com/specimen/Source+Code+Pro (6) https://www.npmjs.com/package/typeface-source-code-pro GH-54
arcticicestudio
added a commit
that referenced
this issue
Dec 2, 2018
In order to use the fonts is must be added to Nord Docs theme. This commit implements the `typography` module that defines all used font families and the basic typography properties and values like the font size and units based on the used modular scale documented in GH-2. Associated epic: GH-2 Dependency of GH-53 GH-54
Merged
arcticicestudio
added a commit
that referenced
this issue
Dec 2, 2018
arcticicestudio
added a commit
that referenced
this issue
Dec 2, 2018
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 5, 2018
To simplify the usage of media queries (1) with styled-components (2), a utility function to generate media templates (3) will be implemented. It'll use the `min-width` parameter to fulfill the used "mobile-first" approach. The base size that'll be used has been implemented as theme property in GH-54 (4). References: (1) https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries (2) #52 (3) https://www.styled-components.com/docs/advanced#media-templates (4) https://github.com/arcticicestudio/nord-docs/pull/55/files#diff-90a2aa45c339ce4720a7fbbd23c65e3eR49 Associated epic: #52 GH-61
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This issue handles the integration of the typefaces documented in the “Typograhpy” design concept. All fonts will be included through the great typefaces project that provides NPM packages for almost all open source fonts to simply add and import them in web & Node based projects.
Rubik
Install the main stylistic and visualization sans-serif font Rubik through the typeface-rubik package.
Inter UI
Install the sans-serif font Inter UI for documentations, technical and factual content through the inter-ui package. Note that the font is currently not available through Google Fonts yet, but might be added in the future very soon due to its large popularity and perfect implementation.
Source Code Pro
Install the main monospace font Source Code Pro for all code elements through the typeface-source-code-pro package.
Style Integration
In order to use the fonts is must be added to Nord Docs theme. It will define all used font families and the basic typography properties and values like the font size and units based on the used modular scale documented in #2.
Tasks
The text was updated successfully, but these errors were encountered: