Skip to content

Instantly share code, notes, and snippets.

View cballenar's full-sized avatar

Carlos Ballena cballenar

9 followers · 16 following
View GitHub Profile
@cballenar
cballenar / css-baseline-grid.css
Last active October 14, 2015 00:08
/* This gist was inspired by DigitPaint [ http://advent2012.digitpaint.nl/13/ ] */ This is a baseline grid created using some (perhaps all) of the new CSS background properties. it simulates a baseline grid based on ems which will allow you to size according to your site's font size. A clear disadvantage is that it is limited to be a background.…
/* ---------------------------------------------------
Production Versions ( Minified )
--------------------------------------------------- */
/* Background */
/**/ .baseline{font-size:1em;background:none;background-image:-webkit-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box;background-attachment:local}
/**/ .baseline *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}
/* Overlay + Hover switch */
/**/ body{position:relative}body:hover:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;pointer-events:none;background-size:100% .75em;background-origin:content-box;background-attachment:local;background-image:-webkit-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);bac
@cballenar
cballenar / typography-test.html
Last active December 9, 2015 18:28
The following gist was built to help developers test their websites, particularly how type elements line up in relationship to one another. This can be used in combination with a baseline grid for more precision. I can't remember who built this originally, but I think it's safe to assume that it was Jukka Korpela, as his name appeared in the cod…
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Typography Test</title>
<meta name="description" content="">
@cballenar
cballenar / index.html
Last active December 13, 2015 22:18
Numbers & CSS - Looking for ways to improve how columns and objects work in CSS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper body">
@cballenar
cballenar / wrap-around.css
Last active December 14, 2015 03:58
Create the illusion an element wrapping around a container. While this technique has been around for a while. It reamins a very interesting style that can help certain pieces of content pop-up. Depending on the class you select the code will pull an element off to the left, right or both sides, and add a triangle for the wrap around illusion. Vi…
/* Wrap Around - http://jsbin.com/agegux/2/
---------------------------------------------------------------------------------
The following code allows you to create the illusion an element
wrapping around a container.
While this technique has been around for a while. It reamins a very
interesting style that can help certain pieces of content pop-up.
Depending on the class you select the code will pull an element
@cballenar
cballenar / my-terminal.md
Last active December 21, 2015 15:59
My Terminal Settings

My Terminal Settings

Saving & Sharing my terminal settings.

Tools

Settings

Local Command Prompt

@cballenar
cballenar / data-print.css
Last active December 22, 2015 09:58
Adding the data-print attribute to an element, will print the value after the element. This addresses elements that may contain information you want to see only when printed. This is a variation of the HTML5Boilerplate's solution to links [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles] . Live example: http://jsbin…
@media print {
/* data-print="print-me"
* ==================================
* Adding the data-print attribute to an element, will print the value after the element.
* This addresses elements that may contain information you want to see only when printed.
*
* This is a variation of the HTML5Boilerplate's solution to links
* [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles]. */
@cballenar
cballenar / browser-guides.css
Created October 21, 2013 04:32
In-browser Photoshop-like guides. After designing in browser for a little while there's been a few times that I wished I had guides in the browser so I decided to see how this worked out. Test page: http://jsbin.com/uHujOyo/3/edit
.guides {
div {
cursor: move;
content: ' ';
display: block;
position: fixed; }
#x {
top: 50%;
width: 100%; height: 1px;
background: cyan; }
@cballenar
cballenar / README.md
Last active January 2, 2016 04:49
'alpha-me' is a SCSS mixin that calculates a fallback solid color based on a translucent color (rgba or hsla) and a background color (by default, white) and returns both colors (fallback and original) with their properties and attributes. This allows us to use this mixin for multiple properties, such as: borders, shadows, etc. View live example at

alpha-me()

A SCSS mixin to create RGB fallbacks for RGBa styles.

  • By: @cballenar
  • Last updated: January 4th, 2014

How to

This mixin takes up to 4 arguments (minimum of two)

@cballenar
cballenar / gist:b71de8117b7042b01e92
Created August 21, 2014 17:16
Craft & Twig bits
{# Convert hyphenated-string to camelCase #}
{{ string | regex ( '/-([a-z])/e', 'ucfirst("\\1")' ) }}
{# Convert camelCasedString to hyphenated-one #}
{{ string | regex( '/(^|[a-z])([A-Z])/e', 'strtolower( strlen("\\1") ? "\\1-\\2" : "\\2" )', (type.handle) ) }}
@cballenar
cballenar / _setting-up-rpi-web-server.md
Last active February 18, 2016 22:09
RaspberryPi Web Server

Setting up a RaspberryPi Web Server with NginX

WARNING!

I started this guide as I was building my web server but it was never finished. Nonetheless there's some valuable info for anyone starting a web server from scratch.

Steps

  1. [download offline raspbian][0]
  2. follow instructions for [no screen install of raspbian][1]
  3. setup [static ip address][2], reserve in router, and update hosts file on remote computer
  4. follow [secure web server][7], [secure ssh best practices][3], setup [ssh-copy-id in mac][4]