[Bootstrap 4] Sample Code for Right-Aligning Some nav-items in navbar

Sample code for right-aligning some nav-items in a Bootstrap 4 navbar with mr-auto.

[Bootstrap 4] How to Set Up Navbar as a Fixed Header

Sample code for making a Bootstrap 4 navbar into a fixed header with sticky-top.

[CSS] 'clearfix' to Clear Float

Sample code for the classic clearfix pattern with IE6/IE7 compatibility hacks.

Single-Line Text Justification and Full-Width Alignment with CSS Only

Use Flexbox's justify-content: space-between to justify a single line of text edge-to-edge in CSS only.

Which CSS framework should engineers who aren't good at frontend adopt? → Bootstrap is still recommended

In-house engineers weigh in on Bootstrap, Semantic UI, Foundation, and Materialize — Bootstrap wins.

[CSS] For image replacement, hide text with text-indent: 100%; white-space: nowrap; overflow: hidden;

A modern image-replacement pattern that hides text safely with text-indent: 100%.

Q) 'If You Were to Introduce a CSS Preprocessor?' A) 'I'd Go with PostCSS' ~ Rough Comparison of PostCSS, Stylus, Sass, Less

Comparing PostCSS, Stylus, Sass, and Less to decide which CSS preprocessor fits your team.

[CSS] How to Print Background Colors and Images in Chrome and Safari

Use -webkit-print-color-adjust: exact to print CSS backgrounds in Chrome and Safari.

[CSS] How to Remove Link Image Borders in Internet Explorer (IE)

Two CSS snippets that use border-style: none to strip IE's link-image border.

[CSS] Sample Code for Switching Images Between Desktop and Mobile

Swap desktop and mobile images with a max-width media query and .pc / .sp classes.

How to Arrange Social Buttons Like Twitter and Facebook Horizontally or Vertically

Snippets for arranging social buttons horizontally or vertically with ul/li and CSS.

css2sass Service That Converts CSS to Sass/Scss is Super Convenient

How to use css2sass to convert CSS into properly nested Sass or SCSS in the browser.

CSS Framework Comparison Site

A short bookmark for usabli.ca's CSS framework comparison site.

How to Fix Google Fonts Not Loading or Not Applying Issues

How to fix Google Fonts not loading or font-weight not applying, with the two most common causes.

How to Use Google Web Fonts

A short memo on using Google Web Fonts with CSS3, with links to the official page and a reference.

[HTML] To Hide Table Tag Borders, Specify style="border:none;"

Sample code that removes table borders by setting border:none on table, tbody, tr, and td.

[JavaScript] How to Extract Only URL from CSS background-image

Basic and class-scoped samples for pulling the URL out of a CSS background-image value with regex.

CSS3 Text Animations with jQuery textillate.js

Sample code for driving CSS3 text animations with jQuery textillate.js.

Text Wrapping Sample Code with jQuery textillate.js

Sample code verifying text wrapping behavior with jQuery textillate.js.

[HTML/CSS] Tool for Measuring Size (px) on Web Pages: 'MeasureIt!' [Chrome][Firefox]

MeasureIt! is a Chrome / Firefox extension for measuring pixel sizes directly on web pages.

[Rails] Editing scaffold.css to Make Tables More Readable

Make Rails 3.1 scaffold tables more readable by adding a border class to scaffold.css.

Compared reset.css and normalize.css and Decided to Recommend normalize.css

Comparing reset.css and normalize.css and choosing normalize.css for its keep-what-works philosophy.

[Stylus] Lost img selector in nested selectors

A Stylus 0.40.3 bug where an `img` selector at the top of a nested block gets dropped from the compiled CSS.

CSS3 Gradient Generation Site 'Ultimate CSS Gradient Generator'

A quick intro to Ultimate CSS Gradient Generator, a GUI tool for building CSS3 gradients.