Skip to content

Instantly share code, notes, and snippets.

View rafibomb's full-sized avatar

Rafi Benkual rafibomb

87 followers · 1 following
View GitHub Profile
@rafibomb
rafibomb / SassMeister-input-HTML.html
Created May 11, 2015 21:15
Generated by SassMeister.com.
<div class="my-switch">
<input id="switchName" type="checkbox">
<label for="switchName"></label>
</div>
@rafibomb
rafibomb / SassMeister-input-HTML.html
Created May 11, 2015 21:17
Generated by SassMeister.com.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
@rafibomb
rafibomb / SassMeister-input-HTML.html
Created May 21, 2015 21:23
Generated by SassMeister.com.
<ul class="container no-bullet">
<li class="features">a</li>
<li class="features">b</li>
<li class="features">c</li>
<li class="features">d</li>
</ul>
@rafibomb
rafibomb / SassMeister-input-HTML.html
Created June 1, 2015 21:28
Generated by SassMeister.com.
<ul class="contact-info">
<li class="features">a</li>
<li class="features">b</li>
<li class="features">c</li>
<li class="features">d</li>
</ul>
@rafibomb
rafibomb / SassMeister-input-HTML.html
Created August 31, 2015 04:47
Generated by SassMeister.com.
<ul class="panel-grey">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<h1>Green</h1>
</ul>
@rafibomb
rafibomb / SassMeister-input-HTML.html
Created November 10, 2015 21:03
Generated by SassMeister.com.
<ul class="custom-panel">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<h1>Green</h1>
</ul>
@rafibomb
rafibomb / f4e2 example
Created March 22, 2016 21:16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style>
#outlook a {
padding: 0; }
@rafibomb
rafibomb / email-coding-dem0
Created July 15, 2016 00:07
10 minute html email coding
---
subject: The latest and greatest Pokemon Go lures
title:
preheader: Once you read this you'll send me all your monies :)
---
<container>
<spacer size="16"></spacer>
@rafibomb
rafibomb / responsive-expand-buttons
Created September 27, 2017 21:54
These are responsive classes for expanded buttons.
@media screen and (max-width: 39.9375em) {
.button.small-only-expanded {
display: block;
width: 100%;
margin-right: 0;
margin-left: 0; } }
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.button.medium-only-expanded {
display: block;
width: 100%;
@rafibomb
rafibomb / filter-panel
Created February 6, 2019 21:42
$filter-panel-width: rem-calc(368);
$filter-panel-background: $white;
$filter-panel-transition-easing: $offcanvas-transition-timing;
$filter-panel-transition-timing: $offcanvas-transition-length;
$filter-panel-content-padding: 1rem;
$filter-panel-z-index: 12;
$filter-panel-shadow: -1px 0 10px 0 rgba($black, 0.4);
.filter-panel {
position: fixed;