Skip to content

Instantly share code, notes, and snippets.

Avatar

Cristiano Rastelli didoo

View GitHub Profile
View ds-controls.js
static propertyControls: PropertyControls = {
text: { type: ControlType.String, title: 'Text' },
fontSize: {
type: ControlType.FusedNumber,
toggleKey: 'fontPerBP',
toggleTitles: ['Font', 'Font per BP'],
valueKeys: ['font1', 'font2', 'font3', 'font4'],
valueLabels: theme.breakpoints.map(s => s.replace('px', '')),
min: 0,
title: 'Font Size',
@aalokt89
aalokt89 / LayerComponent.tsx
Created Aug 26, 2018
Framer X Data and props Animation
View LayerComponent.tsx
import * as React from "react";
import {
Frame,
Data,
Animatable,
animate,
PropertyControls,
ControlType
} from "framer";
@romannurik
romannurik / tab-widget.tsx
Created Aug 23, 2018
A proof-of-concept Tab widget for Framer X
View tab-widget.tsx
import { ControlType, PropertyControls } from "framer";
import * as React from "react";
interface TabWidgetProps {
selectedTab: number;
accentColor: string;
}
@aalokt89
aalokt89 / ImagePost.tsx
Last active Jun 16, 2019
Framer X Stack with design and code components
View ImagePost.tsx
import * as React from "react";
import { Frame, Stack, PropertyControls, ControlType } from "framer";
import { Avatar, PostHeader, PostImage, PostButtonGroup } from "./canvas";
// Define type of property
interface Props {
username: string;
timeStamp: string;
postText: string;
width: number;
@davo
davo / Grid.tsx
Last active Sep 15, 2018
CSS Grid for Framer X
View Grid.tsx
import * as React from 'react'
const container: React.CSSProperties = {
width: '100%',
height: '100%',
display: 'grid',
gridTemplateColumns: '10rem 10rem 10rem 10rem'
}
const item: React.CSSProperties = {
@oliverturner
oliverturner / extensions.txt
Created Jun 9, 2018
VSCode extensions for general web dev
View extensions.txt
Orta.vscode-jest
Shan.code-settings-sync
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
codezombiech.gitignore
dbaeumer.vscode-eslint
esbenp.prettier-vscode
jasonlhy.vscode-browser-sync
jpoissonnier.vscode-styled-components
kumar-harsh.graphql-for-vscode
@stevenkaspar
stevenkaspar / CustomIframe.jsx
Created Oct 27, 2017
React Iframe for Writing to contentDocument
View CustomIframe.jsx
/**
* This has a specific use case for writing to the contentDocument allowing for a separated scope
*
* There are probably other ways to do this with ShadowDom but this works well for my purposes
*
* USAGE:
*
* <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} />
*
*/
@busypeoples
busypeoples / FlowReactTutorial.js
Last active Mar 5, 2020
Flow Fundamentals For ReactJS Developers
View FlowReactTutorial.js
//
// MIT License
//
// Copyright (c) 2018 Ali Sharif
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
@piotrf
piotrf / lines.js
Created Sep 18, 2017
Fluid-type typography and spacing (border, margin, padding) for `styled-components`.
View lines.js
export const lines = {
h: '1.8em',
l: '1.6em',
m: '1.4em',
s: '1.2em',
x: '1',
n: '0',
}
export const _line = lines;
@troch
troch / choosing-a-css-in-js-library.md
Last active Oct 18, 2020
Choosing a CSS in JS library
View choosing-a-css-in-js-library.md

Choosing a CSS in JS library

Check comments below, this is only my opinion and a choice specific to my use case

We've architected a SPA to be universal-ready. It grew a lot, when we introduced code splitting we realised converting to CSS in JS was unavoidable in order to have pre-rendering and not load all our CSS up front. We've procrastinated on looking at CSS in JS properly, prioritasing immediate business needs, but kept an eye on industry evolutions.

Our CSS solution for components was a CSS companion file per component, imported with style / postCSS loader (with webpack) but no CSS modules: we were missing a tighter coupling between component rendering and styles. We were at the bottom of the CSS and componentization ladder, the following links have influenced us in choosing the right solution for us:

You can’t perform that action at this time.