Problem/Motivation

Five layouts are being added with simple CSS and markup:

  • layout_onecol
  • layout_twocol
  • layout_twocol_bricks
  • layout_threecol_25_50_25
  • layout_threecol_33_34_33

Currently, there are no gutters between the regions in these layouts. This causes content to bump into other region content.

Proposed resolution

Add gutters to Bartik for each of the layouts listed above.

Remaining tasks

  • Add gutters for the new layouts that match Bartik's current styling.

User interface changes

N/A

API changes

N/A

Data model changes

N/A

CommentFileSizeAuthor
#39 2871342-6.jpg18.24 KBNeeraj Dhamiwal
#39 2871342-5.jpg85.21 KBNeeraj Dhamiwal
#39 2871342-4.jpg76.26 KBNeeraj Dhamiwal
#39 2871342-3.jpg65.05 KBNeeraj Dhamiwal
#39 2871342-2.jpg63.43 KBNeeraj Dhamiwal
#39 2871342-1.jpg65.5 KBNeeraj Dhamiwal
#36 2871342-after_patch-four_col.png138.34 KBabhijith s
#36 2871342-after_patch.png151.15 KBabhijith s
#36 2871342-before_patch_four_col.png141.12 KBabhijith s
#36 2871342-before_patch.png159.17 KBabhijith s
#33 2871342-33.patch1.54 KBdjsagar
#29 2871342-29.patch1.54 KBkapilv
#28 After-patch.png207.73 KBdjsagar
#28 Before-patch.png240.71 KBdjsagar
#26 add_gutter_styling_in-2871342-26.patch1.54 KBbandanasharma
#11 three-col-33-34-33.png117.62 KBnjagojevic
#11 three-col-25-50-25.png98.43 KBnjagojevic
#11 two-col-bricks.png80.46 KBnjagojevic
#11 two-col.png79.78 KBnjagojevic
#11 add_gutter_styling_in-2871342-11.patch1.25 KBnjagojevic

Issue fork drupal-2871342

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

DyanneNova created an issue. See original summary.

manuel garcia’s picture

manuel garcia commented
Status: Active » Postponed

Waiting until #2852608: Review layout CSS and markup gets in.

manuel garcia’s picture

manuel garcia commented
Status: Postponed » Active

We can now do this.

manuel garcia’s picture

manuel garcia commented
Issue tags: +Novice
Pradnya Pingat’s picture

Pradnya Pingat commented

I am working on this.

Thanks

Pradnya Pingat’s picture

Pradnya Pingat commented
Assigned: Unassigned » Pradnya Pingat
Pradnya Pingat’s picture

Pradnya Pingat commented
Assigned: Pradnya Pingat » Unassigned

There is issue with my machine for composer installation . I will first resolve that issue.

c.nish2k3’s picture

c.nish2k3 commented
Assigned: Unassigned » c.nish2k3
c.nish2k3’s picture

c.nish2k3 commented
Assigned: c.nish2k3 » Unassigned
njagojevic’s picture

njagojevic commented
Assigned: Unassigned » njagojevic

Working on it.

njagojevic’s picture

njagojevic commented
Status: Active » Needs review
StatusFileSize
new add_gutter_styling_in-2871342-11.patch1.25 KB
new two-col.png79.78 KB
new two-col-bricks.png80.46 KB
new three-col-25-50-25.png98.43 KB
new three-col-33-34-33.png117.62 KB

Added gutter styling for new layouts in Bartik theme.

Two column:

Two column bricks:

Three column 25/50/25:

Three column 33/34/33:

andreadruiz’s picture

andreadruiz commented
Issue tags: +DrupalPicNic
andreadruiz’s picture

andreadruiz commented
Assigned: njagojevic » andreadruiz

I will test the patch

andreadruiz’s picture

andreadruiz commented
Assigned: andreadruiz » Unassigned
Status: Needs review » Reviewed & tested by the community

Hi! I recently test the patch and works like a charm! Looks solid :)

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review 
+++ b/core/themes/bartik/css/components/field-layouts.css
@@ -0,0 +1,35 @@
+[class*="layout__region--first"] {
...
+[class*="layout__region--second"] {

What is the reason for using a attribute selector instead of a normal class selector?

njagojevic’s picture

njagojevic commented

@lauriii tnx for your question.

I used attribute selector to select classes starting with 'layout__region--first' and 'layout__region--second' because in Two columns brick layout there are elements with classes 'layout__region--first--above', 'layout__region--second-above', 'layout__region--first-below' and 'layout__region--second-below', and I wanted shorter code style that applies to all elements with this classes.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.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.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

leoneldiaz02’s picture

leoneldiaz02 commented
Issue tags: -Novice

This is no longer a "novice" issue.

borisson_’s picture

borisson_
Primary language Dutch
Location Mechelen, 🇧🇪
commented

The reasons in #16 make a lot of sense. Is that reasoning sufficient @lauriii?

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.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.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.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.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

jhedstrom’s picture

jhedstrom
Primary language English
Location Portland, OR
commented

The patch still cleanly applies, and the response to @lauriii's outstanding question looks reasonable as noted above.

+++ b/core/themes/bartik/css/components/field-layouts.css
@@ -0,0 +1,35 @@
+[class*="layout__region--first"] {
+  padding-right: 15px;
+}
+
+[class*="layout__region--second"] {
+  padding-left: 15px;
+}
+
+.layout__region--third {
+  padding-left: 30px;
+}

Since these deal with right and left paddings, do they need a corresponding LTR entry (and/or a [dir="rtl"])?

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

bandanasharma’s picture

bandanasharma commented
StatusFileSize
new add_gutter_styling_in-2871342-26.patch1.54 KB

Re-roll the patch.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

djsagar’s picture

djsagar commented
Status: Needs review » Needs work
StatusFileSize
new Before-patch.png240.71 KB
new After-patch.png207.73 KB

HI all,

Patch #26 is applied and resolved the till three column but it's not resolved four column issue,

For issue Please check the attachment.

Thanks!

kapilv’s picture

kapilv commented
StatusFileSize
new 2871342-29.patch1.54 KB

Re-roll patch 9.2.x.

djsagar’s picture

djsagar commented

Hi @KapilV,

Same issue is replicated which i shared on comment #28 after apply Patch no #29.

manuel garcia’s picture

manuel garcia commented
Status: Needs work » Needs review

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

djsagar’s picture

djsagar commented
StatusFileSize
new 2871342-33.patch1.54 KB

Just re-rolled the patch for 9.3.

mitthukumawat’s picture

mitthukumawat commented

Patch #33 applied cleanly on drupal 9.3.x-dev for me. Thanks for the patch.

Gauravmahlawat made their first commit to this issue’s fork.

abhijith s’s picture

abhijith s commented
StatusFileSize
new 2871342-before_patch.png159.17 KB
new 2871342-before_patch_four_col.png141.12 KB
new 2871342-after_patch.png151.15 KB
new 2871342-after_patch-four_col.png138.34 KB

Applied patch #33 on 9.3.x.
Adding screenshots below.

Before patch:

two and three col
two and three col

four col
before four col

After patch;

two and three col
after

four col
after

RTBC +1

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Neeraj Dhamiwal’s picture

Neeraj Dhamiwal commented
StatusFileSize
new 2871342-1.jpg65.5 KB
new 2871342-2.jpg63.43 KB
new 2871342-3.jpg65.05 KB
new 2871342-4.jpg76.26 KB
new 2871342-5.jpg85.21 KB
new 2871342-6.jpg18.24 KB

Applied patch for 9.5.x style is working fine provided the screenshot below

Thank You

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave commented
Project: Drupal core » Bartik
Version: 10.1.x-dev » 1.0.2
Component: Bartik theme » Look and Feel

Thank you everyone for the patches and testing. Since this appears to be a task and not causing an issue and Bartik has been removed from D10 going to move over to the contrib module where it can hopefully be merged there.

Thanks!

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: Unassigned » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned
liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented
Version: 1.0.2 » 1.0.x-dev
Status: Needs review » Needs work

Please put the patch into an issue fork of Bartik and merge request.