Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
I may be slow to respond.

Jay Holtslander JayHoltslander

💭
I may be slow to respond.
View GitHub Profile
@JayHoltslander
JayHoltslander / 5 even columns in Bootstrap 2.md
Last active August 29, 2015 13:57
5 Even Columns in Bootstrap 2 (HTML & CSS)
View 5 even columns in Bootstrap 2.md

#5 even columns in Bootstrap 2

Bootstrap can easily make 1,2,3,4, or 6 equally sized columns. But what if you want 5? Well the grid doesn't support it out of the box. You have to add a bit of CSS to Bootstrap and add a class to your row.

The HTML

Write your HTML as if you were creating columns to fit a grid width of 10 as opposed to 12. The example below shows 5 columns with a width of 2.

<div class="row-fluid fivecolumns">
@JayHoltslander
JayHoltslander / Edge to edge Bootstrap columns.html
Last active August 29, 2015 14:06
Edge to edge Bootstrap columns
View Edge to edge Bootstrap columns.html
<div class="container">
<section class="edge-to-edge">
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/640x480/777" alt="">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/640x480/333" alt="">
</div>
@JayHoltslander
JayHoltslander / gist:54f657b0962494ce4dde
Created October 16, 2014 22:17
iOS 8 Web App (Prevent opening in Safari)
View gist:54f657b0962494ce4dde
<!DOCTYPE html>
<html>
<head>
<title>Stay Standalone!</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-title" content="Web App title to override title element name">
@JayHoltslander
JayHoltslander / snippet.html
Last active August 29, 2015 14:11
Bootstrap Media Query Testing Snippet
View snippet.html
<!-- PASTE THIS SOMEWHERE IN YOUR PAGE TO REFERENCE BREAKPOINTS. -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
</div>
@JayHoltslander
JayHoltslander / javascript.js
Created September 27, 2016 00:12
Monarch Plugin Mod
View javascript.js
// SHOW/HIDE SOCIAL MONARCH PLUGIN DEPENDING ON SCROLL POSITION
if( $(window).width() >= 1025) { // if above default responsive breakpoint
$(document).ready(function() {
$(".et_social_sidebar_networks").hide(); // hide initially
var topOfOthDiv = $(".content").offset().top - 390; // set div position
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { // scrolled below div?
$(".et_social_sidebar_networks").show(); // show
}
@JayHoltslander
JayHoltslander / 0_reuse_code.js
Created November 29, 2016 18:59
Here are some things you can do with Gists in GistBox.
View 0_reuse_code.js
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
View iOS-8-web-app.html
<!doctype html>
<html>
<head>
<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
@JayHoltslander
JayHoltslander / example.html
Last active June 29, 2017 10:22
Marvel App Optimized YouTube Embed. Use in conjunction with the instructions at https://help.marvelapp.com/hc/en-us/articles/208395615-How-do-I-embed-video-
View example.html
<!-- "playlist" must be the same individual video id in order for continuous looping to work -->
<iframe src="https://www.youtube.com/embed/Zdjg9yhBqTU?modestbranding=1&playlist=Zdjg9yhBqTU&controls=0&showinfo=0&rel=0&iv_load_policy=3&autoplay=1&loop=1&keyboard=1" allowfullscreen="0" frameborder="0"></iframe>
@JayHoltslander
JayHoltslander / picture-element.css
Created September 27, 2017 21:22
<picture> Element for responsive images.
View picture-element.css
<!--
SOURCE REFERENCES
See:
* https://www.html5rocks.com/en/tutorials/responsive/picture-element/
* https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/
-->
<style>
.responsive-image {
height: 100%;
View non-critical.css
.non-critical {
background-color: yellow; text-align:center; padding:30px; height:20%;
}
.non-critical a {color:black;}