Basic setup

.aside-block is only to give a 20px padding to left and right.
.aside-toggler is to open and close the aside in small screens.

<aside class="aside aside-expand-md">
  <div class="aside-body">
    <div class="aside-block">
      ...
    </div>
  </div>

  <button class="aside-toggler"></button>
</aside>

Modifier classes

.aside-sm

Applies to .aside

Decrease width of the aside to 200px. Default is 250px.

.aside-lg

Applies to .aside

Increase width of the aside to 300px. Default is 250px.

.aside-expand-*

Applies to .aside

* can be one of sm, md, lg and xl. This class hides the aside on screens smaller than selected size.