Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sensible CSS Styles
/******************************************************************************
* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.