Skip to content

Instantly share code, notes, and snippets.

View leogono's full-sized avatar
🎯
Focusing

Leo Gono leogono

🎯
Focusing
View GitHub Profile
@leogono
leogono / _script.js
Created August 19, 2020 09:52
button click js listener
// HTML
// <a href="javascript:void(0)" id="click-this">Click this</a>
let button = document.getElementById('click-this');
button.addEventListener('click', function(ev) {
onClick();
});
@leogono
leogono / .gitignore
Created December 6, 2013 05:49
Gitignore for SublimeText3
.DS_Store
.AppleDouble
.LSOverride
# Icon must ends with two \r.
Icon
# Thumbnails
._*
@leogono
leogono / font-size-rem.less
Created November 29, 2013 19:07
Rem Font Size mixins
.font-size(@sizeValue) {
@pxValue: @sizeValue;
@remValue: (@sizeValue / 10);
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
//Apply it by adding .font-size(16); to get 16px and 1.6rem
@leogono
leogono / post_thumbnail.php
Created October 11, 2013 19:17
WordPress post thumbnail with class and fallbackto placehold.it
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('posts-thumb', array('class' => 'img-responsive'));
}
else {
echo '<img src="http://placehold.it/300x320&amp;text=No+featured+image" class="img-responsive" alt="">';
}
?>
@leogono
leogono / inline-block.css
Last active December 25, 2015 07:18
Cross Browser CSS. Compilation of cross browsers CSS.
li {
width: 200px;
min-height: 250px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
_height: 250px;
}
@leogono
leogono / media-queries-variables.less
Created April 30, 2015 06:27
Media Queries Variables for 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 August 29, 2015 14:19
Event Calendar month view
<?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 April 14, 2015 18:25
css grayscale filter
.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");
}

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

@leogono
leogono / index.html
Created February 15, 2015 11:22
pvaKNO
<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>