Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Sub-issue of #1190252: [573] Use csslint as a weapon to beat the crappy CSS out of Drupal core
Inline with the CSS cleanup efforts of the HTML5 initiative, using CSSLint at http://csslint.net provides a quick way to code-sniff our css and tweak styles.
- Copy and paste the the stylesheet(s) below into the css lint tool at http://csslint.net and test.
- Fix any warnings or errors the tool finds.
- Patch Drupal 8 locally and make sure the css changes have not broken anything visually.
- Create patch and upload for the testbot.
Files: modules/color/color.css and color-rtl.css
Comment | File | Size | Author |
---|---|---|---|
#30 | interdiff.txt | 520 bytes | lokapujya |
#30 | 1662958-30.patch | 19.86 KB | lokapujya |
#18 | drupal8.color-module.1662958-17.patch | 19.89 KB | jason.bell |
#14 | csslint-color-codingstandards-1662958.patch | 15.07 KB | StryKaizer |
#4 | csslint-color-1662958.patch | 4.41 KB | barraponto |
Comments
Comment #1
RobLoachhttps://gist.github.com/3006391#L6038
Comment #2
barraponto CreditAttribution: barraponto commentedThe problem is it doesn't have any other usable selector besides the IDs. So we might have to dig into the JS.
Comment #3
barraponto CreditAttribution: barraponto commentedThis is FUBAR. I mean, it needs to be addressed in color.module, color.js and the themes implementing it (including the js in the themes) :|
Comment #4
barraponto CreditAttribution: barraponto commentedSo, what I actually did was add classes, leave the ids the way they were. Trying to remove the ids would force me to go through the js files and it's enough of a patch for this file.
Comment #5
barraponto CreditAttribution: barraponto commentedThis still applies cleanly. Color widget seems unaffected by this patch (as supposed).
Comment #6
markhalliwellIf we're going to replace IDs with classes (which we should btw +1), you might as well remove the IDs entirely from the JS and HTML.
Comment #7
barraponto CreditAttribution: barraponto commented@Mark Carver, agreed, but it's quite some effort to remove the id from js. I suggest it as a follow up patch.
Comment #8
markhalliwell#4: csslint-color-1662958.patch queued for re-testing.
Comment #10
markhalliwellPatch needs to be rerolled against the latest HEAD.
On a side note, we may want to also refactor this patch against our CSS coding standards while we're at it.
Comment #11
iflista CreditAttribution: iflista commentedWorking with this.
Comment #12
plopesc@iflista, marking as unassing given that there are no work for more than three weeks.
If you're interested on work on it, please reassign it.
Regards.
Comment #13
StryKaizerWorking on this
Comment #14
StryKaizerCss classes renamed as suggested in css code styling.
This patch also fixes Bartik, which overrides the color template.
Some js selectors had to be rewritten for this patch to allow the new code styling.
Comment #15
StryKaizerNeeds review
Comment #17
jason.bell CreditAttribution: jason.bell commentedIs the intention with CSS Lint to remove all errors, warnings, or both?
ZenDoodles asked me to upload this patch.
Comment #18
jason.bell CreditAttribution: jason.bell commentedthose files you requested.
Noticed in the previous patch that the id "placeholder" was removed. It looks to me like the placeholder div is generated via the color.js and that farbtastic depends on the id "placeholder". I ended up adding a class on that element to apply style and layout css instead of calling #placeholder.
Comment #19
barraponto CreditAttribution: barraponto commentedrun, bot!
Comment #20
markhalliwellWe should be following jQuery Coding Standards. I know this issue just said CSS, but when that changes, so does the markup/JS:
Comment #21
petermallett CreditAttribution: petermallett commentedDid some cleanup for JS/jQuery coding standards for variable names & using the context passed to attach. (https://drupal.org/node/172169 as well as https://drupal.org/node/1720586).
I wasn't sure what was meant by "proper event delegations" at this time, so this will probably need another pass.
This work was started during the Drupalcamp ATL code sprint for http://drupalmentoring.org/task/4416
Comment #22
areke CreditAttribution: areke commentedThis patch needs to be rebased against the current HEAD; it no longer applies.
Comment #23
lokapujyaComment #24
nod_I'd rather not mess with JS here. Just make the bare minimum changes please. Anything else should be dealt with in #1751334: Selectors clean-up: color module (and there is already a patch fixing things to review).
Also don't forget the JavaScript tag on JS issues. Otherwise JS maintainers can't have a look at it and will reopen the issue and probably complain, thanks :D
Comment #25
lokapujyaRemoved .js changes since they will be handled in another issue. Kept changes needed for using a class instead of the ID.
Comment #26
lokapujya25: 1662958-25.patch queued for re-testing.
Comment #28
lokapujyaRe-roll.
Comment #29
markhalliwellI think you forgot to remove the #id. Also, let's not change the name, just the specificity here.
There should be a single empty line at the end of the file (for git).
Comment #30
lokapujyaI kept the placeholder ID, per comment #18. (Something about Farbtastic.) The missing newline was in the existing code. Unassigning because I might not get to work on this for a while.
Comment #31
lokapujya30: 1662958-30.patch queued for re-testing.
Comment #33
lokapujyaI noticed #2268955: Deprecate farbtastic library and remembered this issue, so that placeholder ID can probably be removed with a reroll.
Comment #34
lokapujyaComment #35
markhalliwellAgreed. Let's postpone this until Farbtastic is removed. No sense in trying to clean up something that will end up just being removed anyway.
Comment #38
Manuel Garcia CreditAttribution: Manuel Garcia as a volunteer and at Appnovation commentedJust removing the needs reroll tag, since this is going to be postponed for quite some time... farbtastic isnt going to be removed until #1651344: Use color input type in the color.module gets in, and that's postponed until Color input type gets support on all major browsers....
Comment #48
quietone CreditAttribution: quietone at PreviousNext commentedColor has been removed from core, #3270899: Remove Color module from core.