Skip to content
GitLab

Extend `.container-fluid` instead of duplicating complete rules

Merged Administrator requested to merge master-mc-extend-container-fluid into master

Created by: MartijnCuppens

This change just outputs less css:

Instead of

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-sm {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm {
    max-width: 540px;
  }
}

.container-md {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container-md {
    max-width: 720px;
  }
}

.container-lg {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  .container-lg {
    max-width: 960px;
  }
}

.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 1200px) {
  .container-xl {
    max-width: 1140px;
  }
}

it generates

.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-xl {
    max-width: 1140px;
  }
}