Responsive

CSS breakpoints for allowing the UI to render layouts specifically for different screen sizes.

Example

Here's a simple responsive utility starter...

.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }
/* etc. */

@media (min-width: 1280px) {
  .xl\:hidden { display: none; }
  .xl\:block { display: block; }
  .xl\:flex { display: flex; }
  /* etc. */
}
@media (min-width: 1030px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  /* etc. */
}
@media (min-width: 710px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  /* etc. */
}
@media (min-width: 480px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  /* etc. */
}