Skip to content

Instantly share code, notes, and snippets.

View andrewliebchen's full-sized avatar

Andrew Liebchen andrewliebchen

View GitHub Profile
@andrewliebchen
andrewliebchen / app.coffee
Last active February 4, 2018 13:08
React-style state machine for Framer
{ Machine } = require 'stateMachine'
{ TextLayer } = require 'TextLayer' # https://github.com/awt2542/textLayer-for-Framer
InputModule = require 'input' # https://github.com/ajimix/Input-Framer
Framer.Defaults.Layer =
backgroundColor: null
color: 'black'
p =
@andrewliebchen
andrewliebchen / example.coffee
Created December 12, 2016 16:30
Creating multiple layers in Framer
# 1. IMPORT FROM SKETCH
sketch = Framer.Importer.load("imported/boxes@1x")
# 2. INDIVIDUAL LAYERS
box1 = new Layer
size: 100
backgroundColor: 'blue'
# ...More layers...
@andrewliebchen
andrewliebchen / LoremIpsum.coffee
Last active December 10, 2016 23:58
Lorem Ipsum generator module for FramerJS
# Lorem Ipsum generator module for FramerJS
# Place this file in the /modules folder
# Add LoremIpsum = require 'LoremIpsum'
# To use, call the function with the number of words you want...
# `LoremIpsum(5)`
dictionary = [
'ad',
'adipisicing',
@andrewliebchen
andrewliebchen / app.coffee
Created December 7, 2016 17:50
Creating custom classes for FramerJS prototyping
class Pill extends Layer
constructor: (options) ->
super _.defaults options,
height: 26
width: 156
borderRadius: 13
color: 'white'
html: 'Pill_name'
style:
'font-size': '14px'
@andrewliebchen
andrewliebchen / index.scss
Created December 24, 2015 16:02
Pop animation
@keyframes pop {
0% {
opacity: 0;
transform: scale(0.75);
}
100% {
opacity: 1;
transform: scale(1);
}
@andrewliebchen
andrewliebchen / gist:d5072737063b7c7eebd6
Last active August 29, 2015 14:12
Transforming your CSS to JS for fun and profit

Quick guide to CSS in JS.

Transforming your CSS to Javascript is easy!

Step 1:

Change all css file extensions to js.

Step 2:

A:
$888888888888
8D888DO= :7D8888D+
7888N OD888 I88888 O88888DI 88888888O 888, D88 =88888 =88888, D88 8888
D888 D888 D8888888D D888888887 888888888 :8888 D88 888888887 D888888D8 88D, 888,
?88D O888 O888 ?888 D888 I888 888$ :8888D D88 888D I888 888D $888: O888 +88D
888 88888888888~ 888= 8888 888~ D888 888 888$ :88888= D88 8888 888 D88D 888? :D88 888+
D88 D88888888 I888 8888 888~ D888 8888 88888888 :888888 D88 8888 D88D 888? 8887 D8D
88D ?D888D 888 8888 888~ D88888888 88888888 :888D888888 8888 DDDDD, D88D 888? I888=88D
@andrewliebchen
andrewliebchen / gist:7847697
Created December 7, 2013 19:51
User stylesheet for hiding media preview cards on Twitter
/* Twitter */
/* Hide image previews */
.cards-multimedia {
display: none;
}
.open .cards-multimedia {
display: block;
}
@andrewliebchen
andrewliebchen / gist:7539365
Last active December 28, 2015 17:59
User stylesheet for Sprint.ly v0.0.2
/* Sprintly v0.0.2 */
/* Goes in username/Libarary/Application Support/Google/Chrome/Default/User Stylesheets/Custom.css */
#logged_in_default * {
font-family: 'helvetica neue', helvetica, sans-serif !important;
text-shadow: none !important;
}
#logged_in_default #logged_in_header,
#logged_in_default .global-filters {
<div class="class">
<table>
<tbody>
<tr>
<td class="class_name"><strong>Meditation in Motion</strong></td>
<td class="info_link"><a>Description</a></td>
<td class="time"></td>
</tr>
</tbody>
</table>