micro.e33.io

I’ve updated the site to use Prism syntax highlighter for styling posted code blocks. This free and open source project is built by a community of contributors and is super-configurable, lightweight and easy to use. It’s a great option to make code blocks easier to read.

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

To use Prism, I installed the Code Syntax Block plugin so I can simply pick the corresponding code language in the default Code Blocks in each blog post.

The plugin will check for a custom theme file here: assets/prism/prism.css, and use that file if it exists. Add your custom file in that location, and it will be used.

Masonry grid layouts are great when you want to show a lot of content over an entire page or section of a page. JavaScript is a typical go-to for these layouts, and it’s great if you need your content blocks to load left-to-right across the page/section, but if you can live with your content blocks loading top-to-bottom in the columns, the method below is a solid pure CSS option without any JavaScript dependencies. This method also uses media queries to make the column-count responsive across devices.

.masonry-container {
	-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 1rem;
	-webkit-column-gap: 1rem;
	column-gap: 1rem;
}
.masonry-item {
	display: inline-block;
	margin: 0 0 1rem;
	width: 100%;
}
@media (max-width: 1024px) {
	.masonry-container {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
	}
}
@media (max-width: 768px) {
	.masonry-container {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
	}
}
@media (max-width: 480px) {
	.masonry-container {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
}

Even though the User Agent Stylesheet CSS across modern browsers is fairly consistent, I sometimes like to start from scratch when writing CSS. The CSS Reset below makes for a clean slate to start CSS from, while sprinkling in a few WordPress-specific tags and making media items responsive. Some of it might be a bit overkill or heavy-handed, but it’s a solid start that works for me and it’s only 775 bytes.

This is my current CSS Reset for WordPress.

* {
	vertical-align: baseline;
	font: inherit;
	font-size: 100%;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}
html {
	box-sizing: border-box;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
hr {
	box-sizing: content-box;
	height: 0;
}
pre,
code {
	font-family: monospace, monospace;
}
strong,
b {
	font-weight: 700;
}
blockquote,
q,
em,
i {
	font-style: italic;
}
ins {
	text-decoration: underline;
}
del,
s {
	text-decoration: line-through;
}
ol,
ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input,
textarea {
	border: 1px solid;
	border-radius: 0;
	max-width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
}
::-webkit-search-decoration {
	-webkit-appearance: none;
}
img,
video,
audio {
	display: block;
}
img,
video {
	height: auto;
	max-width: 100%;
}
embed,
iframe,
object {
	max-width: 100%;
}

This is a minified version of the code above.

*{vertical-align:baseline;font:inherit;font-size:100%;border:0;outline:0;padding:0;margin:0}html{box-sizing:border-box;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*,*:before,*:after{box-sizing:inherit}hr{box-sizing:content-box;height:0}pre,code{font-family:monospace,monospace}strong,b{font-weight:700}blockquote,q,em,i{font-style:italic}ins{text-decoration:underline}del,s{text-decoration:line-through}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}input,textarea{border:1px solid;border-radius:0;max-width:100%;-webkit-appearance:none;-moz-appearance:none}::-webkit-search-decoration{-webkit-appearance:none}img,video,audio{display:block}img,video{height:auto;max-width:100%}embed,iframe,object{max-width:100%}