lumo-css-framework/layout.css

CSS framework for building web apps using Vaadin's Lumo theme

/* === Box sizing === */
.box-border {
  box-sizing: border-box;
}
.box-content {
  box-sizing: content-box;
}

/* === Display === */
.block {
  display: block;
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.inline-grid {
  display: inline-grid;
}
.grid {
  display: grid;
}

/* === Overflow === */
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}

/* === Position === */
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.relative {
  position: relative;
}

/* === Responsive design === */
@media (min-width: 640px) {
  .sm\:flex {
    display: flex;
  }
  .sm\:hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
}
@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
}
@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
  .xl\:hidden {
    display: none;
  }
}
@media (min-width: 1536px) {
  .\32xl\:flex {
    display: flex;
  }
  .\32xl\:hidden {
    display: none;
  }
}