672 bem refactor colors.scss #808
Conversation
Still work in progress, we have quite a few gray colors that could use some help normalizing. Also a few issues with semantics where the color variable used is not very intuitive (e.g. border-color: $idea-background )
|
I noticed I left a few classes behind under the Buttons and Borders section, I'll update those soon. I also don't want to alter the design too much but I'd like to have a little more controlled variation of shades of color (grays especially, we had close to 10 variations). I'll work on being consistent with the original design by using sass color functions like darken and lighten |
|
A little more context on the approach I took with the refactoring, the comments are interesting (until one guy hijacks them): https://www.bensmithett.com/stop-using-so-many-sass-variables/ |
begedin
left a comment
begedin
left a comment
There was a problem hiding this comment.
Looks good to me. Really, the biggest gain here is the guideline text 😄
@joshsmith Feel free to take a look as well and approve if you feel it's good to go. We do have a couple of css-related PRs up, though, so we should make sure none of them conflict.
|
Doing a bit more research on making the most of Sass functions for colors, another good resource: |
|
I still need to look at this but may not be until beginning of next week. @rlueder can you help to ensure your changes don't get unmanageable for you by rebasing onto upstream develop regularly and fixing merge conflicts? |
This commit is mainly experimental. I removed superfluous div elements from the main header and footer, rearranged some of the folders under /app/styles and added shame.css for temporary styles we want refactored or removed in the future. All but one test is passing (related to ESLint) which is a good thing.
Large refactoring of header, footer and content areas. Also refactored Sign In, Sign Up and onboarding flow (hello, skills, expertise, interests). TO-DO: image-drop needs component and user dropdown need styling
NOTE: to test add the class .site__content--starter to pages that are part of the onboarding flow (footer of these pages is not separate from content block and needs a few different flexbox settings, perhaps it'd be easier to treat it as a footer? WIP)
|
Closed in favor of #846 which is way more comprehensive than this PR |
What's in this PR?
This is a big refactor of _colors.scss, looking forward to feedback on the changes.
Main goals were to make the stylesheet easier to scan and avoiding a few semantics issues e.g.
.task-new-form-body {border-color: $idea-background;}Hopefully it’ll also help newcomers avoid guesswork when having to assign colors to elements.
References
Progress on: #672