Skip to content

Instantly share code, notes, and snippets.

View faridulhassan's full-sized avatar

Faridul Hassan faridulhassan

7 followers · 27 following
View GitHub Profile
@faridulhassan
faridulhassan / margins-padding
Created February 26, 2017 12:32 — forked from pjschreifels/margins-padding
#sass #css-layout — Margin and Padding loop for SASS.
// Margins and Padding
// -------------------------
$i: 0;
@while $i <= 50 {
.mt#{$i} { margin-top: 1px * $i; }
.mb#{$i} { margin-bottom: 1px * $i; }
.ml#{$i} { margin-left: 1px * $i; }
.mr#{$i} { margin-right: 1px * $i; }
.pt#{$i} { padding-top: 1px * $i; }
@faridulhassan
faridulhassan / easing.scss
Created November 18, 2016 16:57 — forked from tdreyno/easing.scss
Easing functions for Sass 3.1
@function linear() {
@return cubic-bezier(0.250, 0.250, 0.750, 0.750); }
@function ease() {
@return cubic-bezier(0.250, 0.100, 0.250, 1.000); }
@function ease-in() {
@return cubic-bezier(0.420, 0.000, 1.000, 1.000); }
@function ease-in-quad() {
@return cubic-bezier(0.550, 0.085, 0.680, 0.530); }
@faridulhassan
faridulhassan / css-sass-helpers.scss
Created November 18, 2016 16:57 — forked from adamcbrewer/css-sass-helpers.scss
SASS: Helpers and mixins for using with SASS
//============================================================
// Typography
//============================================================
// An rem font-size mixin providing fallback to px
@mixin font-size($sizeValue: 1.4) {
$remValue: $sizeValue;
$pxValue: ($sizeValue * 10);
font-size: #{$pxValue}px;
font-size: #{$remValue}rem;
@faridulhassan
faridulhassan / frontendDevlopmentBookmarks.md
Created October 12, 2016 19:57 — forked from dypsilon/frontendDevlopmentBookmarks.md
A badass list of frontend development resources I collected over time.
@faridulhassan
faridulhassan / style.css
Created January 3, 2016 19:40 — forked from alexcican/style.css
Useful CSS snippet for creating a new website. Sets typography for vertical rhythm and icon font for icons, as well as mobile, tablet, and large screen query. Based on 32px baseline height and 22px font-size for body.
/*** GLOBAL ***/
/**************/
img, embed, object, video {
max-width: 100%;
}
@font-face {
font-family: 'sicanstudios-icons';
src:url('./fonts/sicanstudios-icons.eot');
}
@faridulhassan
faridulhassan / gist:73c6941e1fb32f209d79
Created October 29, 2015 08:25 — forked from jrue/gist:4980704
This gist is an example of using HTML5 video as the background of a <div> element. It uses MediaElement.js for better compatibility with older browsers. This works on iPad, but not iPhone as the iPhone launches a native player.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Download from http://mediaelementjs.com/ We only need the build folder -->
<script src="build/mediaelement-and-player.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="build/mediaelementplayer.min.css" type="text/css" media="screen" charset="utf-8">
@faridulhassan
faridulhassan / contact.html
Created October 14, 2015 04:31 — forked from ajtroxell/contact.html
Build a simple PHP, jQuery, and AJAX Powered Contact Form, from: http://ajtroxell.com/build-a-simple-php-jquery-and-ajax-powered-contact-form/
<form id="contact" name="contact" method="post">
<fieldset>
<label for="name" id="name">Name<span class="required">*</span></label>
<input type="text" name="name" id="name" size="30" value="" required/>
<label for="email" id="email">Email<span class="required">*</span></label>
<input type="text" name="email" id="email" size="30" value="" required/>
<label for="phone" id="phone">Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" />
@faridulhassan
faridulhassan / page-parallax.php
Last active August 29, 2015 14:12 — forked from serusnak/page-parallax.php
<?php
/*
* Template name: Parallax Page
* Workaround for this tutorial at http://wevostudio.com/wordpress-parallax-implementation.
* This outputs sections with feature image background using parallax scrolling set with custom post content.
*/