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

Base Media Query Setup #61

Closed
2 tasks done
arcticicestudio opened this issue Dec 5, 2018 · 0 comments
Closed
2 tasks done

Base Media Query Setup #61

arcticicestudio opened this issue Dec 5, 2018 · 0 comments
Labels
context-ui scope-configurability scope-maintainability scope-ux type-feature
Milestone
0.3.0

Comments

@arcticicestudio
Copy link
Contributor

arcticicestudio commented Dec 5, 2018 •
edited
Loading

Associated epic: #52

To start implementing components with responsive styled through media queries, a basic setup must be created based on the “Responsive Web Design” design concept.

Media Query Generator

To simplify the usage of media queries with styled-components, a utility function to generate media templates 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 #54.

Initial Media Queries

Always adjust media queries to the content individually and not vice-versa.
The design supports the content. Not the other way around.

Like documented in the #52, Nord Docs uses the mobile-first pattern and follows the great “Google Developer Responsive Web Design” guidelines. The recommended way is to create media queries not based on any device sizes but individually based on the content which is unique for each project. This is the best practice and, contrary to most popular CSS framework like Bootstrap, the correct way since each site is different and there are thousands of devices and in the future new sizes will appear.
The first media query template will define the smallest min-width.

Tasks

  • Implement generateMediaQuery media query generator function.
  • Initially implement the first media query template for the smallest min-width.
@arcticicestudio arcticicestudio added this to the 0.3.0 milestone Dec 5, 2018
@arcticicestudio arcticicestudio self-assigned this Dec 5, 2018
@arcticicestudio arcticicestudio mentioned this issue Dec 5, 2018
Open
arcticicestudio added a commit that referenced this issue Dec 5, 2018
@arcticicestudio
Implement generateMediaQuery media query generator function
1924af4 
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
arcticicestudio added a commit that referenced this issue Dec 5, 2018
@arcticicestudio
Implement initial media query template functions
b209edb 
| Always adjust media queries to the content individually and not vice-versa.
| The design supports the content. Not the other way around.

Like documented in the GH-52, Nord Docs uses the mobile-first pattern
and follows the great "Google Developer Responsive Web Design
guidelines (1). The recommended way is to create media queries not based
on any device sizes but individually based on the content which is
unique for each project. This is the best practice and, contrary to most
popular CSS framework like Bootstrap, the correct way since each site is
different and there are thousands of devices and in the future new sizes
will appear.
Therefore, this commit includes the initial media query template
functions that define the smallest `min-width` query `base` (`<320px`)
and `minimal` (`>=320px`).

References:
  (1) https://developers.google.com/web/fundamentals/design-and-ux/responsive

Associated epic: GH-52
GH-61
@arcticicestudio arcticicestudio mentioned this issue Dec 5, 2018
Merged
arcticicestudio added a commit that referenced this issue Dec 5, 2018
@arcticicestudio
Merge pull request #62 from arcticicestudio/feature/gh-61-base-media-…
6b78d69 
…query-setup

Base Media Query Setup
@arcticicestudio arcticicestudio removed their assignment Dec 5, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
context-ui scope-configurability scope-maintainability scope-ux type-feature
Projects
None yet
Milestone
0.3.0
Development

No branches or pull requests
1 participant
@arcticicestudio