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


API changes


Data model changes


Members fund testing for the Drupal project. Drupal Association Learn more


DyanneNova created an issue. See original summary.

Manuel Garcia’s picture

Status: Active » Postponed
Manuel Garcia’s picture

Status: Postponed » Active

We can now do this.

Manuel Garcia’s picture

Issue tags: +Novice
Pradnya Pingat’s picture

I am working on this.


Pradnya Pingat’s picture

Assigned: Unassigned » Pradnya Pingat
Pradnya Pingat’s picture

Assigned: Pradnya Pingat » Unassigned

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

c.nish2k3’s picture

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

Assigned: c.nish2k3 » Unassigned
njagojevic’s picture

Assigned: Unassigned » njagojevic

Working on it.

njagojevic’s picture

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

Issue tags: +DrupalPicNic
andreadruiz’s picture

Assigned: njagojevic » andreadruiz

I will test the patch

andreadruiz’s picture

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

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

@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.