Bootstrap 4 Table Inverse

Bootstrap has announced the first alpha release of Bootstrap 4. Bootstrap 4 is built using Sass, instead of Less and comes with an improved grid, outline buttons and what we are going to look at today, inverse table.

See the Pen Bootstrap 4: Table Inverse by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

Bootstrap Table Inverse HTML

There is no need to extend Bootstrap with CSS, as inverse table is included in Bootstrap 4. All you have to do is add the table-inverse class to the table tag.

Before:

<table class="table">

After:

<table class="table table-inverse">

That’s it!

Here is an example inverse table you can use as a starting point.

<div class="table-responsive">
    <table class="table table-inverse">
        <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>

Margin Stylus Mixin

The following are two (2) Stylus mixins for the CSS margin property. One of the mixins is a shorthand version and the other is a longhand version. You can use one (1) or both of the mixins in your code.

Shorthand Margin Stylus Mixin

The first is a shorthand Stylus mixin:

/* Margin shorthand version */
margin(n)
  margin n

How you would use the Stylus mixin would be:

margin(px)

Where px is the size.

Here is an example of the mixin:

margin(5px)

Or define all margin sizes:

margin(50px 25px 15px 5px)

Longhand Margin Stylus Mixin

The next Stylus mixin allows you to set individual sides:

/* Margin longhand version */
margin-all(top, right, bottom, left)
  margin-top: top
  margin-right: right
  margin-bottom: bottom
  margin-left: left

Usage of this Stylus mixin is:

margin-all(top, right, bottom, left)

Example of the mixin in use:

margin-all(1px, 2px, 3px, 4px)

BEM Sass Mixins

The following are a couple of Sass mixins for BEM (block, element, modifier) front-end naming methodology.

BEM Sass Mixins

The Sass mixin for BEM element is:

// BEM Element
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

The Sass mixin for BEM modifier is:

// BEM Modifier
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

BEM Sass Mixins Usage

Here is how you would use the BEM Sass mixins:

.block {
  /* Add .block CSS here */

    @include element('element-name') {
      /* Element CSS goes here */
    }

    @include modifier('modifier-name') {
          /* Modifier CSS goes here */

        @include element('element-name') {
            /* Element of Modifier CSS goes here */
        }
    }

}

Where element-name and modifier-name is the name of the element and modifier.

As you can see, the block wraps around everything. The element and modifier of the block goes inside the block CSS class. If there is an element of the modifier, the element would go inside the modifier.