Great work!!! A cool grid based solution.
My suggestions:
- Only use mixins where you have repeatable code. You can do the font family declaration in the body in the _global.scss file
- A good solution is to nest elements as described in this article: Link about nesting sass that is, each block, element and modifier as a separate class without nesting, and leave nesting for pseudo-elements. With large projects or components you will only thank yourself for this.
- Instead of typing/counting values on rem, create yourself a function in css. that will do it for you. This way you can define all the sizes and values in the _variables.scss file, and use pre-made elements.
- You also don't have to use @use in the main file, you can point to whole directories with the right layout of what to use. For example the components directory: add _index.scss and rename all elements to _name.scss. in the _index file, add
@forward ‘name’and so add every other file from that directory. Finally in the main.scss file add just the directory itself@use ‘components’. The same action, but more logically structured. Link
As for HTML semantics, I still have trouble understanding what, where and how to use what, what should be nested in what and what shouldn't, so I won't be much help. Also be interested in the clamp property in css. If set properly it will allow you to reduce the amount of media queries, but provided the design in question looks good in the fluid approach.
Marked as helpful
0
