How to add third party css framework like bootstrap

I am making a theme based on bootstrap, but I am stuck at the very beginning. I am not sure what is the right way to include bootstrap. Below is my code in start.php:

elgg_register_event_handler('init', 'system', 'core_theme_init');

function core_theme_init() {
    // don't need it twice
    elgg_unregister_menu_item('footer', 'powered');

    //include twitter bootstrap css
    elgg_extend_view('css/elgg', 'core_theme/css');
    
    //register bootstrap css and js
    $bootstrap_css = 'vendor/twbs/bootstrap/dist/css/bootstrap.min.css';
    elgg_register_css('bootstrap_css', $bootstrap_css);

    $bootstrap_js = 'vendor/twbs/bootstrap/dist/js/bootstrap.min.js';
    elgg_register_js('bootstrap', $bootstrap_js, 'footer');

    $get_context = elgg_get_context();
    //we don't want bootstrap loading when in the admin area.
    if($get_context != 'admin'){
        elgg_load_css('bootstrap_css');
        elgg_load_js('bootstrap');
    }

} 

I can see bootstrap is loaded now, but it breaks some functionalities, like the comment form will not pop up and some of the styles break. When I commented elgg_load_css('bootstrap_css');, everything is back to normal. Could anyone give me some hint? Thanks.

  • Assuming you're using Elgg 2.x

    I have a views.php file that brings the vendor files into the elgg view system:

    <?php

    return [

    'default' => [

            'twbs/' => __DIR__ . '/vendor/twbs/bootstrap/dist/',

            'theme/graphics/' => __DIR__ . '/graphics/'

    ],

    ];

    Then in my plugin init function I extend the default Elgg css/js with bootstraps.  This is simple, it takes care of the caching, loads on every page as I need it to, and only makes one request for the combined css and one request for the combined js.

    elgg_extend_view('css/elgg', 'twbs/css/bootstrap.min.css');

    elgg_extend_view('js/elgg', 'twbs/js/bootstrap.min.js');

     

    After that you're on your own :)

    it breaks some functionalities, like the comment form will not pop up and some of the styles break

    You can't just add in major global css/js changes and expect there to be no interference whatsoever, there are some class conflicts with different rules, it's not going to be a straight drop-in replacement.  The reason I *extend* the css instead of overwriting it is because there are so many core views and core-flavored markup provided by plugins that still benefit from the core css.  There's often not enough time/budget to really dig in and rewrite everything with twbs classes, though it can certainly be done.

  • Thank you for your reply, Matt, but I am still a little bit confused. I am using Elgg 2.2. Below is my folder structure: 

    my_theme/
    
        --vendor/twbs/..
    
        --views/...
    
        --manifest.xml
    
        --start.php
    
        --views.php

    Below is the change I made in my start.php file: 

    elgg_register_event_handler('init', 'system', 'core_theme_init');
    
    function core_theme_init() {
        // don't need it twice
        elgg_unregister_menu_item('footer', 'powered');
    
        //include twitter bootstrap css
        elgg_extend_view('css/elgg', 'core_theme/css');
        
        elgg_extend_view('css/elgg', 'twbs/css/bootstrap.min.css');
    
        elgg_extend_view('js/elgg', 'twbs/js/bootstrap.min.js');
    
    } 

    is this correct? Sorry about my naive question, but I don't quite understand yet.

  • Bootstrap loads correctly as Matt says, but it seems Bootstrap has some compatibility issue with Elgg. Even by extending it, some of functionalities also don't work properly. I pulled in Foundation instead and it works all right so far.

  • There are some clashing styles for sure. .hidden in Bootstrap is incompatible with Elgg's uses for example.

    I have started my SCSS experience with Foundation, but have concluded that it's too much overhead. I am now writing my own mixins. Foundation comes with too much stuff that's useless in Elgg.

  • What Matt is trying to say is that you can not just add some stylesheet to a webpage and expect the webpage to work the way it worked with a different stylesheet.

    Example:
    if you have a website with a html div referring to .my-awesome-class and that class is in your stylesheet.
    And then you replace that stylesheet with a stylesheet where .my-awesome-class doesn't exists and instead the new stylesheet uses .my-different-class for the same type of div, it's just not working.

    you should then either replace <div class='my-awesome-class'> with <div class='my-different-class'> in your html or you should change .my-different-class with .my-awesome-class in your .css file.

    Bootstrap and Elgg were made by different people, so good chance they called things differently.
    It's like calling John when you need Peter.

  • It makes great sense. What would you guys suggest to do when developing a theme? Using a third party framework and fix some of the compatibility issue or just writing my own css? Which is the better way to go? Thanks. 

  • Elgg's CSS is minimal, so I would suggest writing your own CSS from scratch or as an extension for aalborg theme. Integrating any framework would require either modifying way too many views to add vendor selectors/prefixes or writing way too much CSS to target deeply nested elements.

  • Awesome. It is really helpful. Thank you, everyone.

  • I tend to use bootstrap for all my theming, I really like their grid system and form controls.  The beauty of elgg is that you have the option to go either route, whatever works best for you.

  • @Matt  How did you solve the clashing problems? For example, in Bootstrap the .hidden class is: 

    display: none !important;

    some of the ajax like comment and edit don't work well until I deleted the !important, but it is not a good practice to change the source code of the framework, right?

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking