Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven’t yet. The concept is inspired by Jeremy Keith’s links and CSS-Tricks, among other things. Enjoy.

CSS Variables Are A Sometimes Food

This article makes the important point that CSS custom properties - a.k.a. variables - are not a complete and ideal replacement for variables in preprocessors like Sass: they have different but overlapping use-cases, and custom properties are far better if used when cascading or changing the values in the browser are needed, while preprocessor variables are more performant for the browser when they perform the same role as custom properties, i.e. not repeating oneself. There’s also the issue of browser support for custom properties, but that’s another story.

Source link: 

https://codepen.io/stowball/post/css-variables-are-a-sometimes-food

Tags: 

Breaking Out with CSS Grid Layout

A side-by-side comparison of a narrow viewport and a wider one, with one grid item spanning the full width in the latter, while the rest are constrained via the centre column.

If you’ve ever needed to have a content column with a maximum width, but have specific elements span the full width of the viewport, thus breaking out of the column, CSS Grid can do this really simply. First the grid on the container:

CSS

.content {
	display: grid;
	grid-template-columns: 
		[full-start] minmax(1em, 1fr) 
		[main-start] minmax(0, 40em) [main-end]
		minmax(1em, 1fr) [full-end];
}

This defines the columns, including the max width of the content, and a gutter. For normal content:

CSS

.content > * {
	grid-column: main;
}

Then for items to span the full viewport:

CSS

.content__full {
	grid-column: full;
}

See the source link for more details.

Source link: 

Breaking Out With CSS Grid Layout - Cloud Four

Tags: 

Bevelled box corners with CSS and Sass

A box with all four corners cut off at 45 degree angles.

Say you’re trying to pull off a design effect where the corner of an element are cut off. Maybe you’re a Battlestar Galactica fan? Or maybe you just like the unusual effect of it, since it avoids looking like a typical rectangle.

[…]

I suspect there are many ways to do it. Certainly, you could use multiple backgrounds to place images in the corners. You could just as well use a flexible SVG shape placed in the background. I bet there is also an exotic way to use gradients to pull it off.

But, I like the idea of simply taking some scissors and clipping off the dang corners. We essentially can do just that thanks to clip-path. We can use the polygon() function, provide it a list of X and Y coordinates and clip away what is outside of them.

CSS

.box {
	--notchSize: 2em;
 
	clip-path:
		polygon(
			0% var(--notchSize),
			var(--notchSize) 0%,
			calc(100% - var(--notchSize)) 0%,
			100% var(--notchSize),
			100% calc(100% - var(--notchSize)),
			calc(100% - var(--notchSize)) 100%,
			var(--notchSize) 100%,
			0% calc(100% - var(--notchSize))
		);
}

I’ve written a Sass mixin to make this easier to reuse:

Sass

///
/// Bevel all four corners of an element by the specified amount.
///
/// This is based on the linked article by Chris Coyier.
///
/// @author Matei "Ambient.Impact" Stanca
///
/// @link https://ambientimpact.com/web/snippets/bevelled-box-corners-with-css-and-sass
///
/// @param {Number} $size - The amount to bevel by.
///
@mixin bevel($size) {
	clip-path: polygon(
		// Top left corner points.
		0%						#{$size},
		#{$size}				0%,
		// Top right corner points.
		calc(100% - #{$size})	0%,
		100%					#{$size},
		// Bottom right corner points.
		100%					calc(100% - #{$size}),
		calc(100% - #{$size})	100%,
		// Bottom left corner points.
		#{$size}				100%,
		0%						calc(100% - #{$size})
	);
}

You can use it like so:

Sass

.box {
	// Really simple version:
	@include bevel(1em);
 
	// If you want to use CSS custom properties for browsers that support them,
	// you can do so. The benefits are that these cascade like other CSS
	// properties, so they can be inherited, and modified in real time. This
	// must come after the simple version.
	--bevel-amount: 1em;
	@include bevel(var(--bevel-amount));
}

Source link: 

Notched Boxes | CSS-Tricks

Tags: 

Learn web development on the Mozilla Developer Network

Welcome to the MDN Learning Area. This set of articles aims to provide complete beginners to web development with all they need to start coding simple websites.

The aim of this area of MDN is not to take you from “beginner” to “expert” but to take you from “beginner” to “comfortable”. From there you should be able to start making your own way, learning from the rest of MDN and other intermediate to advanced resources that assume a lot of previous knowledge.

If you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.

Source link: 

https://developer.mozilla.org/docs/Learn

Tags: 

Drupal 8 contextual links are locally cached in sessionStorage

I ran into a seriously confusing issue with a project that I’m learning the internals of Drupal 8 for: custom contextual links were not reliably appearing or even disappearing after removing them from code, and the only thing that seemed to work was to fully uninstall  and reinstall the custom module, which is far from ideal. Turns out that, for whatever reason, Drupal caches contextual link markup in sessionStorage, which is why clearing Drupal’s own cache had no effect like you would expect coming from Drupal 7. Ways of dealing with this are fully clearing your browser’s cache, opening the page in a new tab (due to how sessionStorage works), or opening up your browser’s developer tools and deleting the sessionStorage entries for the entities or other identifiers. For example, for a block it would be Drupal.contextual.block.*, while for a node it would be Drupal.contextual.node.*.

Source link: 

https://www.drupal.org/forum/support/post-installation/2017-02-26/need-help-with…

Tags: 

Pages

Subscribe to Snippets