Skip to content

Instantly share code, notes, and snippets.

Leo Gono leogono

View GitHub Profile
@leogono
leogono / media-queries-variables.less
Created Apr 30, 2015
Media Queries Variables for Less
View media-queries-variables.less
Variables
@sm-up: ~'(min-width: @{screen-sm})';
@md-up: ~'(min-width: @{screen-md})';
@lg-up: ~'(min-width: @{screen-lg})';
@xl-up: ~'(min-width: 1900px)';
@retina: ~'(-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-resolution: 240dpi)';
@leogono
leogono / event-calendar-month-view.php
Last active Aug 29, 2015
Event Calendar month view
View event-calendar-month-view.php
<?php
/**
*
* add events calendar classes to display calendar propery in homepage
*
*/
add_filter( 'body_class', 'add_class_for_calendar_view' );
function add_class_for_calendar_view( $classes )
{
@leogono
leogono / css-grayscale.css
Created Apr 14, 2015
css grayscale filter
View css-grayscale.css
.img-greyscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
View css-guide.md

CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

This is where any fun you might have been having ends. Now it’s time to get serious and talk about rules.

Writing CSS is hard. Even if you know all the intricacies of position and float and overflow and z-index, it’s easy to end up with spaghetti code where you need inline styles, !important rules, unused cruft, and general confusion. This guide provides some architecture for writing CSS so it stays clean and maintaina

View index.html
<div class="rating">
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star half"></i>
</div>
@leogono
leogono / index.html
Last active Aug 29, 2015
interactive hamburger menu icon
View index.html
<div class="interactive-menu-button">
<a href="#">
<span>Menu</span>
</a>
</div>
@leogono
leogono / hide-text.css
Last active Aug 29, 2015
new Image Replacement css
View hide-text.css
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
a.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
View Custom Full Width Page Template Genesis
<?php
/**
* This file adds a custom template to the AgentPress Child Theme.
*
* @author Brad Dalton
* @link http://wpsites.net/web-design/make-custom-page-template/
* @package Agentpress
* @subpackage Customizations
*/
View responsive_likebox.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:100%;">
<div class="fb-like-box" data-href="https://www.facebook.com/adobegocreate" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
@leogono
leogono / .gitignore
Created Dec 6, 2013
Gitignore for SublimeText3
View .gitignore
.DS_Store
.AppleDouble
.LSOverride
# Icon must ends with two \r.
Icon
# Thumbnails
._*
You can’t perform that action at this time.