Tom newtone

Fancy CSS Underlines with Unline SVGs

The premise

The general gist is that we replace normal link underlines (text-decoration: underline) with an SVG background image. The background image is positioned along the bottom of the element, prevented from repeating vertically, and then scaled by defining the background size in text units:

a {
  text-decoration: none;
}

D8 Twig cheat sheet

Conditionals

To check if a field has a value, check to see if the 0 array item is populated. Simply checking if content.field_name is truthy will not work since that variable will be defined even if the field is empty.

{% if content.field_name.0 %}
  {{ field_name }}
{% endif %}

Enter this in the search box along with your search terms:

Get all gists from the user santisbon.
user:santisbon

Find all gists with a .yml extension.
extension:yml

Find all gists with HTML files.
language:html

This is a simplified example of Smarter Link Underlines built for Sass rather than Stylus. Original code example by Adam Schwartz of eager.io.

View a live example on Codepen

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var domStyle = document.createElement("style");
	domStyle.append(
	'* { color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }\
	* * { background-color: rgba(0,255,0,.2) !important; }\
	* * * { background-color: rgba(0,0,255,.2) !important; }\
	* * * * { background-color: rgba(255,0,255,.2) !important; }\
	* * * * * { background-color: rgba(0,255,255,.2) !important; }\

	// font-size of the regular font used
	$base-font-size: 16px;

	// it is convenient to declare a fixed base-line-height,
	// so every other line-height is a simple multiple of base-line-height
	$base-line-height: 21px; // 1.5 * base-font-size

	// allow fractional line-height as integer multiple of base-line-height / line-height-scale
	$line-height-scale: 1;

	$base-font-size: 16px;
	$base-line-height: 1.5;

	// this value may vary for each font
	// unitless value relative to 1em
	$cap-height: 0.68;


	@mixin baseline($font-size, $scale: 2) {