Sensible CSS Styles

starter-styles.css

/******************************************************************************
 * Page Defaults
 *****************************************************************************/

/* Bootstrap 4 Reboot: https://getbootstrap.com/docs/4.0/content/reboot/ */
/* Bootstrap 4 Reboot CSS: https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css */

/* global box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
/* native font stack: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */

/* system font stack (WordPress?) */
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; */

body {
  /* font smoothing */
  /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
}

/******************************************************************************
 * Helpers
 *****************************************************************************/

.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

[hidden] { display: none !important; }
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}