Posted by aubergine on Tue, Dec 12, 2023 - 4:02am

How to stop this css being included or atleast find documentation for it? The bootstrap 4.0 documents mention about alignments but those are missing.

A more generic question is, how to get rid of the bootstrap related css file(s)?

Comments

Tue, Dec 12, 2023 - 11:51pm by aubergine

Thanks for replying, i am trying to use my own custom grid system and get rid of all the default unnecessary css files.

Also, trying to add onesidebar, twosidebars or nosidebars classes according to the context to the body element, without success.

Wed, Dec 13, 2023 - 2:59am by DrAlbany

I would create a custom theme and not include bootstrap.

What theme are you using?

Have you checked out Layouts... they are very flexible for content.

 

Wed, Dec 13, 2023 - 4:13am by aubergine

Thats the problem, i am using my own custom theme with my own custom layout and no bootstrap is included in anyway. But this flex-box.css is still there.

Wed, Dec 13, 2023 - 6:29am by DrAlbany

Sorry, only just saw this...

If you are creating your own custom layout, then don't include the CSS class in your layout that the flex-box.css targets.

The Admin theme/layout is normally different to the front-end theme/layout.

So, is it the admin/logged in user where you are experiencing the problem?

Wed, Dec 13, 2023 - 4:43am by amilenkov

The grid-flexbox.css file is coded in the Backdrop core in layout.module on line 924

I'm a programmer and I don't know how this information can be used, but it might be useful in diagnosing a problem and finding a solution.

Wed, Dec 13, 2023 - 5:27am by aubergine

There is this function in layout.module file:

function layout_library_info() {
  $path = backdrop_get_path('module', 'layout');

  $libraries['bootstrap4-gs'] = array(
    'title' => 'Bootstrap4 Grid System',
    'website' => 'http://v4-alpha.getbootstrap.com/layout/grid/',
    'version' => BACKDROP_VERSION,
    'css' => array(
      $path . '/css/grid-flexbox.css' => array(),
    ),
    'js' => array(
      $path . '/js/grid-fallback.js' => array(),
    ),
  );

  return $libraries;
}

as well as this piece inside grid-fallback.js

Backdrop.behaviors.gridFloatFallback = {
  attach: function() {
    var $body = $('body');
    if (!$body.hasClass('grid-float-fallback-processed') && !Backdrop.featureDetect.flexbox()) {
      $('head').append('<link rel="stylesheet" type="text/css" href="/core/modules/layout/css/grid-float.css">');
      $body.addClass('grid-float-fallback-processed');
    }
  }
};

Is there a way to overwrite these both from a template or a layout itself?

Problem is; why is this included on my theme even if there is no libraries[] = bootstrap4-gs defined in my theme???

Wed, Dec 13, 2023 - 6:25am by DrAlbany

Layouts and themes are treated separately in Backdrop.

You will need to create a new theme and a new layout.

Here's the .info file for a layout I created a while back...

type = layout
name = acsgrid
version = BACKDROP_VERSION
backdrop = 1.x

; Specify regions for this layout.
regions[header]         = Header
regions[headertop]      = Headertop
regions[headerq]          = Headerq
regions[headerq1]       = HeaderQ1
regions[headerq2]       = HeaderQ2
regions[headerq3]       = HeaderQ3
regions[headerq4]       = HeaderQ4
regions[headerbottom]     = Headerbottom
regions[top]            = Top
regions[content]        = Content
regions[third1]         = Tri First
regions[third2]         = Tri Second
regions[third3]         = Tri Third
regions[quarter1]       = Quarter First
regions[quarter2]       = Quarter Second
regions[quarter3]       = Quarter Third
regions[quarter4]       = Quarter Fourth
regions[bottom]         = Bottom
regions[footer]         = Footer

; The default region automatically receives the "Main Content" block if needed.
default region = content

; Preview
preview = acsgrid.png

; Include the Bootstrap4 Grid System
;libraries[] = bootstrap4-gs

; Include file for special preprocessing of this layout's variables.
file = acsgrid.php

; Default stylesheets for this layout
; stylesheets[all][] = acsgrid.css

and the layout file... layout--acsgrid.tpl.php

 

<?php
/**
 * @file
 * Template for the acsgrid layout.
 *
 * Variables:
 * - $title: The page title, for use in the actual HTML content.
 * - $messages: Status and error messages. Should be displayed prominently.
 * - $tabs: Tabs linking to any sub-pages beneath the current page
 *   (e.g., the view and edit tabs when displaying a node.)
 * - $action_links: Array of actions local to the page, such as 'Add menu' on
 *   the menu administration interface.
 * - $classes: Array of CSS classes to be added to the layout wrapper.
 * - $attributes: Array of additional HTML attributes to be added to the layout
 *     wrapper. Flatten using backdrop_attributes().
 * - $content: An array of content, each item in the array is keyed to one
 *   region of the layout. This layout supports the following sections:
 *   - $content['header']
 *   -  $content['Headertop']
 *   -  $content['Headerq']
 *   -    $content['HeaderQ1']
 *   -    $content['HeaderQ2']
 *   -    $content['HeaderQ3']
 *   -    $content['headerQ4']
 *   -  $content['headerbottom']
 *   - $content['top']
 *   - $content['content']
 *   - $content['third1']
 *   - $content['third2']
 *   - $content['third3']
 *   - $content['quarter1']
 *   - $content['quarter2']
 *   - $content['quarter3']
 *   - $content['quarter4']
 *   - $content['bottom']
 *   - $content['footer']
 */
?>
<div class="
 <?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($attributes); ?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>

 <header>
 
    <?php if ($content['headertop']): ?>
        <div class="l-headertop" aria-label="<?php print t('Site header top'); ?>">
      <div class="l-header-inner row">
        <div class="col12">
          <?php print $content['headertop']; ?>
        </div>
      </div>
        </div>
    <?php endif; ?>

    <?php if ($content['headerq1'] || $content['headerq2'] || $content['headerq3'] || $content['headerq4']): ?>
        <div class="l-headerq">
      <div class="l-headerq-inner row">
        <div class="l-headerq-region col-3">
          <?php print $content['headerq1']; ?>
        </div>
        <div class="l-headerq-region col-3">
          <?php print $content['headerq2']; ?>
        </div>
        <div class="l-headerq-region col-3">
          <?php print $content['headerq3']; ?>
        </div>
        <div class="l-headerq-region col-3">
          <?php print $content['headerq4']; ?>
        </div>
      </div>
    </div>
    <?php endif; ?>
  
    <?php if ($content['headerbottom']): ?>
        <div class="l-headerbottom row" aria-label="<?php print t('Site header bottom'); ?>">
            <div class="l-header-inner col12">
                <?php print $content['headerbottom']; ?>
            </div>
        </div>
    <?php endif; ?>
 
 </header> 
 
 <!-- /header -->
 
  <?php if (!empty($content['top'])): ?>
    <div class="l-top row">
    <div class="l-top-inner col12">
      <?php print $content['top']; ?>
    </div>
  </div>
  <?php endif; ?>

  <div class="l-wrapper">
    <div class="l-wrapper-inner row">

      <?php if ($messages): ?>
        <div class="l-messages" role="status" aria-label="<?php print t('Status messages'); ?>">
          <div class="l-messages-inner row">
            <div class="col12">
              <?php print $messages; ?>
            </div>
          </div>
        </div>
      <?php endif; ?>

      <div class="l-page-title">
        <a id="main-content"></a>
        <?php print render($title_prefix); ?>
        <?php if ($title): ?>
          <h1 class="page-title"><?php print $title; ?></h1>
        <?php endif; ?>
        <?php print render($title_suffix); ?>
      </div>

      <?php if ($tabs): ?>
        <nav class="tabs" role="tablist" aria-label="<?php print t('Admin content navigation tabs.'); ?>">
          <?php print $tabs; ?>
        </nav>
      <?php endif; ?>

      <?php print $action_links; ?>

      <!-- .l-middle -->
      <div class="l-middle row">
        <main class="l-content col-12" role="main" aria-label="<?php print t('Main content'); ?>">
          <?php print $content['content']; ?>
        </main>
      </div><!-- /.l-middle -->

      <?php if ($content['third1'] || $content['third2'] || $content['third3']): ?>
        <div class="l-thirds row">
          <div class="l-thirds-region col-4">
            <?php print $content['third1']; ?>
          </div>
          <div class="l-thirds-region col-4">
            <?php print $content['third2']; ?>
          </div>
          <div class="l-thirds-region col-4">
            <?php print $content['third3']; ?>
          </div>
        </div><!-- /.l-thirds -->
      <?php endif; ?>

      <?php if ($content['quarter1'] || $content['quarter2'] || $content['quarter3'] || $content['quarter4']): ?>
        <div class="l-quarters row">
          <div class="l-quarters-region col-3">
            <?php print $content['quarter1']; ?>
          </div>
          <div class="l-quarters-region col-3">
            <?php print $content['quarter2']; ?>
          </div>
          <div class="l-quarters-region col-3">
            <?php print $content['quarter3']; ?>
          </div>
          <div class="l-quarters-region col-3">
            <?php print $content['quarter4']; ?>
          </div>
        </div><!-- /.l-quarters -->
      <?php endif; ?>

      <?php if (!empty($content['bottom'])): ?>
        <div class="l-bottom row">
          <div class="l-bottom-inner col12">
            <?php print $content['bottom']; ?>
          </div>
        </div>
      <?php endif; ?>

    </div><!-- /.l-wrapper-inner -->
  </div><!-- /.l-wrapper -->

  <?php if ($content['footer']): ?>
    <footer class="l-footer row"  role="footer">
      <div class="l-footer-inner col12">
        <?php print $content['footer']; ?>
      </div>
    </footer>
  <?php endif; ?>

</div><!-- /.layout--acsgrid -->

 

Please note that this may not be 100% correct :-)  

But hopefully, it will give you an idea.

Hope this helps.