Carlo Zen carl0zen

20 followers · 37 following

Monterrey, Mexico

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

carl0zen / simple-styled-component.jsx

Last active September 2, 2020 10:23

	import React from "react"
	import styled from "styled-components"
	// Simple form component

	const Input = styled.input`
	background: green
	`

	const FormWrapper = () => <Input placeholder="hola" />

carl0zen / styled-components-example.jsx

Last active September 2, 2020 10:23

Styled Components example

	import styled from "styled-components";

	import {
	theme
	} from "ui";

	const { color, font, radius, transition } = theme;

	export const Button = styled.button`
	background-color: ${color.ghost};

carl0zen / some-container.jsx

Created November 18, 2016 20:44

Example of how to consume a Core UI Button component

	import React from "react"
	import Button from "components/core/button"

	const = Component = () => <Button theme={ Button.theme.secondary }>Some Button</Button>

	export default Component

carl0zen / core-ui-button.jsx

Created November 18, 2016 20:40

Core UI Button Example using CSS Modules

	import React from "react";

	import classNames from "classnames";
	import styles from "./styles";

	const Button = (props) => {
	const { className, children, theme, tag, ...rest } = props;
	const CustomTag = `${tag}`;
	return (
	<CustomTag { ...rest } className={ classNames(styles.root, theme, className) }>

carl0zen / example-styles.scss

Created November 18, 2016 20:24

Local Modules styles example

	@import '~tools/theme';

	:local(.root) {
	border: 1px solid;
	font-family: inherit;
	font-size: 12px;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;

carl0zen / sass-bem-example-markup.html

Last active September 2, 2020 10:21

BEM example

	<body class="scenery">
	<section class="scenery__sky">
	<div class="sky [sky--dusk / sky--daytime] [sky--foggy]">
	<div class="sky__clouds"></div>
	<div class="sky__sun"></div>
	</div>
	</section>
	<section class="scenery__ground"></section>
	<section class="scenery__people"></section>
	</body>

carl0zen / prop-receivers.jsx

Last active September 2, 2020 10:24

	// Prop passing Shorthands for Styled-components
	export const borderProps = props => css`
	${props.borderBottom && `border-bottom: ${props.borderWidth \|\| "1px"} solid ${color.border}`};
	${props.borderTop && `border-top: ${props.borderWidth \|\| "1px"} solid ${color.border}`};
	${props.borderLeft && `border-left: ${props.borderWidth \|\| "1px"} solid ${color.border}`};
	${props.borderRight && `border-right: ${props.borderWidth \|\| "1px"} solid ${color.border}`};
	`;

	export const marginProps = props => css`
	${props.marginBottom && `margin-bottom: ${typeof (props.marginBottom) === "string" ? props.marginBottom : "1em"}`};

carl0zen / new-react-component.sh

Last active December 2, 2015 18:50

	#/bin/sh
	# author: perezpriego
	# This shell script creates the basic architecture of a react-component
	mkdir -p $1
	cd $1
	touch styles.scss index.jsx

	cat > index.jsx <<DELIM
	import React from "react";
	import styles from "./style";

carl0zen / ReactComponent.sublime-snippet

Created December 2, 2015 02:32

	<snippet>
	<content><![CDATA[
	import React from "react";
	import styles from "./style";

	class ${1:Component} extends React.Component {
	constructor(props) {
	super(props);
	}

carl0zen / LabelButtonMixin.jsx

Created May 9, 2015 17:53

React Mixin behavior in es6

	let ReactMixin = InnerComponent => class extends React.Component{
	constructor(){
	super()
	this.state = {count: 0}
	this.increment = this.increment.bind(this);
	}
	increment(){
	this.setState({count: this.state.count+1})
	}
	componentWillMount(){