Skip to content

Instantly share code, notes, and snippets.

View atsea's full-sized avatar

Topher atsea

1 follower · 7 following
  • Delaware
View GitHub Profile
@pestbarn
pestbarn / IE11-grid-with-autoprefixer.md
Last active January 23, 2019 18:56
CSS Grid for IE11 using Autoprefixer

About: CSS Grid for IE11

CSS Grid in IE11 is an implementation based on the 2011 spec, which means we aren't really able to use grids out of the box according to the newer spec. However, Autoprefixer automates a lot of work for us with getting the correct IE11 properties, and it has support for most (if not all?) -ms-grid properties.

There are still some gotchas which Autoprefixer can't help with though:

  • There is no auto-placement behaviour in the 2011 spec. This means that for IE11, you have to position everything. rather than use the autoplacement ability of grid.
  • Using minmax() with an auto value is not supported, and will break things - e.g. minmax(auto, 1200px) will not work. To use minmax, you have to specify two positive values - e.g. minmax(500px, 1200px).
  • grid-gap properties were added in a later spec. To create grid-gaps in IE11, you will need to create separate
@ksenzee
ksenzee / grid_mixins.scss
Created December 8, 2017 22:49
Mixins that make it possible to use CSS Grid in IE 10/11 as well as in modern browsers. Based on mixins by Sascha Fuchs at https://medium.com/@gisugosu/css-grid-layout-spec-2-to-spec-1-transpiler-with-sass-415dff4dd31b.
/// Add Gap between the boxes
///
/// @author Sascha Fuchs
///
/// @group core - cssgrid
///
/// @param {list} $boxes - List with box sizes
/// @param {string} $gap - Optional column gap
@function box-gap($boxes, $gap) {
$box: ();
@richtabor
richtabor / google-fonts-the-right-way.php
Last active April 3, 2019 04:43
Demonstrates how to properly include Google Fonts into WordPress themes. Ref: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
if ( ! function_exists( 'prefix_fonts_url' ) ) :
/**
* Register Google fonts.
*
* @return string Google fonts URL for the theme.
*/
function prefix_fonts_url() {
$fonts_url = '';
$fonts = array();
$subsets = '';
@lots0logs
lots0logs / epanel-integration-body.html
Created May 29, 2016 21:28
WordPress :: Divi Theme :: Add active class to menu item on click
<script>
(function($) {
$(window).load(function() {
setTimeout(function() {
var $menus = $('ul.nav');
$menus.each(function() {
var $hash_links = $(this).find('a[href*="#"]');
$hash_links.each(function() {
@nrollr
nrollr / Redis.sh
Created March 29, 2016 11:30
Install Redis via Homebrew
#!/bin/bash
brew install redis # Install Redis using Homebrew
ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents # Enable Redis autostart
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.redis.plist # Start Redis server via launchctl
# homebrew.mxcl.redis.plist contains reference to redis.conf file location: /usr/local/etc/redis.conf
redis-server /usr/local/etc/redis.conf # Start Redis server using configuration file, Ctrl+C to stop
redis-cli ping # Check if the Redis server is running
@wpscholar
wpscholar / defer-async-scripts.php
Last active November 18, 2022 02:41
Class that allows you to async and defer scripts in WordPress by adding data.
<?php
class WP_Scholar_Defer_Scripts {
public static function initialize() {
add_filter( 'script_loader_tag', array( __CLASS__, 'defer_scripts' ), 10, 2 );
add_filter( 'script_loader_tag', array( __CLASS__, 'async_scripts' ), 10, 2 );
}
public static function defer_scripts( $tag, $handle ) {
@milanaryal
milanaryal / schema-org-structured-data-markup-using-microdata.html
Last active November 4, 2023 13:45
An example of how to mark up a HTML5 webpage using the schema.org schemas and microdata.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Site Title</title>
<link rel="stylesheet" href="/assets/css/style.min.css">
@gmazzap
gmazzap / PointersManager.php
Last active January 13, 2017 19:06
Pointers Tour (WPSE 162794)
<?php namespace GM;
class PointersManager implements PointersManagerInterface {
private $pfile;
private $version;
private $prefix;
private $pointers = array();
public function __construct( $file, $version, $prefix ) {
@pburtchaell
pburtchaell / styles.css
Last active February 25, 2024 12:24
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
/**
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
*
* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
* the height of element `.foo` —which is a full width and height cover image.
*
* iOS Resolution Quick Reference: http://www.iosres.com/
*/
@beiyuu
beiyuu / android-version-detect.js
Created November 18, 2013 03:43
var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 ) {
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
if (androidversion < 2.3) {
// do whatever
}
}