Skip to content

Instantly share code, notes, and snippets.

@ozinepank
ozinepank / rebase.md
Last active Jan 15, 2016
Git rebase and merge form : master
View rebase.md

checkout to your current working feature/branch

git checkout -b feature/branch

checkout new tmp branch from feature/branch

git checkout -b tmp

delete feature/branch for merging commit logs

git branch -D feature/branch

checkout to the base branch

@ozinepank
ozinepank / Padding-Hack.css
Last active May 30, 2021
The Padding-Bottom Hack
View Padding-Hack.css
.img-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.img-container img {
position: absolute;
top: 0;
@ozinepank
ozinepank / mixing-palceholder.scss
Last active Nov 18, 2015
Using Mixing pseudo palceholder (SASS)
View mixing-palceholder.scss
@mixin psuedo-placeholder($color-placeholder) {
&::-webkit-input-placeholder {
color: $color-placeholder;
@include transition-color;
}
&:-moz-placeholder { /* Firefox 18- */
color: $color-placeholder;
@include transition-color;
}
View Content.scss
%GutterPaddingContent {
padding:40px 20px;
}
.Content {
@extend %GutterPaddingContent /* Mobile */
}
@media all and (min-width: 1001px) {
%GutterPaddingContent {
View Button.scss
$tappable-height:60px;
$default-border-radius:4px;
$Green: #97cb5b;
%ButtonStyle {
background:#fff;
display: inline-block;
border-radius:$default-border-radius;
font-size: 18px;
font-weight: bold;
cursor: pointer;
View stylesheet.scss
$tappable-height:60px;
$default-border-radius:4px;
$Green: #97cb5b;
.ButtonStyle {
background:#fff;
display: inline-block;
border-radius:$default-border-radius;
font-size: 18px;
font-weight: bold;
cursor: pointer;
View frontendDevlopmentBookmarks.md
View sass_and_less_compared.markdown

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

@ozinepank
ozinepank / hover-fadein-fadeout.html
Last active Dec 16, 2015
Hover element fadeIn and fadeOut
View hover-fadein-fadeout.html
<!DOCTYPE html>
<head>
<title>Hover : show Nivagation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/lab.css"/>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function(){
@ozinepank
ozinepank / actionhover.js
Last active Dec 16, 2015
AddClass if mouse hover and removeClass if user mouseleave
View actionhover.js
$(".action-a").mouseenter(function(){
$(this).addClass('action-hover');
}) ;
$(".dropdown").mouseleave(function(){
$(".action-a").removeClass('action-hover');
});