Remove some <div>s from our templates

[Pomax]

Bootstrap has made things divceptionalicious, so it's probably worth removing as many undecorated (e.g. class-less) divs from our fragments and adjusting the SCSS accordingly.

[youriwims]

@Pomax, where would be a good place to start on this?

[Pomax]

I'd recommend starting with an inventory pass of the .html templates we have in the wagtailpages/templates directory. For instance, the homepage has this:

        <div class="row">
          <div class="col-12 full-bleed-xs">
            <div class="key-item mx-2 mx-md-4 p-3">
              <div class="news-item">
                <div class="d-flex align-items-center mb-2">
                  {% if article.news.glyph %}
                    {% homepage_image_with_class article.news.glyph "mr-2 glyph" %}
                  {% endif %}
                  <p class="h6-heading-uppercase mb-0">{{article.news.outlet}}</p>
                </div>
                <h5 class="mb-2 h4-heading">
                  <a href="{{article.news.link}}">{{article.news.headline}}</a>
                </h5>
                <p class="h6-heading mb-2">{% if article.news.author %}by {{article.news.author}} on {% endif %} {{article.news.date}}</p>
                <p>{{article.news.excerpt}}</p>
              </div>
            </div>
          </div>
        </div>

that's four nested "top level" divs that don't all need to exist, some of these can be de-nested with their classes merged.

[Sharma-palak]

Hi @Pomax , I am new to open source ,can I take this issue