Skip to content

Instantly share code, notes, and snippets.

View RayPS's full-sized avatar
🏠
Working from home

Ray RayPS

🏠
Working from home
View GitHub Profile
@RayPS
RayPS / Framer-Layer-Stack.coffee
Created August 25, 2017 11:06
Framer-Layer-Stack
Array::stack = (spacing = 0) ->
for layer, index in this
layer.y = this[index-1]?.maxY
layer.y += spacing
@RayPS
RayPS / PaddingLabel.swift
Last active July 27, 2017 08:10
Padding Label (Subclassing UILabel)
class PaddingLabel: UILabel {
var topInset: CGFloat
var bottomInset: CGFloat
var leftInset: CGFloat
var rightInset: CGFloat
required init(withInsets top: CGFloat, _ bottom: CGFloat,_ left: CGFloat,_ right: CGFloat) {
self.topInset = top
self.bottomInset = bottom
@RayPS
RayPS / Custom-UIFont.swift
Last active August 21, 2021 07:08
Custom UIFont with font-family/font-weight/font-style/font-size by UIFontDescriptor
// Put font files to Xcode project.
// Add this properties to Info.plist:
// Fonts provided by application
// Item 0: SF-Pro-Display-Regular.otf
// Item 1: SF-Pro-Display-Bold.otf
// Item 2: ...
// Tips: To get the list of iOS SDK built-in fonts you can found on http://iosfonts.com
// Or type "po [UIFont familyNames]" in Xcode lldb console.
@RayPS
RayPS / Framer-2D-Collision-Detection.coffee
Created November 23, 2016 09:27
Framer-2D-Collision-Detection
cd = (a, b, c)->
if a.x < b.x + b.width and
a.x + a.width > b.x and
a.y < b.y + b.height and
a.height + a.y > b.y
c()
# a: Layer A
@RayPS
RayPS / Framer-More-Easings.coffee
Last active March 4, 2018 13:04
Framer More Easings
easings =
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
easeInSine: "cubic-bezier(0.47, 0, 0.745, 0.715)",
easeOutSine: "cubic-bezier(0.39, 0.575, 0.565, 1)",
easeInOutSine: "cubic-bezier(0.445, 0.05, 0.55, 0.95)",
easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
easeInOutQuad: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
@RayPS
RayPS / Framer-Make-CSS-Triangle.coffee
Last active April 24, 2017 21:06
Framer Make CSS Triangle
Layer::makeTriangle = (direction)->
this.borderColor = "transparent"
this.borderWidth = this.width / 2
this.style["border-#{direction}-color"] = this.backgroundColor.toHexString()
this.backgroundColor = "transparent"
# ----------
rect = new Layer
size: 20
@RayPS
RayPS / Framer-Design-At-1x.coffee
Last active March 4, 2018 13:04
Framer Design At 1x
is_iPhone = Framer.Device.deviceType.includes "apple-iphone"
is_iPhonePlus = Framer.Device.deviceType.includes "plus"
is_iPhoneNotPlus = is_iPhone and not is_iPhonePlus
if is_iPhonePlus and Utils.isFramerStudio() then Framer.Device.content.scale = 3
if is_iPhoneNotPlus and Utils.isFramerStudio() then Framer.Device.content.scale = 2
document.querySelector("head>meta[name=viewport]").setAttribute "content",
"width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"
Framer.Device._update()
@RayPS
RayPS / Framer-Simple-Grid.coffee
Last active March 20, 2021 13:41
Framer Simple Grid
column = 4
count = 19
gutter = 10
cellSize =
width: 100
height: 100
for i in [0...count]
offsetX = i % column
offsetY = Math.floor i / column
@RayPS
RayPS / SpringButton-Extension.swift
Last active July 2, 2016 21:46
UIButton Extension
import UIKit
import Spring
var _scaleFactor: CGFloat = 1
public extension SpringButton {
@nonobjc static let scaleTo = "_scaleTo"
@nonobjc static let scaleBack = "_scaleBack"
@RayPS
RayPS / css-pixel-art.css
Last active November 18, 2015 11:41
CSS Pixel Art
img {
/* Chrome */
image-rendering: pixelated;
/* Safari */
image-rendering: -webkit-crisp-edges;
/* Firefox */
image-rendering: -moz-crisp-edges;