While testing Bartik Responsive for Drupal 7, version 7.x-1.x-dev, I ran into the following issues:
As the two mirror each other I'm not sure where to post this, but there may be some mutal benefit to do it here, and then post a link, although there may be some redundancy.

1. Embedded Flash video's did not resize when screen became smaller.

Solution that worked for me.This code will allow video formats such as YouTube and Vimeo when embedding with an iframe or object tag to become responsive: http://webdesignerwall.com/tutorials/css-elastic-videos.

2. Blocks in the sidebar drop to the bottom

Maybe have a settings choice where you can choose whether you want the sidebars to drop to the bottom or the top (or a documented piece of code in the css, if possible to combine with the html).

3. The search bar when put into the header had a border around it.
In the child theme setting the wrapping div .region-header to border:none solved it.
However it may be better to include this in the Bartik theme itself.

4. The main menu when having four items put 3 next to each other and 1 below when resizing to a smaller window size. So:
Button 1 Button 2 Button 3
Button 4

This while there was still plenty of space available on the screen.

Also can we please agree as community on a conventional naming convention for naming div's and classes. For example all themes should name there main menu area with an id of #main-menu and a class of .navigation. This would make life so much easier.

Besides that really nice job looked nice, and worked well, as far as I have been able to tell so far.

Comments

mjohnq3’s picture

mjohnq3 commented

Thanks very much for this review. Regarding each point you raise:

1) That is obviously a good fix for the problem of making embedded videos responsive. There are a few other similar fixes that I’ve seen and also some javascript fixes. However, I don’t think any of them are generic enough to be included as part of the theme. To use that code, you have to wrap the embedded code with a

container, specify a class, and then specify bottom padding of a certain percentage depending on the aspect ratio of the video (56.25% for 16:9 or 75% for 4:3). The problem with that is: 1) you can’t be sure what class name will be used, and; 2) what the aspect ratio of the video will be.

I checked the most widely used Drupal responsive contrib themes (Zen, Omega, AdaptiveTheme, and Fusion), and I couldn’t find CSS for responsive embedded video in any of them.

Until there’s a more standard approach to responsive video embeds, I think that needs to be part of some custom CSS that is added to a website (and most websites use some) to handle specific situations. Naturally, since this is Drupal – there is "a module for that!"

2) The quick answer to this is: It’s by design. The Sidebars drop below the main Content area because they follow it in the markup source order. It’s a very common (probably all too common) mobile design pattern. There are several contrib base themes that provide the functionality to change the layout from the UI. I’m not adding anything like that to this theme.

Drupal 8 has several initiatives to provide a UI for changing layouts but that’s outside the scope of this theme and the respective D8 issue: #1192044: Convert Bartik's layout to mobile-first and responsive.

3) I do agree that the border around the Search block when it’s located in the Header does look strange. The border didn’t look so bad around other blocks placed in the Header. I’ll consider removing it entirely or just for the Search block.

4) If I understand what you’re saying; when the Menu tabs change to buttons (at a width of 461px to a maximum of 900px), you get three wide ones across where there still may be room for four or even five across. Again, this is by design. I wanted to limit the layout to two major media breakpoints while also allowing for long and even multi-word text for the Menu links.

*************************************

I can’t comment on naming conventions for divs and classes. All the ones in this theme are the same as in the original Bartik theme.

As I mentioned in the D8 issue, jensimmons designed Bartik and created, with some help from the community, the D7 theme. All of the credit belongs to her. The D8 issue and this theme are primarily a conversion to a responsive, mobile-first layout with only a few styling changes where required.

mjohnq3’s picture

mjohnq3 commented
Status: Active » Postponed

With reference to #3 above: I'm going to take a look at the styling of all blocks, including the Search box, placed in the Header region. They all have a white border around them which looks good except for the Search box. I'm looking at restyling it instead of eliminating it.

onco_p53’s picture

onco_p53 commented

Hi, thanks for your effort on this. Just noting that I also have the issue with the search box border on the latest dev build.

mjohnq3’s picture

mjohnq3 commented

Now that the RTL issues have been mostly resolved I'll be looking into some of these problems.

mjohnq3’s picture

mjohnq3 commented

The white borders on Blocks placed in the Header are being removed per: #2056809: White border around header blocks.

mjohnq3’s picture

mjohnq3 commented
Status: Postponed » Closed (fixed)

Closing this issue. The OP seems to be gone and there's hasn't been much activity. I've explained my take on each of the points made.

tsbah’s picture

tsbah commented
Issue summary: View changes
Issue tags: +search block, +border

The border still shows around the search block, despite the CSS rule border: none; in .region-header .block.

To remove the border I edited style.css to add a separate class .region-header display: none; Ditto for my responsive_bartik sub-theme. However, in the latter the responsiveness breaks down when I narrow the browser's window from right to left.