Skip to content

Instantly share code, notes, and snippets.

💭
Working on Bedrock

Wolfr Wolfr

View GitHub Profile
View _alert.scss
// Variables
$alert-padding: 2rem;
$alert-padding-small: 1.5rem;
$alert-padding-large: 5rem 5.5rem;
// Alert
.vl-alert {
display: flex;
position: relative;
background-color: $alt-bg;
View gist:546e1c8cd10ab4301905bcfe2afe9911
// sass-lint:disable force-element-nesting placeholder-in-extend
.vl-typography ul,
.ul {
list-style-type: disc;
}
.vl-typography ol,
.ol {
list-style-type: decimal;
}
.vl-typography ol,
View airtable-data.json
{
"records": [
{
"id": "recqk05WCliPoNTw5",
"fields": {
"optimizedImage": [
{
"id": "attFyUkYRxrRX0lAc",
"url": "https://dl.airtable.com/seMnqW5nQa2Z5k2Jywto_blade-runner-2049.jpg",
"filename": "blade-runner-2049.jpg",
View film.js
export default {
title: "Film",
name: "film",
type: "document",
fields: [
{
title: "Name",
name: "name",
type: "string",
},
@Wolfr
Wolfr / save-batch.js
Created Oct 18, 2018
Convert SVG icons that are stroke-based to expanded shapes in Illustrator. Use the Scripts functionality to run this script.
View save-batch.js
// Change this to your AI files folder (Be sure to end with a /)
var location = "/Users/Downloads/my-file/";
function getFiles() {
var folder = new Folder(location);
if (folder.exists) {
return folder.getFiles("*.svg");
} else {
alert("Unable to find SVG Files Folder");
}
@Wolfr
Wolfr / figma-get-image-from-api.js
Created Sep 28, 2018
About the shortest code I could write to render an image out from the Figma API and make it clear whether it is loading/has loaded.
View figma-get-image-from-api.js
// About the shortest code I could write to render an image out from the Figma API and make it clear whether it is loading/has loaded.
// https://github.com/wolfr
// If you use this code please change to your own access token
const PERSONAL_ACCESS_TOKEN = ''; // Your personal access token here
function apiRequest(endpoint) {
return fetch('https://api.figma.com/v1' + endpoint, {
method: 'GET',
headers: { "x-figma-token": PERSONAL_ACCESS_TOKEN }
@Wolfr
Wolfr / icon-loop.pug
Created Aug 30, 2018
Document SVG icons in Bedrock
View icon-loop.pug
each category, id in icons.svg
if id
h3 #{id}
each icon in category
.svg-icon
+icon(icon.category+'/'+icon.name)
p #{icon.name}
View framer-x-simplest-component.tsx
// Here is the simplest component I could write
import * as React from "react";
import { PropertyControls, ControlType } from "framer";
export class test extends React.Component<Props> {
render() {
return (
<div>Hey</div>
@Wolfr
Wolfr / framer-x-with-css.tsx
Created Aug 24, 2018
Using CSS in Framer X component
View framer-x-with-css.tsx
// Here is a basic Framer X component where we use CSS directly
import * as React from "react";
import { PropertyControls, ControlType } from "framer";
// Define type of property
interface Props {
width: number
height: number
}
View _colors.scss
/* ==========================================================================
Colors
Only define colors here. Don't use sass color functions, stick to hex values,
or the color component in styleguide won't regenerate automatically anymore.
========================================================================== */
/* Red
========================================================================== */
$material-color-red-50: #ffebee;
You can’t perform that action at this time.