Including "bootstrap-grid.scss" only leads to somewhat broken grid

[Restuta]

I am not sure if this is by design or not. But I wanted to use "BS4 grid only" for my app. I assumed that should be possible, since I see "Grid Only" download option in alpha-docs.

So, when I import bootstrap fully like that: @import 'bower_components/bootstrap/scss/bootstrap'; in my project I see the following grid:

When I change it to use grid only @import 'bower_components/bootstrap/scss/bootstrap-grid'; is see this:

This is not browser specific.

I figured out that it's because "reboot.scss" is not included, so I added:

@import 'bower_components/bootstrap/scss/reboot';
@import 'bower_components/bootstrap/scss/bootstrap-grid';

That didn't work, since reboot.scss uses mixins and variables inside without importing them. So I had to manually go and figure it out and the following code fixes that:

@import 'bower_components/bootstrap/scss/mixins/hover';
@import 'bower_components/bootstrap/scss/mixins/tab-focus';
@import 'bower_components/bootstrap/scss/variables';
@import 'bower_components/bootstrap/scss/reboot';
@import 'bower_components/bootstrap/scss/bootstrap-grid';

To sum up, I think it should be obvious default way to use "just a grid" or "just a grid with reboot" (if by design grid should not include "reboot"). That can be solved with explicit imports added to _reboot.scss; So the following code would just work:

@import 'bower_components/bootstrap/scss/reboot';
@import 'bower_components/bootstrap/scss/bootstrap-grid';

If, by design, grid should include "reboot" then also explicit import of "reboot" in a bootstrap-grid.scss.

What do you think? Should I send a PR?

[bassjobsen]

i don't think you should import reboot into bootstrap-grid.scss. The build process compiles bootstrap-grid.scss into bootstrap-reboot.scss and bootstrap-reboot.scss. You can use both together in your HTML when you want to use the grid and bootstrap's CSS reset (reboot):

  <link rel="stylesheet" type="text/css" href="bootstrap-4-dev/dist/css/bootstrap-reboot.css">
  <link rel="stylesheet" type="text/css" href="bootstrap-4-dev/dist/css/bootstrap-grid.css">

And yes when you are using both, you should compile it into a single CSS. On the other hand the Bootstrap reset is not required for the grid. The only requirement for using bootstrap-grid.css is setting the global box-sizing value, see http://v4-alpha.getbootstrap.com/getting-started/introduction/#box-sizing

The following code will solve your problem:

  <link rel="stylesheet" type="text/css" href="bootstrap-4-dev/dist/css/bootstrap-grid.css">
  <style>
    html {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }      
  </style>

Notice that importing reboot into bootstrap-grid means you can not import bootstrap-grid anywhere without getting the CSS code generate by reboot at the position of your import. So you can only use it if bootstrap-grid is your first import (output) and you do not CSS any other CSS reset.

[Restuta]

@bassjobsen I understand what you said about CSS. When you want to use just CSS it's okay, you would include two files separately like you mentioned, but some people prefer to include bootstrap as SASS and override some stuff. For those people there should be also simple and obvious way to do so.

I outlined a possibility to do that. (referencing needed mixings from inside reboot.scss).

I wasn't insisting in any way that reboot should be included in the grid (I guarded that possibility with "if" though), are you sure you read my post fully?

[Coooi]

@bassjobsen THANK YOU!