Why do we still use names like "Sidebar"?
For example in a responsive layout the side bar drops below the main content on a phone and turns in a "Below Bar".

I think we need to think up a other name for them that is based on the most common use case instead of the location in the layout.

Proposition 1
Sidebars can be used for aside like content

  • Sidebar-first > Sub-content-first
  • Sidebar-second > Sub-content-second

Proposition 2
Often a sidebar is used for extra navigation items like a list of recent articles.

  • Sidebar-first > Sub-navigation
  • Sidebar-second > Sub-content

In both cases the placement of the regions is then totally disconnected from the region name.

Comments

dbazuin’s picture

Issue tags: +Bartik, +Stark, +dreammarkup

adding tags

laura s’s picture

Absolutely! (I thought there already was an issue for this, but I can't find it.)

  • Sidebar-first -> Complementary content 1 (or simply Complementary)
  • Sidebar-second -> Complementary content 2 (or simply Complementary 2)

NB: "complementary" is also an ARIA role for how these regions are typically used. However, perhaps it assumes too much and might be confusing to the more semantically minded to use the same word? So as an alternative:

  • Sidebar-first -> Supplementary content 1 (or simply Supplementary)
  • Sidebar-second -> Supplementary content 2 (or simply Supplementary 2)

Presentational names of regions and classes is #doingitwrong in this day and age. Let's get ride of "sidebar".

dbazuin’s picture

I have checked for a simular issue but did not find it.

I like Supplementary content as a new name for what's now called sidebar.

markcarver’s picture

Status: Needs work » Active

No patch attached, changing status appropriately. I agree that having "sidebar" isn't always accurate, but in spite of that I don't think we should go the opposite and put in long class names like "complementary" or "supplementary".

How about:

  1. sidebar-first -> aside-first
    sidebar-second -> aside-second
  2. - or -

  3. sidebar-first -> meta-first
    sidebar-second -> meta-second
  4. - or even more simply -

  5. sidebar-first -> first (since we could just target: aside.first)
    sidebar-second -> second

I'd like to keep these names as short as possible. There's no need to add superfluous information for something that is used rather specifically anyway (ie: aside tag).

markcarver’s picture

However, despite my post just now and in regards to #1649780: Remove first/last/odd/even classes in favor of CSS3 pseudo selectors, perhaps we shouldn't have even those classes (first, last). They could be targeted using pseudo selectors:

aside:nth-child(1) {}
aside:nth-child(2) {}
aside:first-of-type {}
aside:last-of-type {}
thedavidmeister’s picture

#5 sounds good for classes, but what do we call the regions themselves - so you know where you're putting your blocks in the admin UI?

Had a discussion with @dbazuin in IRC about maybe naming things based on where they appear in the markup sans-CSS (like, before or after) rather than how they appear post-CSS. The problem with that is, if you edit the template, anything could be positioned anywhere, but since this is specifically for Bartik and Stark rather than a template base theme, perhaps that isn't such an issue.

markcarver’s picture

Ah, good point. "Pre-content"/"Post-content"? Considering this is just for core, I think we shouldn't worry about "if things get moved around" because we're not gonna move them. If someone decides to do that post download, then the responsibility falls onto them to update their semantic naming conventions :)

thedavidmeister’s picture

mmmm, what if someone wants to put the system content block in pre-content? what does that mean?

content_one, content_two, content_three?

BarisW’s picture

Class names have dashes, not underscores :)

What about additional-first, additional-second?

dbazuin’s picture

Actually I think that sounds right.

thedavidmeister’s picture

Class names have dashes, not underscores

Region names have underscores. Class names are just derived from that.

dbazuin’s picture

Anybody a objection agains the names BarisW suggested?

thedavidmeister’s picture

I prefer before_content/after_content or pre_content/post_content as per @markcarver, as that would simultaneously be more specific and accurate.

As for additional_first/additional_second:

  1. "Additional" is a relative term, what are they "in addition to"? the content? the footer? the whole page?
  2. "first" and "second" don't convey information about where these regions are relative to other elements in the page, only how they sit in relation to each other.

Since these regions only exist to complement the content region, if we want their names to be semantic, they should reference both "content" and how they are positioned in the page relative to "content".

dbazuin’s picture

If we use a name including terms like before and after we are making assumptions again about the placement in the display. Something you don't have with a term like additional.
so what about additional-content-first and additional-content-second?

thedavidmeister’s picture

We're going around in circles now, that was already pointed out in #6 and #7, but @markcarver pointed out that we don't need to support people editing core templates to re-order regions.

The words first and second aren't really any less indicative of positioning and order than before and after IMO.

dcrocks’s picture

'sidebar-first' and 'sidebar-second' are constructs of Drupal's core themeing. The names mean no more than that there are 2 of them. The names are mobile friendly as they don't assert positioning, whereas words like before and after do. It is somewhat unfortunate that Drupal has embedded support for them in so much core code because people will take advantage of that support. But it imposes no obligation on themers that they be used at all or in the same way as Drupal uses them. I think the names are sufficiently semantic given their use.

Jeff Burnz’s picture

#5 is going down the right road to my mind. Maybe keep classes of some form (#4, example 1 is great), that should probably work.

"sidebar" is not really a presentational class. It stems from the publishing world where a sidebar is something that holds contextually related content - which is the semantic underpinning of the "aside" element. The problem with "sidebar" is that its easily confused with "application sidebars", like a draw or panel in a desktop app, and that it uses the word "side", so we tend to think of that as being "to one side of something".

As a side note I will mention that in my D8 base theme I don't use region classes at all for layout, it's entirely done with first, last and nth-child, so I have just been through this.

So yeah, #4 + #5 looks pretty good IMO.

markcarver’s picture

Title: Change the name of the sidebar regions to something more semantic » Change the machine name/title of the sidebar regions to something more semantic
Issue summary: View changes
Issue tags: +Needs issue summary update, +Twig

Just changing the title to make it clear we're actually talking about the machine name/title of the region, not whether there should be classes and what those should be named.

dbazuin’s picture

Thanks for making the title more clear Mark.

If you have two extra content regions the need to have unique names.
So thats why a call them first and second.
With before and after you actualy say it is before the content region and after the content region.
First and second just seperate the two from each other. Or at leat that was my intention.

barraponto’s picture

I think the theme can suggest how their regions are used. So calling it aside-first means the theme CSS will layout the page such that aside-first comes before aside-second. If a theme calls it pre-content-aside then it means the CSS will lay it out before the content region.

There's no right and wrong, as long as it's meaningful.

LewisNyman’s picture

Issue tags: +frontend, +html
dbazuin’s picture

Now we are in beta is it still possible to get it in to 8.x?
If so I am happy to make a patch for it using the suggestion of Baris.
Because the main reason for this it to make people aware that you can use more semantic names for stuff like this.

dbazuin’s picture

Assigned: Unassigned » dbazuin

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

dbazuin’s picture

Assigned: dbazuin » Unassigned

I am wondering if making a change like this in any 8.x version is a good idea?
Maybe we can do this only for new installs?

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.