Skip to main content

CSS

System font stack

body {
/* GitHub */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

/* An alternative */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
}

Add ellipsis to overflowing text

.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

Center a webpage

<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>
#page-wrap {
width: 800px;
margin: 0 auto;
}

Make an image responsive

img {
max-width: 100%;
height: auto;
}

This adds the text (PDF) after PDF links in the document:

a[href$=".pdf"]:after {
content: "(PDF)";
}

/* Use data-size attribute if provided */
/* Adds `(PDF, <data-size>)` */
a[href$=".pdf"][data-size]:after {
content: "(PDF, " attr(data-size) ")";
}

Common breakpoints

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Misc

  • position: sticky doesn't work if overflow of parent is set.