Problem/Motivation

The BAT (base-admin-theme) file organization we started to do in Drupal 8 was a fantastic idea. See http://drupal.org/node/1089868

It works really well, but its names conflict with the SMACSS categorization we're using in Drupal 8. "base" and "theme" means something else in SMACSS. So we just need to rename them.

Note: this is part of the meta issue: #1921610: [Meta] Architect our CSS

Proposed resolution

MODULE.base.css becomes MODULE.module.css.
MODULE.admin.css stays the same (but requires adding a MODULE.admin.skin.css so admin themes can override the default skin).
And MODULE.theme.css becomes MODULE.skin.css.

In addition, since our template files are now in a templates sub-directory of a module, we should do the same for the CSS. Note that the toolbar, tour and views modules already put styles in a css/ directory.

This is part of the CSS standard described at http://drupal.org/node/1887922

This patch (one of several issues) just converts all of the core modules that only have *.admin.css files and puts them in a css/ sub-directory:

Remaining tasks

After this issue's completion, we still have all the other steps outlined at #1921610: [Meta] Architect our CSS.

User interface changes

none

API changes

The system.module's CSS files will have new names.

Comments

ckrina’s picture

StatusFileSize
new1.79 KB

Testing with that:
- Moved the block.admin.css file to a new "css" folder created in the module.
- Changed the name from block.admin.css to block.admin.skin.css.

ckrina’s picture

Changing status to "needs review" to test patch.

aspilicious’s picture

Status: Active » Needs review
sun’s picture

Please adjust your git configuration to use renames=copies. See Configuring Git for details.

ckrina’s picture

Thanks aspilicious.

sun: ok, I'll check it and then I will upload the rest ofe the patch.

ckrina’s picture

StatusFileSize
new14.71 KB

Changes done in all modules mentioned in the issue:
- Rename MODULE.css or MODULE.admin.css to MODULE.admin.skin.css
- Moved all in the new module css folder.
- Moved -rtl.css files to css folder too, and renamed as MODULE.admin.skin-rtl.css (based on language.module function language_css_alter). Anyway, left previous name fors entity_reference-rtl.admin.css to entity_reference-rtf.admin.skin.css because I'm not sure how it works.

Status: Needs review » Needs work

The last submitted patch, rename_module_css-1925320-6.patch, failed testing.

ry5n’s picture

I just want to point out that module.admin.css should remain, containing structural styles only (layout, component styles required for functionality). The styles that are moved to module.admin.skin.css should be those related to appearance, like border, background, border-radius, etc.

shyamala’s picture

Issue tags: +d8mux, +d8mux-css-cleanup

Updating tags

ckrina’s picture

Status: Needs work » Needs review
Issue tags: +SprintWeekend2013
StatusFileSize
new926 bytes
new3.39 KB

OK, first thanks for help to novices.
Here I add separate block and color patches. What I've done to them:
- block

  • created css folder and move inside the css files
  • separated admin.css and admin.skin.css
  • changed reference path to css in block.admin.inc and lib/Drupal/block/BlockListController.php

- color

  • created css folder and move inside the css files
  • changed reference path to css in color.module
ckrina’s picture

I'll put all together into a single patch when all of them are correct.
- dblog

  • created css folder and move inside the css files
  • changed reference to css in dblog.module

- entity_refrence

  • changed name from entity_reference-rtl.admin.css to entity_reference.admin-rtl.css

- field_ui

  • created css folder and move inside the css files
  • changed reference to css in field_ui.module
amateescu’s picture

I think you could post intermediary patches with the "-do-not-test" suffix. The 5 from above will generate 5 hours of testbot working time which could be spent on dozens of other patches..

That being said, would you mind if I cancel their testing so other sprinters can have a chance at seeing the result of their patches today? :)

ckrina’s picture

Sure, I did not know that!

Status: Needs review » Needs work

The last submitted patch, field_ui_rename_module_css-1925320-11.patch, failed testing.

ckrina’s picture

Status: Needs review » Needs work
StatusFileSize
new6.25 KB

Moved the css files of the listed modules to the new css/ directory, and changed the refrence to it in the module files.

I've done some other changes that would be great that someone more confortable with D8-css-structures could review. Those changes are:
block
- separated block.admin.css and block.admin.skin.css
- changed reference to css in block.admin.inc and lib/Drupal/block/BlockListController.php
entity_refrence
- Changed name from entity_reference-rtl.admin.css to entity_reference.admin-rtl.css (not sure if it's correct)
filter
- separated admin.css and admin.skin.css
help
- rename help.css/help-rtl.css to help.admin.css/help.admin-rtl.css (not sure if it's correct)
help
- rename update.css/update-rtl.css to help.admin.css/help.admin-rtl.css (not sure if it's correct)

Attaching the whole patch in a zip so it can be tested but not requires testbot untill I'm sure the changes are fine.

ckrina’s picture

Status: Needs work » Needs review
rteijeiro’s picture

Hi ckrina, the patch returns some errors when applied:

error: core/modules/locale/locale-rtl.css: No such file or directory
error: patch failed: core/modules/menu/menu.admin.inc:71
error: core/modules/menu/menu.admin.inc: patch does not apply

I'm reviewing the code.

rteijeiro’s picture

The patch doesn't create the css files for some modules. It only deletes the css files.

I guess it's needed to recreate the patch again.

rteijeiro’s picture

Status: Needs work » Needs review
StatusFileSize
new34.63 KB

I have created the patch from scratch. Hope now it's right.

ckrina’s picture

Hi rteijeiro, thanks to take a look to that. I wasn't able to follow it the past days.
I've been testing your patch and I think there are some problems:
- The old CSS files outside the css folder aren't deleted for this modules:
- block
- color
- Modules that have more than one new css file aren't loaded. For example: block.admin.skin.css or color.admin.skin.css. Probably because they are not called from the modules files. Hope it helps.

rteijeiro’s picture

StatusFileSize
new35.96 KB

Thanks ckrina.

Just fixed the patch.

Status: Needs review » Needs work

The last submitted patch, 1925320-rename-module-css-21.patch, failed testing.

rteijeiro’s picture

Status: Needs work » Needs review
StatusFileSize
new35.96 KB

Other try :P

ckrina’s picture

Status: Needs review » Needs work

All files are detected now.

But core/modules/block/block.admin.css and core/modules/color/color.admin.css still aren't deleted.

And the last problem I have detected is that in dblog some path icons need to be updated.

ckrina’s picture

Status: Needs work » Needs review
StatusFileSize
new32.99 KB

I've made this changes in the patch. Hope it works.

Status: Needs review » Needs work

The last submitted patch, 1925320-rename-module-css-25.patch, failed testing.

ckrina’s picture

Status: Needs work » Needs review
StatusFileSize
new35.44 KB

Sorry, uploading the correct one. This one should work.

rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

It seems good form me.
We must take into account that there are other issues where we are working on the same css files (see the summary of this issue).
I will mark it as RTBC. Feel free to change to needs work if you notice something else.

dcam’s picture

Status: Reviewed & tested by the community » Needs work

The image URLs in the following styles from moved CSS files need to be updated like "images/hook.png" to "../images/hook.png".

+++ b/core/modules/color/css/color.admin.skin-rtl.cssundefined
@@ -0,0 +1,16 @@
+#palette .down,
+#palette .up,
+#palette .both {
+  background: url(images/hook.png) no-repeat 100% 0;
+}
+++ b/core/modules/color/css/color.admin.skin.cssundefined
@@ -0,0 +1,25 @@
+#palette .down,
+#palette .up,
+#palette .both {
+  background: url(images/hook.png) no-repeat 100% 0; /* LTR */
+}
+++ b/core/modules/color/css/color.admin.skin.cssundefined
@@ -0,0 +1,25 @@
+#palette .lock {
+  background: url(images/lock.png) no-repeat 50% 2px;
+}
+++ b/core/modules/filter/css/filter.admin.skin.cssundefined
@@ -0,0 +1,13 @@
+.filter-help a {
+  background: transparent url(../../misc/help.png) right center no-repeat; /* LTR */
+}
+++ b/core/modules/locale/css/locale.admin.skin.cssundefined
@@ -0,0 +1,34 @@
+#locale-translation-status-form .expand .inner {
+  background: transparent url(../../misc/menu-collapsed.png) left .6em no-repeat;
+}
+
+#locale-translation-status-form .expanded .expand .inner {
+  background: transparent url(../../misc/menu-expanded.png) left .6em no-repeat;
+}
rteijeiro’s picture

Status: Needs work » Needs review
StatusFileSize
new35.8 KB

Done!

Status: Needs review » Needs work
Issue tags: -mobile, -d8mux, -d8mux-css-cleanup, -css architecture, -SprintWeekend2013

The last submitted patch, rename-module-css-1925320-30.patch, failed testing.

rteijeiro’s picture

Status: Needs work » Needs review

#30: rename-module-css-1925320-30.patch queued for re-testing.

Status: Needs review » Needs work
Issue tags: +mobile, +d8mux, +d8mux-css-cleanup, +css architecture, +SprintWeekend2013

The last submitted patch, rename-module-css-1925320-30.patch, failed testing.

dcam’s picture

This is going to need a reroll since we're dropping the change from "theme" to "skin". See http://drupal.org/node/1921610#comment-7366314.

johnalbin’s picture

Project: Drupal core » Drupal 8 Mobile Initiative
Version: 8.x-dev »
Component: CSS » CSS architecture
johnalbin’s picture

Title: Rename module CSS files to match new file naming convention » Rename various CSS files to match new file naming convention

Sorry for the delay in reviewing these patches. My bronchitis flared up and I've been too sick until this week to get back into the issue queue.

Lots of discussions have happened in the interim. We just held a D8 Mobile Initiative meeting on Google+: https://plus.google.com/u/1/events/c0knva4lgh4vot0nun5lbfel9fc where we decided that we could make the CSS re-archicture work move faster by moving the work into a sandbox git repository. Then we could commit lots of little issues to the sandbox and roll larger, more-complete patches into Drupal 8’s issue queue. (per webchick's request)

So you're work is not lost! I'm moving this issue to the Mobile Initiative sandbox. :-)

carwin’s picture

StatusFileSize
new410 bytes

Here's a patch that moves the css files in the dblog module into a css directory.

mtift’s picture

A number of previous patches included various directory changes that I think we should keep (due to the added css directory). I less certain that some of the previous CSS changes should be rolled back in as well.

johnalbin’s picture

Assigned: Unassigned » johnalbin

I'm working at untangling the patch. This issue was JUST about moving CSS files around for all of the listed modules. Refactoring at the same time makes it too unwieldy to review. Thanks for the initiative, but I'm having to strip that out for now.

johnalbin’s picture

Assigned: johnalbin » Unassigned
Status: Needs work » Fixed
StatusFileSize
new14.93 KB

Ok! This has been committed to the sandbox! Thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Notify duplicated issues.