Skip to content

Instantly share code, notes, and snippets.

💭
Working on Bedrock2

Wolfr Wolfr

💭
Working on Bedrock2
View GitHub Profile
@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;
View colors.pug
each category in colorCategories
h4= category.name
ul.br-color-swatch-list
each color in category.colors
li.br-color-swatch-item
.br-color-swatch-preview(style=`background-color: ${color.value}`)
.br-color-swatch-data
.swatch-name= color.name
.swatch-value= color.value
View typography.pug
- var veryShortContent = 'Lorem ipsum';
- var shortContent = 'Lorem ipsum dolor sit amet';
- var longContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(5).trim()
- var samples = [];
- samples.push({name: 'Headline 1', code: '<h1 class="mdc-typography--headline1">' + veryShortContent + '</h1>', extraClass: contentClass})
- samples.push({name: 'Headline 2',code: '<h2 class="mdc-typography--headline2">' + veryShortContent + '</h2>', extraClass: contentClass})
- samples.push({name: 'Headline 3', code: '<h3 class="mdc-typography--headline3">' + shortContent + '</h3>', extraClass: contentClass})
- samples.push({name: 'Headline 4', code: '<h4 class="mdc-typography--headline4">' + shortContent + '</h4>', extraClass: contentClass})
- samples.push({name: 'Headline 5', code: '<h5 class="mdc-typography--headline5">' + shortContent + '</h5>', extraClass: contentClass})
- samples.push({name: 'Headline 6', code: '<h6 class="mdc-typ
View button-mixin.pug
//- Button 1.1
//- 1.1: Added disabled state
mixin c-button(options, attributes)
- var DEFAULT_OPTIONS = {};
- DEFAULT_OPTIONS.label = 'Button label' // string
- DEFAULT_OPTIONS.skin = 'default' // string
- DEFAULT_OPTIONS.size = false // string
- DEFAULT_OPTIONS.href = false // string
- DEFAULT_OPTIONS.icon = false // boolean
- DEFAULT_OPTIONS.disabled = false // boolean
@Wolfr
Wolfr / error.pug
Created Jan 18, 2018
Bedrock tutorial - Error for sign-in template
View error.pug
if error
.u-spacer-bottom
.c-alert.c-alert--danger
p Wrong username/password combination.
@Wolfr
Wolfr / sign-in-start.pug
Created Jan 18, 2018
Bedrock tutorial - Sign in start state
View sign-in-start.pug
extends /templates/_layouts/master
block append pageVariables
- var moduleTitle = 'Sign In'
block body
.o-flex.o-flex--center.u-maximize-height
.c-panel.c-panel--small
.c-panel__header
h2.c-panel__title Sign In
@Wolfr
Wolfr / block-append.pug
Created Jan 18, 2018
Block appending vars
View block-append.pug
block append pageVariables
- var moduleTitle = 'Sign In'
- var htmlClass = 'u-maximize-height'
- var bodyClass = 'u-maximize-height'
You can’t perform that action at this time.