Matt Zimmermann influxweb

How to disable HTML links with CSS?

Since IE11 we can just use CSS to prevent elements to fire hover and click event. Here is how to do it:

<a href="page.html" class="off">Link</a>

.off {
pointer-events: none;
cursor: default;

How to force a file download in the browser?

The use case is simple, you have /reports/593874951.pdf on your web server and want to let your user download it — and if possible with a meaningful name.

In the past, you may tried using the Content-Disposition HTTP header to achieve this, but today, with Safari getting the support for the download attribute it’s going to simplify a lot of things.

Using the download attribute is simple as pie:

<a href="/reports/593874951.pdf" download="report.pdf">
 Download report

Improved .sr-only

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

FROM: http://www.miva.com/forums/forum/general/miva-merchant-dream-features/683966-next-generation-image-machine

Also there is a JavaScript method to pull any image you want with any dimensions:

Make a call to json.mvc with the following parameters:

Session_Type=runtime Function=Runtime_ProductImageList_Load_Product_Var iant Product_Code= Variant_ID=

RWD | Responsive HTML5 form elements with CSS Flexbox

HTML form with responsive web design. Furthermore it's done with CSS Flexbox, so no floats are used at all. This form layout was inspired by another pen made by Chris Coyier: http://codepen.io/chriscoyier/pen/DmnlJ

A Pen by Torben Colding on CodePen.

License.

	/**
	* Loads an HTML document from a URL and retuns an element selected using
	* the 'selector' parameter
	* Example usage:
	* loadPageSection('./myPage.html', '#container', (r, err) => console.log(r, err));
	*
	* @method loadPageSection
	* @param {String} url
	* @param {String} selector - A valid CSS selector
	* @param {Function} callback - To be called with two parameters (response, error)

	/**
	* A collection of helper prototype for everyday DOM traversal, manipulation,
	* and event binding. Sort of a minimalist jQuery, mainly for demonstration
	* purposes. MIT @ m3g4p0p
	*/
	window.$ = (function (undefined) {

	/**
	* Duration constants
	* @type {Object}

	export function debounce(fn, wait) {
	let timeout;
	return function () {
	clearTimeout(timeout);
	timeout = setTimeout(() => fn.apply(this, arguments), (wait \|\| 1));
	}
	}

	// --------------------------------------------------------------------------------------
	// A More Modern Scale for Web Typography
	// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
	// --------------------------------------------------------------------------------------

	$body-font-size: 1em !default;

	// Adjusts body typography to be default
	// for each browser.
	@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="main.css" />
	<title>ITCSS Grid Example</title>
	</head>
	<body>