CakePHP 4 CSS: Milligram conflicting with Bootstrap

Need Help
1

I have a Bootstrap navbar in my default.php layout. It works and looks fine except for the font size and position, which are being disrupted by milligram. It shrinks the text and shifts it upward. When I remove milligram.min from the list of loaded css files, the navbar displays correctly, but then I lose all of the milligram styling elsewhere, which I want to keep. Ideally, I want the navbar and milligram styling to be on every page of my project.

Code below. The navbar is the first element in the body:

<head>
    <?= $this->Html->charset() ?>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="../css/tokenize2.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!-- CSS for dropdown hover -->
    <style type="text/css">
        /* ============ desktop view ============ */
        @media all and (min-width: 992px) {
            .navbar .nav-item .dropdown-menu{ display: none; }
            .navbar .nav-item:hover .nav-link{ color: #fff;  }
            .navbar .nav-item:hover .dropdown-menu{ display: block; }
            .navbar .nav-item .dropdown-menu{ margin-top:0; }
        }   
        /* ============ desktop view .end// ============ */
    </style>

    <title>
        <?= $cakeDescription ?>:
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->meta('icon') ?>

    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">

    <?= $this->Html->css(['normalize.min', 'milligram.min', 'cake', 'divtable']) ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
    <?= $this->element('nav'); ?>
    <main class="main">
        <div class="container">
            <?= $this->Flash->render() ?>
            <?= $this->fetch('content') ?>
        </div>
    </main>
    <footer>
        <?= $this->element('footer'); ?>
    </footer>
</body>

Is there anything I can do to make milligram ignore this one element? It’s the only thing about my default layout that’s spoiling the project. I’ve tried wrapping $this->element('nav') in its own div tags and applying the nav style directly, and I’ve also tried reordering my CSS loads. No joy.

2

No doubt someone here will come up with a smarter, better answer - but my approach to conflicting CSS is to put my own css file in which has the values I want. I load it last in the css chain so that it has priority. Using the developer console in Chrome and the identify element I work out what class/id I should use. I have found at times I need to use the exact same designation as from the css I want to overwrite to ensure mine sticks. You may also need !important to deal with those rare cases which use javascript to add classes or change the css on-the-fly.

I also edit the milligram.css. CakePHP has already edited from the original, like changing the button colour from purple to red, so I don’t feel bad about messing with it.

I could give specific examples of what changes I’ve made in css, but as they related to overwriting sweetalert & datatables it may not help anyway!

3

This has a bit more buttpain involved, but my suggestion would be to completely cut ties to Milligram and use Bootstrap entirely.

I would suggest 2 layout files, (I usually go for default and old) one that is basically the default using Milligram, and one that is the new version using Bootstrap. Use $this->viewBuilder()->setLayout('old'); on the controller-level to view the old version of the page, then re-skin it.

In a large application, this can take a while, but in smaller ones it shouldn’t be that big of a deal.

I have been meaning to Fork bake and bootstrapify all the templates for a while now…

1 Like
4

This is what I ended up doing, and it wasn’t terrible. Thanks!

1 Like