Skip to content

Instantly share code, notes, and snippets.

@zanzamar

zanzamar/README.md

Last active August 11, 2017 18:08
Show Gist options
  • Save zanzamar/cb816738af6564b135983e804d16f10b to your computer and use it in GitHub Desktop.
Save zanzamar/cb816738af6564b135983e804d16f10b to your computer and use it in GitHub Desktop.
Download ZIP
HamburgerMenu Example
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNext Bin Sketch</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<style>
body {
color: black;
background-color: white;
}
#app {
padding: 20px;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
Raw
index.js
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
function CirclePhoto({ height, width, color, ...props }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 54 54"
{...props}
>
<defs>
<circle id="path-1" cx="335" cy="248" r="25" />
<filter x="-8.0%" y="-4.0%" width="116.0%" height="116.0%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" type="matrix" in="shadowBlurOuter1" />
</filter>
</defs>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-308.0, -223.0)">
<g>
<use fill="#000000" fillOpacity="1" filter="url(#filter-2)" xlinkHref="#path-1" />
<use fill={color} fillRule="evenodd" xlinkHref="#path-1" />
</g>
<path d="M344.600823,257.772335 L325.398728,257.772335 C323.806961,257.772335 322.512425,256.475297 322.512425,254.880456 L322.512425,243.152376 C322.512425,241.557534 323.806961,240.260497 325.398728,240.260497 L329.316916,240.260497 L329.65988,239.1013 C329.79985,238.466993 330.378593,238.001425 331.059281,238.001425 L338.940793,238.001425 C339.602246,238.001425 340.18765,238.464594 340.34259,239.107075 L340.351722,239.146597 L340.664371,240.260422 L344.601272,240.260422 C346.193039,240.260422 347.487575,241.557459 347.487575,243.152301 L347.487575,254.880306 C347.487126,256.475297 346.192141,257.772335 344.600823,257.772335 Z M325.398728,241.224481 C324.3375,241.224481 323.474551,242.089173 323.474551,243.152376 L323.474551,254.880381 C323.474551,255.943658 324.337575,256.808275 325.398728,256.808275 L344.600823,256.808275 C345.662051,256.808275 346.525,255.943583 346.525,254.880381 L346.525,243.152376 C346.525,242.089098 345.661976,241.224481 344.600823,241.224481 L339.935629,241.224481 L339.408907,239.342334 C339.360329,239.123499 339.163548,238.96496 338.940344,238.96496 L331.058757,238.96496 C330.832186,238.96496 330.639746,239.120124 330.590195,239.342859 L330.034132,241.224481 L325.398728,241.224481 L325.398728,241.224481 Z M335.000524,254.858707 C331.633683,254.858707 328.894536,252.114793 328.894536,248.741897 C328.894536,245.36855 331.633608,242.624636 335.000524,242.624636 C338.366467,242.624636 341.10509,245.369 341.10509,248.741897 C341.105015,252.114343 338.366392,254.858707 335.000524,254.858707 Z M335.000524,243.588096 C332.164222,243.588096 329.856662,245.899664 329.856662,248.741447 C329.856662,251.583229 332.164296,253.894272 335.000524,253.894272 C337.836302,253.894272 340.142964,251.582704 340.142964,248.741447 C340.142889,245.899664 337.835778,243.588096 335.000524,243.588096 Z M343.97979,243.01356 C343.489147,243.01356 343.092216,243.412158 343.092216,243.90285 C343.092216,244.393992 343.489072,244.792065 343.97979,244.792065 C344.469985,244.792065 344.866841,244.393917 344.866841,243.90285 C344.866392,243.412158 344.469461,243.01356 343.97979,243.01356 Z" stroke="#FFFFFF" strokeWidth="0.5" fill="#FFFFFF" fillRule="nonzero" />
</g>
</g>
</svg>
);
}
CirclePhoto.propTypes = {
color: PropTypes.string,
width: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
height: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
};
CirclePhoto.defaultProps = {
color: '#1ABC9C',
width: 54,
height: 54,
};
ReactDOM.render(
<CirclePhoto color="black" width={50} height={50} />,
document.getElementById('app'),
)
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"babel-runtime": "6.25.0",
"react": "15.4.2",
"react-dom": "15.4.2"
}
}
Raw
SVG_Creation.md

SVG Creation

This repo primarially utilizes SVGS for its images.

SVGs are generated from Sketch and should be "cleaned up". There are automated ways to generate and clean up from sketch. Below we have some manual steps:

  • Open sketch file
  • Select "element" you want to export as svg
  • right click -> copy SVG code
  • Paste SVG code into new named file in /src/modules/clients/assets/svgs/[FILE_NAME].jsx
  • Clean up File (see clean up step)
  • Add file into local repo for inclusion. see /src/client/purchase-checkout/app/assets/svgs/index.jsx for example.

Then you can use the SVG like any other component.

Icons

Throughout we are using icons. When we have an icon we want to make sure that it has a consistent "stage" (art board) that it is placed on. Allowing us to always know where/how it is being used with consistency. This really helps with consistent use of styles and a singluar "Component" that wraps alll of our svgs.

In SVG Terms that should be our "view box": viewBox="0 0 151 151"

<svg
	viewBox="0 0 150 150"
	xmlnsXlink="http://www.w3.org/1999/xlink"

The viewbox should always be 150 x 150. With SVGs we are able to infinitely scale from there.

Required data points

xLinkHref

Any SVG which has xlinkHref needs to have an xmlns:xlink reference https://medium.com/@pnowelldesign/stuff-at-the-top-of-an-svg-f3ad198eb54e

viewBox

must have a viewBox defined and pass in height/width with props.

Cleanup

We have the ability to clean up SVGs in an automated way.. We may implement that later (ie: take all paths down to thousandth's decimal place)

[TODO] Optimizer Investigation: https://github.com/BohemianCoding/svgo-compressor Runs them through https://github.com/boopathi/react-svg-loader

For now, we do some simple things

(see Briefcase.jsx for an example)

  • Add the following to the top of the file: /* eslint-disable max-len, react/self-closing-comp */
  • Wrap in react tags
  • Add a width/height as props
  • Provide color as props where necessary
  • find and replace .000000 with .0 (any significant 0000 should be easy to find/replace)
  • remove un-necessary id attributes (sketh adds a lot of them)
  • transform to "react" attributes (stroke-width => strokeWidth, fill-rule => fillRule, etc.)

This might work for some of the tasks: https://github.com/overblog/clean-sketch

Other notes: https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-svg-icons-with-sketch-the-correct-way-752e73ec4694

import React from 'react';

function Briefcase({ height, width, color, ...props }) { return ( <svg width={width || 45} height={height || 40} viewBox="0 0 46 40" {...props}> ); }

Briefcase.propTypes = { color: React.PropTypes.string, height: React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.string, ]).isRequired, width: React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.string, ]).isRequired, };

Briefcase.defaultProps = { color: '#000000', };

export default Briefcase;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment