feat: adding styles guidance #6
Conversation
docs/development/styles.md
Outdated
|
|
||
| * rem - preferred for accesibilty and for fonts | ||
| * borders - these could be in **px** | ||
| * div tags - should be more percentage based |
There was a problem hiding this comment.
Disagree with this as a general rule, especially without any explanation/guidance
There was a problem hiding this comment.
After watching the video of the meeting, there wasn't really any explanation, so i think we should talk through this and the other comment in the next meeting
docs/development/styles.md
Outdated
| The team thought that it was important to stick with one for a consistent UI and consistecy across the application. Some helpful recommendations that came out of our discussion where: | ||
|
|
||
| * rem - preferred for accesibilty and for fonts | ||
| * borders - these could be in **px** |
docs/development/styles.md
Outdated
|
|
||
| #### Vendor prefixes | ||
|
|
||
| Browser vendors would add prefixes to non-standard/new css properties for developers to experiment with. The team recommends the use of the [autoprefixer](https://www.npmjs.com/package/autoprefixer) library, which is an industry standard. While this might important when supporting older code, it is recommended to look at if and why you might need a prefix when creating new applicaitons. |
There was a problem hiding this comment.
should mention this is a postcss plugin and requires postcss, and maybe talk about postcss itself
|
consider adding content about css methodologies, e.g. BEM |
|
Not wanting this to be added in on the docs here, but wanted to start a discussion on whether it makes sense to add in a note about CSS-in-JS. CSS-in-JS was another pattern that is or was heavily used across projects at certain point in time. styled-components and Emotion are some of the popular CSS-in-JS libraries in the React community. |
If it is a pattern then i don't see why not |
|
@adimaniacal thanks for the spelling updates. this just proves how bad of a speller i am 🤣 |
|
@adimaniacal i just added a small section related to the css-in-js pattern. mostly copy/paste of what you wrote :) |
|
@paceaux i made some updates based on our latest meeting, mind taking a look |
|
@paceaux sorry for the second notification, but apparently in my above comment i had a space in between the @ symbol and the p, so i don't think you would have gotten the first notification 🤷 |
docs/development/styles.md
Outdated
|
|
||
| The use of [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) allows you to apply CSS styles to your application using various characteristics, such as screen resolution and orientation. Media Queries will help with the responsive approach to writing applications as mentioned above. | ||
|
|
||
| Another way of making an application responsive is with either the Grid or Flex layouts. The team is familiar with both Grid and Flex, while Grid is slightly prefered. Depending on the situation, both can be used. |
There was a problem hiding this comment.
| Another way of making an application responsive is with either the Grid or Flex layouts. The team is familiar with both Grid and Flex, while Grid is slightly prefered. Depending on the situation, both can be used. | |
| Another way of making an application responsive is with either the [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) or [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layout methods. The team is familiar with both Grid and Flexbox, while Grid is slightly preferred. Depending on the situation, both can be used. | |
| The most significant distinction between Grid and Flexbox, is that Grid is a two-dimensional layout method and Flexbox is a one-dimensional layout method. |
There was a problem hiding this comment.
I'm fine if we want to say Grid is slightly preferred, but if we are going to say that, we should explain why. Also, my opinion is that if your requirement is for a one-dimensional layout, then Flexbox is preferable because there's less to fiddle with.
Co-authored-by: Chris de Almeida <ctcpip@users.noreply.github.com>
Co-authored-by: Chris de Almeida <ctcpip@users.noreply.github.com>
No description provided.