Re-factor and streamline the SCSS basics. #351
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rasben
force-pushed
the
refactor-everything
branch
11 times, most recently
from
cd51404 to
d10e235
Compare
rasben
force-pushed
the
refactor-everything
branch
10 times, most recently
from
f8006e6 to
1e6f1b5
Compare
rasben
force-pushed
the
refactor-everything
branch
3 times, most recently
from
9b54538 to
31fce6c
Compare
kasperg
reviewed
Dec 7, 2023
There was a problem hiding this comment.
Lots of stuff going on here. It can be hard to tell search/replace from meaningful comments.
I have some comments here and there about all sorts of stuff.
- There are some changes regarding name changes and the move to mixins where I personally do not understand the value.
- I like that you improve the documentation about our guidelines here.
- Your thoughts about when to use sizing variables or literal values needs to be elaborated. I could not infer your intention from the actual changes.
rasben
force-pushed
the
refactor-everything
branch
5 times, most recently
from
30055b0 to
6245dd8
Compare
LasseStaus
reviewed
Dec 8, 2023
rasben
force-pushed
the
refactor-everything
branch
from
6245dd8 to
d2e999c
Compare
This is a major overhaul and refactoring of all the basics. It moves shared items out of the individual stories, and into mixins, variables and other base files. One of the major things is that it streamlines typography: It introduces a variables.typography.scss file, that defines all the typographies, and a @include typography($VARIABLE) to use them. This way, we can keep track of typographies, and have a single place to look when we make new modules. This way, we also have an easy way of quality-secure against figma. All of this is the first step. There is still a lot of stuff that needs to be fixed. To begin with, I've made sure that all existing classes still work. E.g. '.text-h1' will still compile to the same, but in SCSS we cant use %text-h1 anymore. A future step is to look through all the stuff I've marked as 'legacy', and tweak/remove/edit the classes throughout dpl-cms, react and other places.
rasben
force-pushed
the
refactor-everything
branch
from
d2e999c to
01351af
Compare
spaceo
reviewed
Dec 11, 2023
| run: yarn css:prettier -- --check | ||
|
|
||
| js_prettier: | ||
| markdown-linkt: |
spaceo
reviewed
Dec 11, 2023
There was a problem hiding this comment.
Looks good. Nice work!
A bit of a rubber stamp approval from my side I must admit.
I need to get my fingers dirty in order to get a feeling of it.
Also with my limited experience of working with styling I need to get my fingers dirty to get a feeling of it, rather than looking at page after page with changes 😄
kasperbirch1
approved these changes
Dec 11, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Re-factor and streamline the SCSS basics.
This is a major overhaul and refactoring of all the basics.
It moves shared items out of the individual stories, and into
mixins, variables and other base files.
One of the major things is that it streamlines typography:
It introduces a variables.typography.scss file, that defines all
the typographies, and a @include typography($VARIABLE) to use them.
This way, we can keep track of typographies, and have a single place
to look when we make new modules.
This way, we also have an easy way of quality-secure against figma.
All of this is the first step. There is still a lot of stuff that
needs to be fixed.
To begin with, I've made sure that all existing classes still work.
E.g. '.text-h1' will still compile to the same, but in SCSS we cant
use %text-h1 anymore.
A future step is to look through all the stuff I've marked as
'legacy', and tweak/remove/edit the classes throughout dpl-cms, react
and other places.
I've added documentation here - please start by reading that :)
https://github.com/danskernesdigitalebibliotek/dpl-design-system/blob/31fce6cfb1ea1ac682ca51e97118ebc60ce125e1/docs/scss.md